Test HTTP Requests Tools Blog Learn Quizzes Smile API Log In / Sign Up
Test HTTP Requests Tools Blog Learn Quizzes Smile API Log In / Sign Up
« Return to the tutorials list
We have updated the website and our policies to make sure your privacy rights and security are respected.
Click here to learn more about the way our website handles your data.

Remove this message.

A jQuery tutorial for beginners - The most common use cases

Difficulty: 15 / 50 Tweet

This web development tutorial is to be read by coders who are just starting using jQuery on their websites. By going through the use cases listed below you will learn a few of the basic techniques in jQuery.

In web development, jQuery is mostly used to manipulate the HTML DOM (Document Object Model) or in other words change the structure or appearance of the web page.

Let's assume you have the following html:

  
    <div class="x">
      <p class="y">Awesome Paragraph</p>
      <p class="y">Another awesome Paragraph</p>
      <p class="y">Yet another awesome Paragraph</p>
    </div>
  

To identify the object that needs to be changed, jQuery uses selectors and the syntax is usually like this: $("selector").function("parameters");

Also, it makes sense to wrap all your jQuery code in a special function triggered when the DOM (a.k.a document) is loaded (a.k.a "ready").
Enough talk, let's have a look at code snippet:

  
    <script>
      /*Don't forget to load jQuery itself first*/
      /* First see if the DOM is ready */
      jQuery(document).ready(function(e){
        jQuery(".x").css("background", "#000");
      });
    </script>
  

As you can probably figure out by reading the above code, what we've just done is we've changed the background color of the div that has class "x" to black. If we were to change more than one css property we would do something like this:

  
    <script>
      jQuery(document).ready(function(e){
        jQuery(".x").css({"background": "#000", "padding":"10px", "opacity": "0.1"});
      });
    </script>
  

Another option would be to append another css class to the ".x" div and handle appearance in our css file instead of listing all style properties with jQuery. The result of the code below would be that our div would then have two classes "x" and "mycustomclass"

  
    <script>
      jQuery(document).ready(function(e){
        jQuery(".x").addClass(".mycustomclass");
      });
    </script>
  

Another common use case for jQuery is to use it to show or hide elements from the DOM when certain events occur. For example when a user clicks the submit button on a form we might want to show a "thank you message" that was previously hidden. You will notice that in the code below, instead of using class names as selectors we will be using ids. Also, instead of making our thank you message when the page is loaded (DOM is ready) we will be showing it when the click event is triggered on "#thebutton" selector.

  
    <form id="myform">
      <p style="display:none;" id="thanks">Awesome, but hidden, thank you message</p>
      <input name="email" class="y" value="" placeholder="your email" >
      <button id="thebutton" type="button" class="mybutton">Send me the email</button>
    </form>
    <script>
      jQuery(document).ready(function(e){
        jQuery("#thebutton").click(function(){
          // show is a shortcut function but you could just use jQuery("#thanks").css("display", "block");
          jQuery("#thanks").show();
        });
      });
    </script>
  

If instead of just showing the thank you paragraph to the user, we would want to graciously animate it to fade into view we would use another cool shortcut function like this: jQuery("#thanks").fadeIn().

Thank you for going through through this tutorial. For further reading you can go ahead and purchase the book listed in this article.

comments powered by Disqus