JavaScript: The Definitive Guide, 6th Edition

jQuery Basics

The jQuery library defines a single global function named jQuery(). This function is so frequently used that the library also defines the global symbol $ as a shortcut for it. These are the only two symbols jQuery defines in the global namespace.^[48]

This single global function with two names is the central query function for jQuery. Here, for example, is how we ask for the set of all <div> elements in a document:

var divs = $("div");

The value returned by this function represents a set of zero or more DOM elements and is known as a jQuery object. Note that jQuery() is a factory function rather than a constructor: it returns a newly created object but is not used with the new keyword. jQuery objects define many methods for operating on the sets of elements they represent, and most of this chapter is devoted to explaining those methods. Below, for example, is code that finds, highlights, and quickly displays all hidden <p> elements that have a class of “details”:

$("p.details").css("background-color", "yellow").show("fast");

The css() method operates on the jQuery object returned by $(), and returns that same object, so that the show() method can be invoked next in a compact “method chain.” This method chaining idiom is common in jQuery programming. As another example, the code below finds all elements in the document that have the CSS class “clicktohide” and registers an event handler on each one. That event handler is invoked when the user clicks on the element and makes ...