jQuery Basics for Beginners

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>
    <title>jQuery Basics</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js">

      // Your code goes here

jQuery Basics

jQuery can run once the DOM is ready for manipulation.

  // Your code goes here    

or a more advanced technique that does the same thing

    // 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

   // Your code goes here 

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

var $myName = jQuery.noConflict();

   // 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){
    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


jQuery comes with great looking effects

$("#button2").on("click", function(event){

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

$("#button3").on("click", function(event){

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

    .addMe {
        color: red;

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

Many more awesome manipulation methods can be found here

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