hackification

Homepage

...rediscover the joy of coding

A Developer's Introduction to jQuery

I've only been using jQuery for a couple of months now, but I've been immediately impressed by its power and concise syntax. I thought I'd present it from my (a developer's) perspective. I come from a C# background, so this article will be written from that sort of point of view.

I'll start with an example. Suppose I have a HTML table, and I'd like to do two things:
  1. Make it easier to scan visually by applying alternating row colors;
  2. Make it easier to read by having a hot-tracking highlight bar over the rows.
CSS Styling

Before we jump into the jQuery, we need to define a couple of styles in the stylesheet:
.alt { background-color: #ddd; }
.hover { background-color: #aaf !important; }
The jQuery Script

Now that's sorted, here's the jQuery:
$(function() {
  $('table tbody tr:odd').addClass('alt');

$('table tbody tr').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); });
If you'd like to see a working example, just visit this page, and view source.

Dollars Dollars Dollars

The most noticable aspect of a jQuery script is all the dollar signs. Just as C/C++ allow underscores in function names, JavaScript allows dollar signs in identifiers. And just as a single underscore would be a valid (albeit unusual) function name in C/C++, so a single dollar sign is a valid identifier name in JavaScript.

So the first line that begins '$(...' is calling a function called '$'. If this bothers you, you can also call jQuery functions using the jQuery identifier. (In other words, 'jQuery(...)' is a synonym for '$(...)').

Functions in Functions

JavaScript is a very expressive language, and unlike the C family of languages, treats functions as first-class citizens that can be treated just like any other object. The jQuery script above has the following form:
$(function() {
  ...
});
Or to put it another way, we are calling the function '$', passing a single argument, which is itself an anonymous function.

In jQuery, this is shorthand for attaching an event to be fired when the DOM is ready. So to recap, the anonymous function body (marked '...' above) will be called when the document is ready.

DOM Querying and Manipulation

So we've now established that the two statements within the anonymous function will be called once, when the document is ready. Let's consider the first statement:
$('table tbody tr:odd').addClass('alt');
Hopefully this statement is a lot easier to understand than the last section. We call a function ('$', as usual), passing a string as a parameter, which returns some object, on which we call a function, passing a second string. (Strings in JavaScript may be enclosed with either single or double quotes).

jQuery functions (named '$') are queries - they act on the DOM (or portion of it), and essentially return a set of matching elements. One major selling point of jQuery is that it presents a unified and more powerful version of CSS selectors - and they work cross-browser - so you don't need to worry whether a particular selector works on Internet Explorer.

In the above statement, we want to select all 'tr' elements, that are children of 'tbody', that are children of 'table', and furthermore, only select those which are odd-ordered (i.e., at indexes 1,3,5, etc).

Once we've selected these elements, we can act on them as a whole using the various jQuery functions. In the statement above, the call to 'addClass' will add the named CSS class ('alt') to all elements returned from the query.

Basically, we wanted to write the following in our stylesheet:
table tbody tr:odd
{
  background-color: #ddd; // See stylesheet at top of page.
}
...but we couldn't because ':odd' isn't a supported CSS selector. (Or at least, isn't supported in many major browsers).

DOM Events

Onto the last stretch. The second statement is a multi-liner, but if we omit a few details, hopefully things will be clearer:
$('table tbody tr').hover(function() { ... }, function() { ... });
We're querying the DOM, as before (for tr's in tbody's in table's), then using the 'hover' function. The hover function is passed two parameters, both of which are anonymous functions.

The 'hover' method is one of a set of jQuery functions that allow you to attach events to the DOM. In the case of 'hover', the first function passed will be called when the mouse moves over the element, and the second called when the mouse moves out.

(Note that as before, these events will be attached to all elements returned by the query, even though there is only a single function call).

When calling the event handler functions, jQuery assigns the variable 'this' to the element to which the event applies. Wrapping the element in the '$' syntax - $(this) - allows all the jQuery functions to be used on that element - in this case, addClass and removeClass.

Conclusion

This has been a longish article, and of course I've barely scratched the surface of what you can do with jQuery, but I've introduced the most important aspects. jQuery provides a browser-independent view of your document, and provides powerful methods for querying, modifying, and attaching events.