• Choose a category
• All
• Classic-Fiction

♦ There are two elements with the class bordered. You have no easy way in ordinary DOM work to apply code to all elements of a particular class, but jQuery makes it easy.

♦ Several elements have custom CSS, but no CSS is defined. The jQuery code changes all the CSS dynamically.

The init() function is identified as the function to be run when the document is ready. In this function, I use the powerful CSS method to change each element’s CSS dynamically. I come back to the CSS in a moment, but first notice how the various elements are targeted.

Selecting jQuery objects

jQuery gives you several alternatives for creating jQuery objects from the DOM elements. In general, you use the same rules to select objects in jQuery as you do in CSS:

♦ DOM elements are targeted as is. You can include any DOM element inside the $(“”) mechanism to target all similar elements. For example, use $(“h1”) to refer to all h1 objects or $(“p”) to refer to all paragraphs.

♦ Use the # identifier to target a particular ID. This works exactly the same as in CSS. If you have an element with the ID myThing, use the code $(“#myThing”).

♦ Use the . identifier to target members of a class. Again, this is the same mechanism that you use in CSS, so all elements with the class bordered attached to them can be modified with the code $(“.bordered”).

♦ You can even use complex identifiers. You can even use complex CSS identifiers like $(“li img”);. This identifier only targets images inside a list item.

These selection methods (all borrowed from familiar CSS notation) add incredible flexibility to your code. You can now easily select elements in your JavaScript code according to the same rules you use to identify elements in CSS.

Modifying the style

After you’ve identified an object or a set of objects, you can apply jQuery methods. One very powerful and easy method is the style() method. The basic form of this method takes two parameters: a style rule and value.

For example, to make the background color of all h1 objects yellow, I use the following code:

$(“h1”).css(“backgroundColor”, “yellow”);

If you apply a style rule to a collection of objects (like all h1 objects or all objects with the bordered class), the same rule is instantly applied to all the objects.

A more powerful variation of the style rule exists that allows you to apply several CSS styles at once. It takes a single object in JSON notation as its argument:

$(“#myParagraph”).css({“backgroundColor”:”black”,

“color”:”white”});

This example uses a JSON object defined as a series of rule/value pairs. If you need a refresher on how JSON objects work, look at Book IV, Chapter 4.

Adding Events to Objects

The jQuery library adds another extremely powerful capability to JavaScript. It allows you to easily attach events to any jQuery object. As an example, take a look at hover.html, as shown in Figure 2-3.

Figure 2-3:

A border appears around each list item when your cursor is over it.

When you move your cursor over any list item, a border appears around the item. This would be a difficult effect to achieve in ordinary DOM/JavaScript, but it’s pretty easy to manage in jQuery.

Adding a hover event

Look at the code to see how it works:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Hover Demo

• alpha
• beta
• gamma
• delta