Now that we have covered the range of features available to us with jQuery, we can examine how to put the library into action.
The official jQuery website (http://jquery.com/) is always the most up-to-date resource for code and news related to the library. To get started, we need a copy of jQuery, which can be downloaded right from the home page of the site. Several versions of jQuery may be available at any given moment; the most appropriate for us will be the latest uncompressed version of the library.
No installation is required. To use jQuery, we just need to place it on our site in a public location. Since JavaScript is an interpreted language, there is no compilation or build phase to worry about. Whenever we need a page to have jQuery available, we will simply refer to the file’s location from the HTML document.
There are three pieces to most examples of jQuery usage: the HTML document itself, CSS files to style it, and JavaScript files to act on it. For our first example, we’ll use a page with a book excerpt that has a number of classes applied to portions of it.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>Through the Looking-Glass</title>
<link rel="stylesheet" href="alice.css" type="text/css"
media="screen" />
<script src="jquery.js" type="text/javascript"></script>
<script src="alice.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<h1>Through the Looking-Glass</h1>
<div class="author">by Lewis Carroll</div>
<div class="chapter" id="chapter-1">
<h2 class="chapter-title">1. Looking-Glass House</h2>
<p>There was a book lying near Alice on the table, and while
she sat watching the White King (for she was still a
little anxious about him, and had the ink all ready to
throw over him, in case he fainted again), she turned over
the leaves, to find some part that she could read, <span
class="spoken">"—for it's all in some language I
don't know,"</span> she said to herself.</p>
<p>It was like this.</p>
<div class="poem">
<h3 class="poem-title">YKCOWREBBAJ</h3>
<div class="poem-stanza">
<div>sevot yhtils eht dna ,gillirb sawT'</div>
<div>;ebaw eht ni elbmig dna eryg diD</div>
<div>,sevogorob eht erew ysmim llA</div>
<div>.ebargtuo shtar emom eht dnA</div>
</div>
</div>
<p>She puzzled over this for some time, but at last a bright
thought struck her. <span class="spoken">"Why, it's a
Looking-glass book, of course! And if I hold it up to a
glass, the words will all go the right way again."</span></p>
<p>This was the poem that Alice read.</p>
<div class="poem">
<h3 class="poem-title">JABBERWOCKY</h3>
<div class="poem-stanza">
<div>'Twas brillig, and the slithy toves</div>
<div>Did gyre and gimble in the wabe;</div>
<div>All mimsy were the borogoves,</div>
<div>And the mome raths outgrabe.</div>
</div>
</div>
</div>
</div>
</body>
</html>Note
The actual layout of files on the server does not matter. References from one file to another just need to be adjusted to match the organization we choose. In most examples in this book, we will use relative paths to reference files (../images/foo.png) rather than absolute paths (/images/foo.png). This will allow the code to run locally without the need for a web server.
Immediately following the normal HTML preamble, the stylesheet is loaded. For this example, we’ll use a spartan one.
body {
font: 62.5% Arial, Verdana, sans-serif;
}
h1 {
font-size: 2.5em;
margin-bottom: 0;
}
h2 {
font-size: 1.3em;
margin-bottom: .5em;
}
h3 {
font-size: 1.1em;
margin-bottom: 0;
}
.poem {
margin: 0 2em;
}
.emphasized {
font-style: italic;
border: 1px solid #888;
padding: 0.5em;
}After the stylesheet is referenced, the JavaScript files are included. It is important that the script tag for the jQuery library be placed before the tag for our custom scripts; otherwise, the jQuery framework will not be available when our code attempts to reference it.
Note
Throughout the rest of this book, only the relevant portions of HTML and CSS files will be printed. The files in their entirety are available from the book’s companion website http://book.learningjquery.com or from the publisher’s website http://www.packtpub.com/support.
Now we have a page that looks like this:
 |
We will use jQuery to apply a new style to the poem text.
Our custom code will go in the second, currently empty, JavaScript file, which we included from the HTML using <script src="alice.js" type="text/javascript"></script>. For this example, we only need three lines of code:
$(document).ready(function() {
$('.poem-stanza').addClass('emphasized');
});
The fundamental operation in jQuery is selecting a part of the document. This is done with the $() construct. Typically, it takes a string as a parameter, which can contain any CSS selector expression. In this case, we wish to find all parts of the document that have the poem-stanza class applied to them; so the selector is very simple, but we will cover much more sophisticated options through the course of the book. We will step through the different ways of locating parts of a document in Chapter 2.
The $() function is actually a factory for the jQuery object, which is the basic building block we will be working with from now on. The jQuery object encapsulates zero or more DOM elements, and allows us to interact with them in many different ways. In this case, we wish to modify the appearance of these parts of the page, and we will accomplish this by changing the classes applied to the poem text.
The .addClass() method is fairly self-explanatory; it applies a CSS class to the part of the page that we have selected. Its only parameter is the name of the class to add. This method, and its counterpart, .removeClass(), will allow us to easily observe jQuery in action as we explore the different selector expressions available to us. For now, our example simply adds the emphasized class, which our stylesheet has defined as italicized text with a border.
Note that no iteration is necessary to add the class to all the poem stanzas. As we discussed, jQuery uses implicit iteration within methods such as .addClass(), so a single function call is all it takes to alter all of the selected parts of the document.
Taken together, $() and .addClass() are enough for us to accomplish our goal of changing the appearance of the poem text. However, if this line of code is inserted alone in the document header, it will have no effect. JavaScript code is generally run as soon as it is encountered in the browser, and at the time the header is being processed, no HTML is yet present to style. We need to delay the execution of the code until after the DOM is available for our use.
The traditional mechanism for controlling when JavaScript code is run is to call the code from within event handlers. Many handlers are available for user-initiated events, such as mouse clicks and key presses. If we did not have jQuery available for our use, we would need to rely on the onload handler, which fires after the page (along with all of its images) has been rendered. To trigger our code from the onload event, we would place the code inside a function:
function emphasizePoemStanzas() {
$('.poem-stanza').addClass('emphasized');
}
Then we would attach the function to the event by modifying the HTML <body> tag to reference it:
<body onload="emphasizePoemStanzas();">
This causes our code to run after the page is completely loaded.
There are drawbacks to this approach, though. We altered the HTML itself to effect this behavior change. This tight coupling of structure and function clutters the code, possibly requiring the same function calls to be repeated over many different pages, or in the case of other events such as mouse clicks, over every instance of an element on a page. Adding new behaviors would then require alterations in two different places, increasing the opportunity for error and complicating parallel workflows for designers and programmers.
To avoid this pitfall, jQuery allows us to schedule function calls for firing once the DOM is loaded—without waiting for images—with the $(document).ready() construct. With our function defined as above, we can write:
$(document).ready(emphasizePoemStanzas);
This technique does not require any HTML modifications. Instead, the behavior is attached entirely from within the JavaScript file. We will learn how to respond to other types of user actions, divorcing their effects from the HTML structure as well, in Chapter 3.
This incarnation is still slightly wasteful, though, because the function emphasizePoemStanzas() is defined only to be used immediately, and exactly once. This means that we have used an identifier in the global namespace of functions that we have to remember not to use again, and for little gain. JavaScript, like some other programming languages, has a way around this inefficiency called anonymous functions (sometimes also called lambda functions). We arrive back at the code as originally presented:
$(document).ready(function() {
$('.poem-stanza').addClass('emphasized');
});By using the function keyword without a function name, we define a function exactly where it is needed, and not before. This removes clutter and brings us back down to three lines of JavaScript. This idiom is extremely convenient in jQuery code, as many methods take a function as an argument and such functions are rarely reusable.
When this syntax is used to define an anonymous function within the body of another function, a closure can be created. This is an advanced and powerful concept, but should be understood when making extensive use of nested function definitions as it can have unintended consequences and ramifications on memory use. This topic is discussed fully in Appendix C.
