• Choose a category
• All
• Classic-Fiction

The HTML couldn’t be simpler. It’s simply an unordered list. The JavaScript isn’t much more complex. It consists of three one-line functions:

♦ init() is called when the document is ready. It makes jQuery objects of all list items and attaches the hover event to them. The hover() function accepts two parameters:

• The first is a function to be called when the cursor hovers over the object.

• The second is a function to be called when the cursor leaves the object.

♦ border() draws a border around the current element. The $(this) identifier is used to specify the current object. In this example, I use the css function to draw a border around the object.

♦ noBorder() is a function that is very similar to the border() function, but it removes a border from the current object.

In this example, I used three different functions. Many jQuery programmers prefer to use anonymous functions (sometimes called lambda functions) to enclose the entire functionality in one long line:

$(“li”).hover(

function(){

$(this).css(“border”, “1px solid black”);

},

function(){

$(this).css(“border”, “0px none black”);

}

);

Note that this is still technically a single line of code. Instead of referencing two functions that have already been created, I build the functions immediately where they are needed. Each function definition is a parameter to the hover() method.

If you’re a computer scientist, you might argue that this is not a perfect example of a lambda function, and you would be correct. The important thing is to notice that some ideas of functional programming (such as lambda functions) are creeping into mainstream AJAX programming, and that’s an exciting development. If you just mutter “lambda” and then walk away, people will assume that you’re some kind of geeky computer scientist. What could be more fun than that?

Although I’m perfectly comfortable with anonymous functions, I often find the named-function approach easier to read, so I tend to use complete named functions more often.

Changing classes on the fly

jQuery supports another wonderful feature. You can define a CSS style and then add or remove that style from an element dynamically. Figure 2-4 shows a page that can dynamically modify the border of any list item.

Figure 2-4: Click list items, and their borders toggle on and off.

JQuery events

jQuery supports a number of other events. Any jQuery node can read any of the following events:

Change: The content of the element changes.

Click: The user clicks the element.

DblClick: The user double-clicks the element.

Focus: The user has selected the element.

Keydown: The user presses a key while the element has the focus.

Hover: The cursor is over the element; a second function is called when the cursor leaves the element.

MouseDown: A mouse button is clicked over the element.

Select: The user has selected text in a text-style input.

The code shows how easy this kind of feature is to add:

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

Class Demo

• alpha
• beta
• gamma
• delta

Here’s how to make this program:

1. Begin with a basic HTML page.

All the interesting stuff happens in CSS and JavaScript, so the actual contents of the page aren’t that critical.

2. Create a class you want to add and remove.

I build a CSS