An Introduction to jQuery, Part 1 : Page 4

jQuery is a small JavaScript library that makes development of HTML-based client JavaScript drastically easier.

by Rick Strahl

Feb 16, 2009

Page 4 of 7

The Wrapped Set

The result of $("#gdEntries>tbody>tr:even") is a jQuery wrapped set object, which is an array-like structure that has a length property and an array containing all the matched elements. You can reference the DOM elements in the wrapped set directly:

The jQuery constructor always returns an object result, so even if the selector finds no matches it returns an object. You can check the .length property to determine whether the selection returned matches.

After obtaining a set of matches you can iterate through them manually using a forloop or use the wrapped set function .each() to iterate over the list. What's nice about .each() is that it assigns the thispointer to the selected DOM element; in other words, you can do this:

Wrapped Set Functions

Manual iteration is useful at times, but more commonly you'll use one or more of jQuery's 100+ operational functions on wrapped set elements. The jQuery selector applies both the .addClass() and .css() functions you saw above against all the elements that it matches to those you created with the jQuery() or $() function—in this case each of the rows you selected. You can find all the jQuery functions on the API reference page, or if you're into terse lookup sheets you can check out this printable jQuery cheat sheet.

Function Chaining

jQuery lets you use a fluent interface for most function calls, which means that you can chain many jQuery function calls together in a single command. You've already seen some examples:

This syntax chaining works because most jQuery functions return a matched set as a result. For example, .addClass and .css both return the original matched set they acted upon. Other functions such as .not and .filter modify the original matched set and return a new matched set. There's also an .end() function that you can use to remove any filters and return to the original matched set that you specified at the beginning of the chain.

Chaining is a great way to keep code compact—but it's optional. If you prefer, you can write more traditional code, for example:

Chained statements can sometimes be difficult to debug, because you get a single result value at the end. In contrast, using explicit methods lets you see changes after each step, which can be useful for debugging. For I often break up commands for debugging and chain them back together after they're fully debugged.

Still, not all jQuery functions can be chained. Functions such as .val(), .text(), and .html() return string values; .width() and .height() return numbers; and .position() returns a position object. If you study the jQuery function list it should be pretty clear what the result types of most functions are. Typically, functions that you would expect to return a void result return a matched set—all others return values or data.

Event Handling

Event handling is one of jQuery's nicest aspects because it makes the process easy and consistent across browsers. jQuery provides the high level .bind() and .unbind() functions that generically attach and detach event handlers to and from matched set elements. That makes it easy to attach events to many objects at once—such as the click handler attached to the rows in the example shown earlier. In addition, most common events such as click, keystroke, and mouse events have corresponding dedicated handler functions: .click(), .mousedown(), change(), and .keydown(). jQuery event handlers take a function as a parameter. jQuery tracks these handlers so that it can unbind them later. Coding doesn't get any easier than this. There's even an option to name event handlers uniquely so that you can remove them in a consistent way:

The extra name following the event name in the preceding example lets you specifically identify an individual event handler. In contrast, the default behavior would remove all event handlers for an event that were assigned with .bind() or the various convenience handlers such as .click().

jQuery also includes:

.one(): This fires an event exactly once, and then disconnects the handler.