jQuery Tutorial for Beginners – Step By Step Guide!


Previously, we learned how to use Bootstrap to make our web applications look good. This time, we will learn how to use jQuery.

Many of you asked me how to use jQuery. This tutorial is my answer to you. I want to give you links but I feel like it’s easier to teach someone about something that is your own version of work! We hope you guys will find this step by step guide useful.

Getting Started with jQuery

What is jQuery? Okay here’s the simplest definition I can give. jQuery is a JavaScript library. It can:

  1. Make your JavaScript code shorter, faster and cross browser.
  2. Manipulate your HTML, like showing or hiding something from the page.
  3. Handles events – it can do something when a user click a button or any other activity a user can do with a mouse.
  4. Animation – for example make a part of your page fade in, fade out or just simply make something move.
  5. AJAX – do a server request without refreshing your whole web page.

This post. I assume you already know basic HTML, CSS and JavaScript. In this post, aside from the simple definition of jQuery above, we are just going to have two parts:

  1. The super straightforward, step by step tutorial or guide in running a very basic jQuery script. (2.0)
  2. We are going to take a look more of the jQuery basic concepts, as shown in #1 (3.0)

Run jQuery in 5 Easy Steps

Follow the steps below – these steps will lead you to run a very basic jQuery script that does a slide and toggle.

Create HTML page with its basic structure.

<!-- step 1 -->
<!DOCTYPE html>
    <title>jQuery Tutorial for Beginners</title>

Add element to be clicked. We’re gonna have a button in this example, we added an ID name to this button called myButton. Add the following code inside the “body” tag.

<!-- step 2 -->
<button id='myButton'>Click to Slide or Toggle</button>

Add the element to be shown or hidden. We’re gonna have a “p” tag with bunch of sample words inside. Add the following code below step 2′s code.

<!-- step 3 -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec.

Add the jQuery library. Aren’t you excited? You can also download your own copy of jQuery but in today’s example, we’ll be linking to Google’s copy of jQuery. Add the following code below step 3′s code.

<!-- step 4 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

Step 5: Add jQuery script. This script will show or hide the “p” tag and the words inside it. Notice that we selected the button by referencing our button’s ID myButton.

<!-- step 5 -->
$("#myButton").click(function () {

Download Source Codes

You can download all the code used in this tutorial for only $9.99 $5.55!

Congratulations! You are now a jQuery coder! Just kidding. Not yet. But don’t lose hope!

To achieve being a real jQuery coder, like any other skill, it must be practiced and be well versed with its concepts. So continue to read below and make your jQuery wisdom a little bit better.jQuery Basic Concepts

4.1 Run jQuery when DOM is ready. We didn’t implement this in our example above because I want to give you a quick look on how to run a jQuery script and it is a very small web page anyway.

But in reality, if you use jQuery in larger web pages, you have to run it when the DOM is ready. Here’s how:

$(document).ready(function() {
    // jQuery will run once everthing else in your web page is already loaded.
    // All your jQuery codes here.

How to Select an Element in jQuery? Learning jQuery selectors are very important because you’re dealing with HTML elements within your web page.

I’m gonna give you some of the most basic selectors being used:

// selects 'only one' HTML element with ID "myButton", such as our example above
// notice that we use hashes (#) for ids, like that of CSS
// selects all HTML elements with class "myClass", for instance: <div class='myClass'></div>
// notice that we used dots (.) for classes, like that of CSS
// selects all button HTML element, for example: <button>Click Me!</button>
// selects all div element, example: <div>Me and all other div will be selected!</div>
// selects all anchor link element, for example: <a href="https://codeofaninja.com/">Me and all other 'a' tags will be selected!</a>

Learn more jQuery Selectors

jQuery Events. In our example above (2.0), we use a click event, in jQuery it was represented by the click() method. Here are some more jQuery events that you might find useful:

    // do something when user click the button
    // do something when user submits a form
    // do something when user hover an HTML element
    // do something when user types on a textbox with ID myTextbox

Learn more jQuery Events

Animation Effects with jQuery. On our example above (2.0), the animation effect we used is the slideToggle(). Here are some other animations that you can do with jQuery:

// slide or toggle animation with a <p> tag
// you can change 'slow' to 'fast' or any number in milliseconds
$("p").slideToggle(1000, function() {  
    // do something when slide up or down animation is done
// hide the matched elements with a sliding motion.
$( "#book" ).slideUp( "slow", function() {
    // animation complete
// display or hide the matched elements by animating their opacity.
$( "#book" ).fadeToggle( "fast", function() {
    // animation complete

Learn more jQuery Animation Effect

Remember that the examples above are just some of the basics. Continue to practice, search and learn more in the process. And as always, thanks for reading!

5.0 Online Resources

6.0 What’s Next?

Learn jQuery UI Tutorial for Beginners – Learn how to use date picker and other user interface interactions, effects, widgets, and themes built on top of the jQuery.

7.0 Related Tutorials

We listed all our high quality full-stack web development tutorials here: Click here.

8.0 Some Notes

Found An Issue?

If you found a problem with this code, please send us an email. Before you send an email, please read our our code of conduct. Our team's email address is [email protected]

Please be descriptive about your issue. Please provide the error messages, screenshots (or screen recording) and your test URL. Thanks!

Subscribe to CodeOfaNinja

Receive valuable web development tutorials to your email. Subscribe now for FREE!

Thank You!

Thank you for learning with our jQuery Tutorial for Beginners! Please share this tutorial to one of your friends if you have time.

By Mike Dalisay

I'm Mike Dalisay, a pro web developer since 2010. I love web development. Improving our tutorials and source codes makes me happy. Do you want to suggest an edit to our tutorial? Got something to ask about our source codes? You may use our comments section below or email our team at [email protected]


  1. I don’t know how to thank you guys for making such a beautiful website to help the people in need,
    I should have visited your website earlier, I am 1000000% sure I’d have learned a lot more than I have got now. Awesome, You’ve also put inspiration sector which has famous Programmers with their quotes, I’m mesmerized of it

    I have suggested all my friends to visit ;)


    May god bless u

  2. sir , its realy awesome and easy way to learn , can u post the easy way to make a multiple image changing slider ( plezzzzzzzzzzzzzzz )

    1. Hello @disqus_upRMu9hjQG, thanks for the kind words and post idea! We will add that to our list of tutorial request.

      In the mean time, please share our site to one of your friends if you have time. Thank you!

  3. Thanks a lot it is nice way to describe I really enjoyed its really easy to understand as well hope you will make next tutorial soon..

    1. Hello @Junaid Admin, I’m glad you found our tutorial really easy to understand! We will create another tutorial related to this for sure. Please connect with us via email or social media!

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to top