jQuery in Action
10
CHAPTER 1
Introducing jQuery
This causes the zebra-striping code to execute after the document is fully loaded.
Unfortunately, the browser not only delays executing the
Unfortunately, the browser not only delays executing the
onload
code until after
the
DOM
tree is created but also waits until after all images and other external
resources are fully loaded and the page is displayed in the browser window. As a
result, visitors can experience a delay between the time that they first see the page
and the time that the
result, visitors can experience a delay between the time that they first see the page
and the time that the
onload
script is executed.
Even worse, if an image or other resource takes a significant time to load, visitors
would have to wait for the image loading to complete before the rich behaviors
become available. This could make the whole Unobtrusive JavaScript movement a
non-starter for many real-life cases.
become available. This could make the whole Unobtrusive JavaScript movement a
non-starter for many real-life cases.
A much better approach would be to wait only until the document structure is
fully parsed and the browser has converted the
HTML
into its
DOM
tree form
before executing the script to apply the rich behaviors. Accomplishing this in a
cross-browser manner is somewhat difficult, but jQuery provides a simple means
to trigger the execution of code once the
cross-browser manner is somewhat difficult, but jQuery provides a simple means
to trigger the execution of code once the
DOM
tree, but not external image
resources, has loaded. The formal syntax to define such code (using our striping
example) is as follows:
example) is as follows:
$(document).ready(function() {
$("table tr:nth-child(even)").addClass("even");
});
First, we wrap the document instance with the
jQuery()
function, and then we
apply the
ready()
method, passing a function to be executed when the document
is ready to be manipulated.
We called that the formal syntax for a reason; a shorthand form used much
more frequently is as follows:
$(function() {
$("table tr:nth-child(even)").addClass("even");
});
By passing a function to
$()
, we instruct the browser to wait until the
DOM
has
fully loaded (but only the
DOM
) before executing the code. Even better, we can
use this technique multiple times within the same
HTML
document, and the
browser will execute all of the functions we specify in the order that they are
declared within the page. In contrast, the window's
declared within the page. In contrast, the window's
onload
technique allows for
only a single function. This limitation can also result in hard-to-find bugs if any
third-party code we might be using already uses the
third-party code we might be using already uses the
onload
mechanism for its
own purpose (not a best-practice approach).
We've seen another use of the
$()
function; now let's see yet something else
that it can do for us.