• Choose a category
• All
• Classic-Fiction

$(document).bind("ready", function() { ... });

In this case, though, the handler won’t run if at the time of event binding the ready event has already fired. Finally, the ready handler is delayed until the document is ready or runs immediately if the document is already entirely loaded. I’ll return to bind and other event functions later in the chapter.

Onload vs. Ready

Which code runs first, the window’s onload event handler or the call’s jQuery ready function?

The onload event is called after the HTML and any auxiliary resources are loaded. The ready function is called after the DOM is initialized. The two events can run in any order. The onload event won’t ensure the page DOM is loaded; the ready function won’t ensure all resources, such as images, have been loaded.

Another noticeable difference between onload and ready is that you can have multiple calls to ready in a page. You can have only one global onload event handler either defined on the window object or expressed as an attribute on the body tag. When multiple calls to ready are specified, jQuery pushes specified functions to an internal stack and serves them sequentially after the DOM is effectively ready.

It is generally recommended that you use either the ready function or the onload handler. If you need both things, you should use the jQuery’s load function attached to the window object or to more specific elements such as images, scripts, or style sheets:

$(window).load(function() {

// Initialization code here

});

You typically use load when you need to access specific information on specific page elements such as images or scripts. So in summary, you rarely end up using load on the window object.

Wrapped Sets

Why does the word “query” appear in the name of the library? The ultimate purpose of the jQuery library (j stands for JavaScript) is simplifying the task of getting a selected subset of DOM elements to work with. Put another way, the jQuery library is mostly intended to run queries over the page DOM and execute operations over the returned items.

The query engine behind the library goes far beyond the simple search capabilities of, say, document.getElementById (and related functions) that you find natively in the DOM. The query capabilities of jQuery use the powerful CSS syntax, which gives you a surprising level of expressivity. You find similar query expressivity only in the DOM of HTML 5 when it’s fully defined and widely and uniformly supported.

The query engine of jQuery allows you to select elements that have a given combination of attribute values, appear in a fixed relative position in the DOM tree, or have a particular relationship with other elements. More importantly, you can add filter conditions, chain multiple queries together, and apply them sequentially.

The result of a query is a wrapped set. A wrapped set is an object containing a collection of DOM elements. Elements are added to the collection in the order in which they appear in the original document.

A wrapped set is never null, even if no matching elements have been found. You check the actual size of the wrapped set by looking at the length property of the jQuery object, as shown here:

// Queries for all IMG tags in the page

var wrappedSet = new jQuery("img");

var length = wrappedSet.length;

if (length == 0)

alert("No IMG tags found.");

Note that the expression just shown, through which you get the wrapped set, is fully equivalent to the more commonly used $(“img”).

The wrapped set is not a special data container; rather, it’s a jQuery-specific term to indicate the results of a query. However, once you hold all the elements you were looking for, you need to process them. To start off, let’s see how to enumerate the content.

Enumerating the Content

To loop through the elements in the wrapped set, you use the each function. The each function gets a function as a parameter and invokes that on each element:

// Prints