3. Introducing jQuery

Note: this page is not fully finished yet.

jQuery is a JavaScript framework or library, which means it provides a number of pre-defined functions you can make use of so that the code you write yourself can be extremely concise. A handy way to think of it is that jQuery is to JavaScript as Drupal is to PHP. But the extent to which jQuery makes it easy to select DOM elements is truly staggering. Indeed this is where it gets its name from - it allows you to very simply "query" the DOM for the set of elements you wish to manipulate using straight-forward css selector expressions. You can also use xPath expressions and there are even some custom expressions that round it out so that there is literally nothing on the page you can't target with a simple selector expression.
Here are some examples of jQuery selector expressions:

• CSS
  • 
$('a') // select all 'a' elements
  • 
$('#container') //select the element with the id 'container'
  • 
$('div.ajaxContainer') // select all elements with the class 'ajaxContainer'
  • 
$('li:first-child') // select all li elements that are the first child of their parent
• 
X-Path
  • $('a[title]') // select all 'a' elements that have a title attribute
  • 
$('a[href^="mailto:"]') // select all 'a' elements whose title attribute begins with 'mailto'
• 
Custom
  • 
$('li:eq(1)') // select the second 'li' element
  • 
$('tr:not([th]):odd') // select all odd 'tr' elements that don't contain a 'th' element

Other than selector expressions, jQuery provides you with two other broad categories of tools: commands (i.e. what you can do to your elements once you've selected them) and event handlers (a basis for when your commands should be effected). As mentioned in the previous section, events loosely correspond to user interaction of some sort, the most obvious being a mouse click. But the loading of your html page is also an event, and an extremely important one at that, as we shall see. As for commands, these fall into a few distinct categories, such as commands for DOM traversal, commands for manipulation of DOM elements, effects and AJAX commands. To familiarise yourself with the various commands available in jQuery and how to use them, there's no better place to go than the jQuery site itself.
Here's how you would achieve the exact same effect that was done in the plain JavaScript example using jQuery:

The one thing neither the plain old javascript version nor the jQuery version has dealt with is the issue of when this code should execute. Normally, when you write JavaScript code, you place the code either directly in the head of your html document, surrounded by script tags, or you place it in a separate file with a .js extension and link to it using a script tag in your head. JavaScript code gets executed by the browser in the order in which it is read by the browser. But the very DOM elements required won't even have loaded in the page yet by the time this code gets executed, so we need some way of ensuring that it doesn't get executed until the elements it acts upon are ready.

There's no easy cross-browser way of doing that and so normal JavaScript code uses "window.onload" as an event handler. This means the entire page has to load, including all images and other media, before the JavaScript code will run. This can slow things down quite a bit

But jQuery has a way of ensuring the code gets run as soon as just the DOM has loaded, i.e. just the html skeleton of the page, so it doesn't have to wait for large image and media files to load. Here's what it looks like:

For further guidance in the use of jQuery the best place to go is the jQuery website itself which has very good documentation. See the links in the API Reference section for specific topics.

When reading example code in the Tutorials section, it helps to try figuring out which parts of the code are JavaScript constructs, which are DOM specs implementations, and which are jQuery extensions.