12.3. Selecting Elements

jQuery's strength is the ease with which you can select and manipulate elements on the page. You have used a selector method already to select all <div> elements that have an ID of div1:

$("#div1").html("hello jQuery");

jQuery supports many different ways to select an element or elements that should meet all but the most awkward requirements. Table 12-1 lists examples of other selection methods you might want to use.

12.3.1. CSS Selectors

In addition to the previous standard selectors, more modern selectors are also available (browser support may differ, but you are probably safe with IE 7+ and Firefox 3+); see Table 12-2.

12.3.2. jQuery Selectors

jQuery also provides some built-in selectors; see Table 12-3.

12.3.3. Working with Sets

So, you have used one of the preceding selector methods and now have a collection of matching elements (a wrapped set). How can you work with them? jQuery has a number of different methods to work with collections; see Table 12-4.

12.3.4. .each() Method

The .each() method works like the foreach statement in C# or Visual Basic and allows you to iterate through a set of elements. The following example iterates through a set of <div>s, modifying the innerHTML property on each element:

function showDivNumber()
{
    $("div").each(function(index) {
        this.innerHTML = "I am div number " + index;
    });
}

Of course, if you just wanted to set the same text to each <div> element, you could apply the change to the wrapped set as follows:

$("div").html("I am a div");

12.3.5. Working with Attribute Values and CSS

jQuery provides methods to read, set, and remove attributes on page elements; see Table 12-5.