Here's a simple example of the impact jQuery can have on your code. To do something really simple and
common, such as attach a click event to every link in an area of a page, you'd
use plain JavaScript code and DOM scripting,
Listing 1. DOM scripting without jQuery var
external_links = document.getElementById('external_links');
var links =
external_links.getElementsByTagName('a');
for (var
i=0;i < links.length;i++) {
var link = links.item(i);
link.onclick = function() {
return confirm('You are going to
visit: ' + this.href);
};
}
|
Listing2. shows the same functionality achieved using jQuery.
Listing 2. DOM scripting with jQuery
$('#external_links
a').click(function() {
return confirm('You are going to visit: '
+ this.href);
});
|
Amazing, isn't it? With jQuery, you get right to the point, and express only what you want the code to
do without all the hassle. No need to loop over the elements; the click() function takes care of that. Also no need to make multiple DOM scripting calls: All that you need is a short string to
define the elements to work on.
It can be a bit tricky to understand how this code even gets the job done. First, you have the $() function—the most powerful function in jQuery. Mostly, you use this function to select elements from the document. In this example, the function is passed a string containing some Cascading Style Sheets (CSS) syntax, and jQuery finds the elements as efficiently as possible.
If you know the basics of CSS selectors, this syntax should look familiar.
In Listing2 #external_links looks for the element with an id of external_links. A
space followed by a tells jQuery to look for all the <a> elements inside the external_linkselement. That's a mouthful to say in English -- and even in DOM scripting -- but in CSS, it couldn't be simpler.
The $() function returns a jQuery object containing all the elements that match the CSS selector. A jQuery object is something like an array but comes with a ton of special jQuery functions. For example, you can assign a click handler function to each element in the jQuery object by calling the click function.
You can also pass an element or an array of elements to the $() function, and it will wrap a jQuery object around the elements.
You might want to use this functionality to employ jQuery functions on things like the window object. For example, you typically assign the function to the load event like this:
window.onload
= function() {
// do this stuff when the page is done
loading
};
|
Using jQuery, you write the same code like this:
$(window).load(function()
{
// run this when the whole page has been
downloaded
});
|
As you probably already know, waiting for the window to load is painfully slow, because the whole page
must finish loading, including all the images on the page. Sometimes, you want the images to finish loading first, but most of the time, you just need the Hypertext Markup Language (HTML) to be there. jQuery solves this problem by creating a special ready event on the document, used like this:
$(document).ready(function()
{
// do this stuff when the HTML is all
ready
});
|
This code creates a jQuery object around the document element, then sets up a function to call the instance when the HTML DOM document is ready. You can call this function as many times as necessary. And, in true jQuery style, a shortcut calls this function. Simply pass a function to the $() function:
$(function()
{
// run this when the HTML is done
downloading
});
|
So far, I've shown you three different ways to use the $() function. With a fourth way, you can create an element using a string. The result is a jQuery object containing that element. Listing3 shows an example that adds a paragraph to the page.
Listing 3. Creating and appending a simple
paragraph
$('<p></p>')
.html('Hey World!')
.css('background', 'yellow')
.appendTo("body");
|
As you might have noticed from the previous example, another powerful feature of jQuery is method chaining. Every time you call a method on a jQuery object, the method returns the same jQuery object. This means that if you need to call multiple methods on a jQuery object, you can do it without re-typing the selector:
$('#message').css('background',
'yellow').html('Hello!').show();
|
