jQuery prides itself on “write less, do more.”

In other words, it removes the complexity of vanilla JavaScript in favor a shorter more intuitive syntax.

You can accomplish the same thing in jQuery with Javascript and vice versa. The difference is that jQuery has an easy to use API.

How to get jQuery

There are many ways to download jQuery but the simplest method would be to use a CDN.

The best place to place it is at the end of the body tag

<!doctype html>
<html>
  <head>
    <title>jQuery Basics</title>
  </head>
  <body>
    <!--CDN-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js">
    </script>

    <script>
      // Your code goes here
    </script>
  </body>
</html>

jQuery Basics

jQuery can run once the DOM is ready for manipulation.

$(document).ready(function(){
  // Your code goes here    
});

or a more advanced technique that does the same thing

$(function(){
    // Your code goes here
});

Another important thing to know is that $ is an alias for jQuery so the previous functions could have been written as

jQuery(document).ready(function(){
   // Your code goes here 
});

You could also replace $ with your own variable name to avoid name clashes with other libraries

var $myName = jQuery.noConflict();

$myName(document.).ready(function(){
   // Your code goes here 
});

Event handling

Events bind to objects such as elements and once triggered fire an event handler (callback).

$("#button").on("click", function(event){
    event.preventDefault();
    alert("Button clicked");
});

Notice the event that was passed into the callback. That’s an event object that has methods and properties for that specific event.

There are far too many events to cover in a basic tutorial so you can view more of them here

Effects

jQuery comes with great looking effects

$("#button2").on("click", function(event){
   $(this).hide(); 
});

Notice this inside the callback. It refers to this currently selected DOM element in this case #button2

$("#button3").on("click", function(event){
   $(this).slideUp(); 
});

Many more cool effects can be found here.

Manipulate the DOM

jQuery makes it easy to add attributes to elements, change the inner HTML, and getting values from elements.

Adding a class

<style>
    .addMe {
        color: red;
    }
</style>

<button id="button4">Add a class</button>
$("#button4").on("click", function(event){
   $(this).addClass("addMe"); 
});

Many more awesome manipulation methods can be found here


And that’s the basics of jQuery hope you learned something new!