At the Forge - jQuery

JavaScript has become, somewhat surprisingly, one of the hottest programming languages around. The question is not whether Web developers need to know JavaScript, but rather what library they should use when working with it. That's because the core JavaScript language is a bit rough around the edges, with incompatibilities across different browsers and platforms. This is compounded somewhat by other cross-platform browser differences, such as various ways that event handling is implemented, which can make it hard for developers to deal with such problems.

Most of my Web development work in the past few years has been in the Ruby language in general and the Ruby on Rails framework in particular. Rails comes with a high-quality JavaScript library called Prototype, and I have written several columns describing how to use Prototype, as well as the Scriptaculous effects library that builds upon its language improvements.

Prototype isn't going away. But, over the past few months, I've noticed a growing interest—from within the Rails community and from other developer communities as well—in jQuery, another high-quality, open-source JavaScript toolkit. Most significant, jQuery was chosen by Microsoft as the official JavaScript library for its developers. jQuery also has a large number of ready-made plugins, including many that provide user-interface functionality. And, as I've started to explore jQuery, I'm beginning to think that its fans have a point, and I've even started to consider switching some of my work away from Prototype to jQuery.

What makes jQuery so special and different? What does it offer? And, how can you integrate it into your applications? This month, I try to answer all of these questions, as we explore some of the basic features of jQuery. Next month, we'll look at some of the UI widgets that jQuery provides to spruce up our sites and make them more functional.

jQuery was first released in 2006, based on preliminary work that John Resig had done since August 2005, as a simple JavaScript library that would make it more convenient to develop Web applications. Over time, it has grown to include many contributors. Resig himself has written two books on JavaScript and now works for the Mozilla corporation as a JavaScript evangelist.

If you have used Prototype previously, you won't be surprised to know that $() is not only a legitimate function name in JavaScript, but it's also used extensively within jQuery. However, $() works differently in jQuery than in Prototype. In Prototype, you can say:

$('foo')    // Prototype

to get the element with an id attribute of foo, or:

$('foo', 'bar')    // Prototype

to get the elements with id attributes of foo and bar. The number of parameters to Prototype's $() determines whether it returns a single value or an array, as well as how many elements that returned array contains.

Prototype also lets you retrieve items using CSS selectors (and a variety of pseudo-selectors), using the $$() function. For example:

$$('tr.even')   // Prototype

returns an array (and always an array, even if it matches only a single object) of all of the tr tags with a class of even.

Well, jQuery works similarly, except that it has only a single function, $(). That function is smart enough to recognize what you want, based on a single CSS-style selector that you give it. (And yes, you may specify only a single selector.) However, id attributes need to begin with a # character, as is the case in CSS. Thus, you can say:

$('#foo')   // jQuery

to get all the tags (and there should be only one such tag) that have an id attribute of foo, and:

$('tr.even')  // jQuery

to get all the tr tags with a class of even. Each call to $() might return zero, one or a number of objects matching that selector. That is, if you were to say:

$('#blahblah') // jQuery