• Choose a category
• All
• Classic-Fiction

$("img").each(function(index) {

alert(this.src);

});

The callback function you pass to each receives the 0-based index of the current iteration. Nicely enough, you don’t need to retrieve the corresponding DOM element yourself; you just use the keyword this to refer to the element currently being processed. If the callback function returns false, the iteration is stopped. Note that each is a quite generic function made available for any task for which a more specific jQuery function doesn’t exist. If you find a jQuery function that already does what you intend to code through each, by all means use the native function.

You use the length property to read the size of the wrapped set. You can also use the size function, but the length property is slightly faster:

// You better use property length

alert($("img").size());

The get function extracts the wrapped set from the jQuery object and returns it as a JavaScript array of DOM elements. If you pass an index argument, instead, it will return the DOM element found at the specified 0-based position in the wrapped set. Note that the get function breaks the jQuery chainability because it returns a DOM object or an array of DOM objects. You can’t further apply jQuery functions to the results of a get call.

Many more operations are available on wrapped sets, and many others can be added through plug-ins. I’ll return to the topic of operations that are possible on a wrapped set later in the chapter, right after discussing the syntax used to arrange queries.

Basic Selectors

A query is characterized by a selector. A selector is simply the expression that, when properly evaluated, selects one or more DOM elements. In jQuery, you have three basic types of selectors—based on ID, CSS, or tag name. In addition, a selector can result from the composition of multiple simpler selectors combined using ad hoc operators. In this case, you have a compound selector.

An ID selector picks up DOM elements by ID. An ID selector commonly selects only one element unless multiple elements in the page share the same ID—this condition violates the HTML DOM standard, but it is not too unusual in the real world. Here’s the syntax of an ID selector:

// Select all elements in the context whose ID is Button1

$("#Button1")

The leading # symbol just tells jQuery how to interpret the following text.

A CSS-based selector picks up all elements that share the given CSS class. The syntax is shown here:

// Select all elements in the context styled with the specified CSS class

$(".header")

In this case, the leading dot (.) symbol tells jQuery to interpret the following text as a CSS style name.

Finally, a tag-based selector picks up all elements with the specified tag, such as all IMG tags, all DIV tags, or whatever else you specify. In this case, the selector consists of the plain tag name—no leading symbol is required:

// Select all IMG elements in the context

$("img")

As mentioned, you can also concatenate two or more selectors to form a more specific one.

Compound Selectors

Concatenation is possible through a number of operators. For example, the white space picks up all elements that satisfy the second selector and are descendants of those matching the first. Here’s an example:

// Select all anchors contained within a DIV

$("div a")

The selector just shown is functionally equivalent to the following jQuery expression:

$("div").find("a");

Similar to the white space, the > operator selects elements that are direct child elements (and not just descendants) of the elements matched by the first selector:

// All anchors direct child elements of a DIV

$("div > a")

The preceding selector is functionally equivalent to the following jQuery expression:

$("div").children("a")

Plain concatenation of selectors results in a logical AND of conditions. For example, consider the following query:

$("div.header.highlight")

It selects all DIV elements styled using both the class header and class highlight.

The + operator—the adjacent operator—selects