JavaScript Tutorial Newsletter Do you want to learn how to write code? This is an independent code programming tutorial website. All tutorials are written and distributed for free to whosoever wishes to sign up. There are no ads. Please support us by subscribing to free tutorial updates newsletter.

Join other 5 subscribers

A Free Online jQuery Training Class / Course / Tutorial

This free jQuery course assumes that you already know How to Add jQuery to Your Webpage. If you haven't written any jQuery code before at all, you probably want to see this Getting Started with jQuery tutorial before moving on. However, examples in this tutorial are self-explaining.

jQuery is JavaScript

They are exactly the same. jQuery is JavaScript. JavaScript is jQuery. If you understand one you will understand another. If you want to become proficient at both, you need to first learn JavaScript syntax by following Beginner's Guide to the Basics of JavaScript Programming tutorial on In JavaScript functions are also objects. So the main jQuery object is also a JavaScript function. Learn How JavaScript Functions Work in this tutorial if you need to accumulate more knowledge.

Two years ago, when I started writing jQuery code, I only knew a few things. It seemed like enough. After several months, looking back, I wish I knew more about jQuery sooner. I wish I could understand unique CSS selectors, events and callback functions. This online tutorial is a collection of those things, I wish I knew. I hope that once you go through all examples in this tutorial, it will save you time learning these key elements of JavaScript programming in today's day and age.

Why create a free online jQuery course? So anyone can learn without having to pay for one. This online jQuery class is a collection of practical tips, I have collected over a period of several months, that will help you learn jQuery quicker.

Let's begin.

How to Initialize a jQuery Application

Once jQuery is included in (added to) your webpage in between <HEAD> tags using the <LINK> tag, it's time to initialize the jQuery application. Any custom code that you wish to execute just after the webpage has finished downloading will be placed here. But where?

Because web pages load in sections, jQuery code is usually written once all HTML elements finish loading. This way we are sure that all elements exist. (It is possible to call a jQuery command on an element that is still loading, in which case, nothing will happen.) The two following patterns are used to initialize jQuery code:

Pattern 1. Using jQuery "on document ready" event:

<script type = "text/javascript"> $(document).ready(function() { /* Initialize jQuery and JavaScript code here */ }); </script>

Pattern 2. Passing jQuery object into an anonymous function closure. To learn more about this peculiar structure, see another tutorial Nameless functions and Initializing the Main jQuery Object on this website.

<script type = "text/javascript"> (function(){ /* Initialization code here */ })(jQuery); </script>

Here, we created a nameless function, wrapped it in parentheses (otherwise it couldn't have been called by name, because it is an anonymous function) and called it, passing the main jQuery object into it, all in one JavaScript statement.

jQuery programming depends on two skills: knowing how to use CSS selectors to select HTML elements and applying jQuery methods on these selected elements. First, let's take a look at how to use CSS selectors, and then we will move on to using them together with jQuery methods.

CSS Selectors

Standard CSS selectors are passed to the main jQuery object (called "jQuery" or "$", they are synonymous) as a string. For example, to select all paragraph tags "by name", the following CSS selector is used:

var selector = "p"; // Pass this selector to the jQuery object "$" $(selector); // A shorthand version of the above $("p");

Here is a list of some other CSS selectors with explanations:

// select absolutely all HTML elements in the document $("*"); // select all paragraphs $("p"); // select all paragraphs, spans and divs $("p,span,div"); // select a paragraph whose id is "short" $("p#short"); // select a <div> tag whose class is "option" $("div.option"); // pseudo selectors are ones that start with a colon (:) // select only the first or last paragraph using a pseudo-selector :first and :last $("p:first"); $("p:last"); // select first, second, third, etc. paragraph in hierarchy (counting starts with 1) $("p:nth-child(1)"); // first $("p:nth-child(2)"); // second $("p:nth-child(3)"); // third // select only odd (1,3,5,7...) or even (2,4,6,8...) <p> elements $("p:nth-child(even)"); $("p:nth-child(odd)"); // select any element which has attribute named "value" $("[value]"); // select all children paragraphs inside arbitrary parent element, // but only after any element whose class is "s" $(".s ~ p"); // select all input elements whose "type" attribute is "text" (<input type = "text"/>) $("input[type=text]"); // select all checked checkboxes using attribute selector [] and :checked $("input:checked"); // which, will select radio buttons too, or $("input[type=checkbox]:checked"); // which will select only check boxes // select all input elements within form tag (but not the form tag itself) $("form input"); // select all <a> links inside table's tr / td tags $("table tr td a"); // selects 7th element of type span in a parent/child hierarchy. $("span:nth-of-type(7)");

Knowing jQuery selectors is a matter of understanding CSS selectors. They are one and the same thing. Whatever works inside "style.css" file will work inside $(selector) function.

jQuery Methods

We've selected elements, now what? It's time to use jQuery methods on the list of elements that was selected.

// hide all paragraphs (display:none) $("p").hide(); // show all paragraphs again $("p").show(); // remove all paragraphs from DOM (core website structure) completely $("p").remove(); $("p").show(); // will no longer work; all paragraphs have been removed entirely from the webpage! // apply CSS style "color:blue" to all <p> tags $("p").css("color", "blue"); // apply CSS style "color:blue;background:yellow" using Object Literal $("p").css({ "color": "blue", "background": "yellow" }); // select only the first or last paragraph from selected list $("p").first(); $("p").last(); // select all elements, but filter them for <p>, using method "is" $("*").is("p"); // the "is" method is often used on "this" variable // inside an event's callback function to identify its kind $(this).is("div"); // select the parent element where #short paragraph resides $("p#short").parent(); // select all input elements if its parent is <form> $("input").parent().is("form"); // select and apply css styles, clear queue (end) select new set of elements // in other words, color all <p> elements blue, all <b> elements red $("p").css("color", "blue").end().add("b").css("color", "red"); // without the "end" method in between both <p> and <b> are colored red $("p").css("color", "blue").add("b").css("color", "red");

jQuery Events

To attach an event (to start listening to an event, or to add an event listener) to an HTML element, jQuery has a method called "on". To stop listening to an event using jQuery, use the method "off".

// Start listening to a "click" event on all paragraphs $("p").on("click", function() { /*do something*/ }); // Stop listening to "click" events on all paragraphs $("p").off("click");

Now whenever a <p> tag is clicked, the statements within the nameless function(){ /*here*/ } will execute. The exact time of when this happens during an event is defined by the internal code of that event. Some events happen just before an action occurs, others just after it has finished occurring, depending on situation.

This walk-through tutorial is for anyone who is not yet fully familiar with jQuery library. Please share it with your friends. This free online course is a simple tutorial, each section is designed to explain a trick, a technique or practical examples that could very well be an answer to an interview question.

© 2014 Copyright