That jQuery thing: basics

Internally jQuery is implemented as a class with the name jQuery. But you will almost always use its alias: $. Instances of this class can be created via its constructor [e.g. $("img")]. When instantiated the jQuery object represents a collection of HTML elements. You can run methods on these elements [e.g. $("a").hide()]. You can use the collection as a base for new collections [e.g. $("div").first()]. The jQuery class also has static methods [e.g. $.now()].

The problem with the description given above is that JavaScript doesn’t have classes. The explanation above is false. Still, I find it the best way to understand what jQuery actually is.

The main use of jQuery is to manipulate the DOM (Document Object Model). Before we can do this we should make sure the DOM is loaded.

$(document).ready(function () {
    // The DOM has been loaded
});
 
$(function () {
    // Shorthand form of the above
});
 
$(window).load(function () {
    // The entire page has been loaded
});

It is better to use jQuery than the onload attribute in the body tag which will wait until all assets has been received. The jQuery ready method will fire as soon as the DOM is loaded which happens much earlier. The last example shows how you can wait until the entire web page has loaded, including images. I recommend reading up on the load method if you need to do this though.

To manipulate elements in the DOM we must first select them. jQuery uses the same syntax as CSS files to select HTML elements.

$("*");             // selects all
$("#top");          // by ID
$("table");         // by tag
$(".alert");        // by class
$(":hidden");       // by pseudo class
$("img[alt]");      // by tag, has attribute
$("a[href='#']");   // by tag, has attribute value
$("em.red:hidden"); // combination of selectors

Finally, when we have selected some elements we can do something with them. To see your complete set of options, and also more on selectors, it is time to go to the jQuery documentation. I will end this with a practical example to ponder on.

$(document).ready(function () {
    $("#reset").click(function () {
        $("form").each(function () {
            this.reset();
        });
    });
});

Performance considerations

jQuery makes it trivial to select elements from the DOM. However, under the hood it might not be as trivial. Used incorrectly jQuery can slow your site to a crawl. Selecting a single element via its ID is quick, selecting all elements with a certain class is not. Using attributes or pseudo selectors (i.e. :visible, :even etc) is even slower.

Consider the following advice to keep your site fluent:

// Root your selection to an element with an ID before
// delving deeper with slower selectors
$("#faq").find(".answer").css("color", "blue");
 
// Use variables if you need to reuse the collection
var questions = $("#faq .question");
questions.css("color", "red");
questions.append("?");
 
// Chain jQuery expressions when it makes sense
$("#faq")
    .find(".answer").hide().end()
    .find(".question").click(toggleNext);

The last example works because most jQuery methods will return a reference to the object used to call them. Methods that needs to return something else obviously can’t do this though. When a jQuery object is created from another jQuery object it will keep a reference to its parent, that is why we can go backwards with the end() method.