TRAINING & REFERENCE

murachs

JavaScript
and jQuery
(Chapter 7)
Thanks for downloading this chapter from Murachs JavaScript and jQuery. We hope
it will show you how easy it is to learn from any Murach book, with its paired-pages
presentation, its how-to headings, its practical coding examples, and its clear, concise
style.
To view the full table of contents for this book, you can go to our web site. From there,
you can read more about this book, you can find out about any additional downloads that
are available, and you can review our other books on related topics.
Thanks for your interest in our books!

Mike Murach & Associates, Inc.

1-800-221-5528 (559) 440-9071 Fax: (559) 440-0963
murachbooks@murach.com www.murach.com
Copyright 2012 Mike Murach & Associates. All rights reserved.

What developers say about Murach books

Ive read a ton of books on JavaScript, and Murachs wonderful tome is
perhaps THE best modern title youll find on the topic. The book is intelligently
organized, and written in a concise fashion, with practical examples, delivered
with a friendly voice that makes what can often be convoluted or confusing
concepts easy to grasp.
Jason Salas, Developer and Broadcaster, KUAM/Guam

After reading several other PHP books, I still was not able to get my webpage
to work the way I wanted. After reading Murachs book, it works perfectly.
Harold E. Luse; posted at an online bookseller

If you want to get up to speed with CSS and HTML, this is a must-read in my
opinion. I really liked how it gave lots of examples and had exercises at the end
of each chapter.
Posted at an online bookseller

Teaching the #html class this week. The @MurachBooks book is such
awesome courseware.
@staticvoidmain

Murachs unique style of putting explanations on each left page and

corresponding examples on each right page is ingeniously simple yet
amazingly effective. The result is a very fast read.
Posted at an online bookseller on our PHP/MySQL book

Much of my career success has been due to my ability to make good on my

claims to programming expertise, just walking in the door. This was made
possible by your books. They are written in such a clear, concise, practical
manner that I was able to apply the knowledge immediately. Even when I was a
beginner, nobody suspected I was a beginner.
Scott E. Spurlock, Senior Software Developer, Atlanta, Georgia

Contents
Introduction

iii

Section 1 JavaScript essentials

Chapter 1
Chapter 2
Chapter 3
Chapter 4
Chapter 5
Chapter 6

Introduction to web development

Getting started with JavaScript
How to work with objects, functions, and events
How to test and debug a JavaScript application
How to work with arrays
How to script the DOM with JavaScript

3
49
91
119
141
157

Section 2 jQuery essentials

Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11

Getting off to a fast start with jQuery

How to use effects and animations
How to use the DOM manipulation and traversal methods
How to work with forms and data validation
How to create and use plugins

195
231
259
287
313

Section 3 jQuery UI essentials

Chapter 12
Chapter 13

Get off to a fast start with jQuery UI themes and widgets

How to use jQuery UI interactions and effects

343
379

Section 4 Ajax, JSON, and API essentials

Chapter 14
Chapter 15
Chapter 16

How to use Ajax, JSON, and Blogger

How to use the APIs for YouTube, Twitter, and Flickr
How to use the API for Google Maps

405
439
469

Section 5 jQuery Mobile essentials

Chapter 17
Chapter 18

Get off to a fast start with jQuery Mobile

How to enhance a jQuery Mobile web site

497
535

Reference Aids
Appendix A
Appendix B
Appendix C
Index

How to set up your computer for this book

A summary of the applications in this book
How to resolve $ conflicts

571
581
585
588

Section 2
jQuery essentials
Now that you have the JavaScript skills that you need for using jQuery,
youre ready to learn jQuery. So, in chapter 7, youll learn a working subset
of jQuery that will get you off to a fast start. And in chapter 8, youll learn
how to use the jQuery effects and animations that can bring a web page to
life.
Then, in chapter 9, youll learn how to use the DOM manipulation and
traversal methods for advanced DOM scripting. In chapter 10, youll learn
how to use the jQuery features for working with forms. And in chapter 11,
youll learn how to use the many jQuery plugins that can quickly improve
your productivity, and youll also learn how to create your own plugins.
When you complete this section, youll have all the jQuery skills that
you need for developing professional web pages. You can also go on to any
of the three sections that follow because they are written as independent
modules. If, for example, you want to learn how to use Ajax next, skip to
section 4.

7
Get off to a fast start
with jQuery
In this chapter, youll quickly see how jQuery makes JavaScript programming
easier. Then, youll learn a working subset of jQuery that will get you off to a
fast start. Along the way, youll study four complete applications that will show
you how to apply jQuery.

Introduction to jQuery........................................................196
What jQuery is..............................................................................................196
How to include jQuery in your web pages...................................................196
How jQuery can simplify JavaScript development......................................198
How jQuery can affect testing and debugging.............................................198
How jQuery UI and plugins can simplify JavaScript development............ 200

The basics of jQuery programming...................................202

How to code jQuery selectors...................................................................... 202
How to call jQuery methods........................................................................ 204
How to use jQuery event methods............................................................... 206

The Email List application in jQuery.................................208

The user interface and HTML..................................................................... 208
The jQuery....................................................................................................210

A working subset of selectors,

methods, and event methods.............................................212
The most useful selectors.............................................................................212
The most useful methods.............................................................................. 214
The most useful event methods....................................................................216
Other event methods that you should be aware of........................................ 218

Three illustrative applications...........................................220

The FAQs application in jQuery...................................................................220
The Image Swap application in jQuery........................................................222
The Image Rollover application in jQuery...................................................226

Perspective..........................................................................228

196

Section 2

jQuery essentials

Introduction to jQuery
In this introduction, youll learn what jQuery is, how to include it in your
applications, and how jQuery, jQuery UI, and plugins can simplify JavaScript
development.

What jQuery is
As figure 7-1 summarizes, jQuery is a free, open-source, JavaScript library
that provides dozens of methods for common web features that make JavaScript
programming easier. Beyond that, the jQuery functions are coded and tested for
cross-browser compatibility, so they will work in all browsers.
Those are two of the reasons why jQuery is used by more than half of the
10,000 most-visited web sites today. And thats why jQuery is commonly used by
professional web developers. In fact, you can think of jQuery as one of the four
technologies that every web developer should know how to use: HTML, CSS,
JavaScript, and jQuery. But dont forget that jQuery is actually JavaScript.

How to include jQuery in your web pages

If you go to the web site thats shown in this figure, youll find a download
button that lets you download the single file that contains the jQuery core library.
By default, the version thats downloaded is a compressed version that today
is around 32KB. As a result, this version loads quickly into browsers, which is
another reason why developers like jQuery.
The other version is uncompressed and currently about 247KB. If you download this version, you can study the JavaScript code thats used in the library. But
beware, this code is extremely complicated.
Once youve downloaded the compressed version of the core library, you can
include it in a web page by coding a script statement like the first one in this figure. Then, if you store the file on your own computer or a local web server, youll
be able to develop jQuery applications without being connected to the Internet.
For production applications, though, youll need to deploy the file to your Internet web server.
In this script statement, the file name includes the version number, but you
can use whatever file name you want. However, if the file name doesnt include
the version number, its easy to lose track of which version youre using.
The other way to include the jQuery library in your web applications and the
one we recommend is to get the file from a Content Delivery Network (CDN). A
CDN is a web server that hosts open-source software, and the Google, Microsoft,
and jQuery web sites are CDNs for getting the jQuery libraries. In the second
example in this figure, the script element uses the jQuery CDN with a URL that
gets the latest version of jQuery, and thats the way all of the applications in this
book include the jQuery library.
The benefit to using a CDN is that you dont have to download the jQuery
file. This works especially well with the jQuery CDN and the latest URL.
Then, you dont have to change the URL when a new release becomes available.
The disadvantage is that you have to be connected to the Internet to use a CDN.

Chapter 7

Get off to a fast start with jQuery

The jQuery web site at www.jQuery.com

What jQuery offers

Dozens of methods that make it easier to add JavaScript features to your web pages
Methods that are tested for cross-browser compatibility

How to include the jQuery file after youve downloaded it

to your computer
<script src="jquery-1.8.2.min.js"></script>

How to include the jQuery file from a Content Delivery Network (CDN)
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Description
jQuery is a free, open-source, JavaScript library that provides methods that make
JavaScript programming easier. Today, jQuery is used by more than 50% of the
10,000 most-visited web sites, and its popularity is growing rapidly.
The jQuery download comes in two versions. One version (min) is a compressed
version that is relatively small and loads fast. The other version is uncompressed so
you can use it to study the JavaScript code in the library.
If you include the jQuery file from a Content Delivery Network (CDN), you dont
have to provide it from your own server, but then you cant work offline.
The jQuery CDN now provides a link that will always deliver the latest version of
jQuery. Thats the way the script element is coded in all of the applications in this book.
If you download the jQuery file to your system, you can change the filename so its
simpler, but then you may lose track of what version youre using.
Figure 7-1

What jQuery is and how to include it in your applications

197

198

Section 2

jQuery essentials

How jQuery can simplify JavaScript development

To show you how jQuery can simplify JavaScript development, figure 7-2
shows both the JavaScript and the jQuery for the FAQs application that you
learned how to develop in chapter 6. If youre like most people who are learning JavaScript, you probably found the JavaScript code for this application both
complicated and confusing. Thats because it is.
In contrast, the jQuery code takes less than half as many lines of code.
Youll also find that it is much easier to understand once you learn how to use the
JQuery selectors, methods, and event methods. And youll start learning those
skills right after this introduction.
Incidentally, jQuery uses CSS selectors to select the HTML elements that the
methods should be applied to. For instance,
$("#faqs h2")

is a jQuery selector for the CSS selector

#faqs h2

which selects all of the h2 elements in the element with faqs as its id. In fact,
jQuery supports all of the CSS selectors including the CSS3 selectors, even in
browsers that dont support all of the CSS3 selectors. This is another reason why
developers like jQuery.

How jQuery can affect testing and debugging

When you use jQuery to develop applications, you can use the same testing
and debugging skills that you learned in chapter 4. Remember, though, that a call
to a jQuery method is a call to the jQuery file that you specify in a script element
in the head section of the HTML. In other words, when your code executes a
jQuery method, it is the JavaScript in the jQuery file that does the processing.
Then, if the jQuery code cant be executed, the display in Firebug or in the
error console of the browser will point to a statement in the jQuery file. This can
happen, for example, because a faulty parameter is passed to a jQuery method.
Unfortunately, the information in Firebug or the error console doesnt tell you
which statement in your code caused the problem. Instead, you have to use the
other debugging techniques to find the bug and fix it.
In most cases, though, Firebug and the error console of the browser do provide information that helps you find and fix the bug. So this is a minor problem
that is more than compensated for by the benefits that you get from using jQuery.

Chapter 7

Get off to a fast start with jQuery

The user interface for the FAQs application

The JavaScript for the application

var $ = function (id) {
return document.getElementById(id);
}
window.onload = function () {
var faqs = $("faqs");
var h2Elements = faqs.getElementsByTagName("h2");
var h2Node;
for (var i = 0; i < h2Elements.length; i++ ) {
h2Node = h2Elements[i];
// Attach event handler
h2Node.onclick = function () {
var h2 = this;
// h2 is the current h2Node object
if (h2.getAttribute("class") == "plus") {
h2.setAttribute("class", "minus");
}
else {
h2.setAttribute("class", "plus");
}
if (h2.nextElementSibling.getAttribute("class") == "closed") {
h2.nextElementSibling.setAttribute("class", "open");
}
else {
h2.nextElementSibling.setAttribute("class", "closed");
}
}
}
}

The jQuery for the application

$(document).ready(function() {
$("#faqs h2").toggle(
function() {
$(this).addClass("minus");
$(this).next().show();
},
function() {
$(this).removeClass("minus");
$(this).next().hide();
}
); // end toggle
}); // end ready

Figure 7-2

How jQuery can simplify JavaScript development

199

200

Section 2

jQuery essentials

How jQuery UI and plugins

can simplify JavaScript development
Besides the core jQuery library, jQuery provides the jQuery UI (User
Interface) library. The functions in this library use the core jQuery library to
build advanced features that can be created with just a few lines of code. These
features include themes, effects, widgets, and mouse interactions.
For instance, the browser display in figure 7-3 shows the FAQs application as
a jQuery UI widget known as an accordion. To implement this widget, you just
need the three lines of JavaScript code that are highlighted, and that also applies
the formatting thats shown.
To use jQuery UI, you include a jQuery UI library file in your web pages in
much the same way that you include the jQuery core library. You also include a
jQuery UI CSS file that provides the themes for jQuery UI. In section 3, youll
learn how to do that, and youll learn how to use the features of jQuery UI.
Because jQuery UI can make JavaScript development even easier than it
is when using jQuery, it makes sense to use jQuery UI whenever it provides an
effect, widget, or mouse interaction that you need. Keep in mind, though, that
jQuery UI is limited, so youll still need jQuery for most of your web applications. As a result, you should think of jQuery UI as an add-on that you should
learn how to use after you master jQuery.
Besides jQuery UI, the jQuery web site provides access to dozens of plugins
that have been developed for jQuery. These plugins provide higher-level functions like data validation and drop-down menus that require minimal coding for
their implementation. To facilitate the development of plugins, jQuery provides
specifications that help standardize the way that plugins are implemented.
Plugins are one more reason why developers like jQuery.
Like jQuery UI, plugins are libraries that make use of the core jQuery
library. In fact, you can think of jQuery UI as a plugin. To use a plugin, you use
a script element to include the plugin file in a web page, and you code that script
element after the script element for the jQuery core library. In chapter 11, youll
learn how to get the most from plugins, and youll also learn how to create your
own plugins.
In practice, it makes sense to look first for a plugin that implements a feature
that you want to add to a web page. If you can find one, you may be able to do
in a few hours what would otherwise take a few days. Next, if you cant find a
suitable plugin, it makes sense to see whether jQuery UI can facilitate the implementation of the feature. Finally, if neither a plugin nor jQuery UI can help you
implement a feature, you have to use jQuery to develop it. Thats why you need
to master all of the jQuery skills in this section.

Chapter 7

Get off to a fast start with jQuery

The FAQs application as a jQuery UI accordion

The HTML for a jQuery UI accordion

<div id="accordion">
<h3><a href="#">What is jQuery?</a></h3>
<div> <!-- panel contents --> </div>
<h3><a href="#">Why is jQuery becoming so popular?</a></h3>
<div> <!-- panel contents --> </div>
<h3><a href="#">Which is harder to learn: jQuery or JavaScript?></a></h3>
<div> <!-- panel contents --> </div>
</div>

The JavaScript code for the jQuery UI accordion

<script>
$(document).ready(function() {
$("#accordion").accordion();
});
</script>

Some typical plugin functions

Data validation
Slide shows
Carousels

Description
jQuery UI is a free, open-source, JavaScript library that provides higher-level
effects, widgets, and mouse interactions that can be customized by using themes. In
section 3, youll learn how to use jQuery UI.
A plugin is a JavaScript library that provides functions that work in conjunction
with jQuery to make it easier to add features to your web applications. In chapter
11, youll learn how to use some of the most useful plugins, and youll also learn
how to create your own plugins.
In general, if you can find a plugin or jQuery UI feature that does what you want it
to do, you should use it. Often, though, you wont be able to find what you want so
youll need to develop the feature with just the core jQuery library.
Figure 7-3

How jQuery UI and plugins can simplify JavaScript development

201

202

Section 2

jQuery essentials

The basics of jQuery programming

In the next three figures, youre going to learn the basics of jQuery programming. Then, youll study an application that uses these skills. That will show you
how jQuery simplifies JavaScript programming.

How to code jQuery selectors

When you use jQuery, you start by selecting the element or elements that you
want to apply a jQuery method to. To do that, you can use jQuery selectors as
shown in figure 7-4.
To code a jQuery selector, you start by coding the dollar sign ($) followed by
set of parentheses that contains a set of quotation marks. Then, within the quotation marks, you code the CSS selector for the element or elements that you want
to select. This is shown by the syntax summary at the top of this figure.
The HTML and the examples that follow show how easy it is to select one
or more elements with jQuery. For instance, the first selector in the first group
of examples selects all <p> elements within the entire document. The second
selector selects the element with faqs as its id. And the third selector selects all
elements with plus as the value of its class attribute.
In the second group of examples, you can see how other types of CSS selectors are coded with jQuery. Here, you can see how descendants, adjacent siblings, general siblings, and children are coded. For instance, the first selector gets
all <p> elements that are descendants of the element with faqs as its id. That
includes all of the <p> elements in the HTML in this figure.
In contrast, the second selector gets the div elements that are adjacent
siblings to the h2 elements, which includes all of the div elements. The third
selector gets all <p> elements that are siblings of ul elements, which selects the
one <p> element in the second div element. And the fourth selector gets all ul
elements that are children of div elements, which selects the ul element in the
second div element.
The third group of examples shows how to code multiple selectors. To do
that, you separate them with commas, just as you do with CSS.

Chapter 7

Get off to a fast start with jQuery

The syntax for a jQuery selector

$("selector")

The HTML for the elements that are selected by the examples
<section id="faqs">
<h1>jQuery FAQs</h1>
<h2 class="plus">What is jQuery?</h2>
<div>
<p>jQuery is a library of the JavaScript functions that you're most
likely to need as you develop web sites.
</p>
</div>
<h2 class="plus">Why is jQuery becoming so popular?</h2>
<div>
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions cross-browser compatible.</li>
</ul>
</div>
</section>

How to select elements by element, id, and class

By element type: All <p> elements in the entire document
$("p")

By id: The element with faqs as its id

$("#faqs")

By class: All elements with plus as a class

$(".plus")

How to select elements by relationship

Descendants: All <p> elements that are descendants of the section element
$("#faqs p");

Adjacent siblings: All div elements that are adjacent siblings of h2 elements
$("h2 + div")

General siblings: All <p> elements that are siblings of ul elements

$("ul ~ p")

Children: All ul elements that are children of div elements

$("div > ul")

How to code multiple selectors

$("#faqs li, div p")
$("p + ul, div ~ p")

Description
When you use jQuery, the dollar sign ($) is used to refer to the jQuery library.
Then, you can code selectors by using the CSS syntax within quotation marks
within parentheses.
Figure 7-4

How to code jQuery selectors

203

204

Section 2

jQuery essentials

How to call jQuery methods

Once youve selected the element or elements that you want to apply a
method to, you call the method using the syntax shown at the top of figure 7-5.
This is the same way that you call a method of any object. You code the selector
that gets the element or elements, the dot, the method name, and any parameters
within parentheses.
To get you started with jQuery, the table in this figure summarizes some
of the jQuery methods that youll use the most. For instance, the val method
without a parameter gets the value from a selected text box or other form control,
and the val method with a parameter sets the value in a selected text box or other
form control. The first two examples after the table show how this works.
Similarly, the text method without a parameter can be used to get the text
of a selected element, and the text method with a parameter can be used to set
the text of a selected element. Methods like these are often referred to as getter
and setter methods. Here, third example illustrates the setter version of the text
method, which sets the text of an element to Email address is required.
The fifth method in the table is the next method, which is used to get the
next (or adjacent) sibling of an element. This method is often followed by another
method. To do that, you use object chaining, which works just as it does with
JavaScript. This is illustrated by the fourth example. Here, the next method gets
the next sibling after the element that has been selected, and the text method sets
the text for that sibling.
The last two methods in the table are the submit and focus methods, which
are just like the JavaScript submit and focus methods. The submit method submits the data for a selected form to the server, and the focus method moves the
focus to the selected form control or link.
In a moment, youll see how these selectors and methods work in an application. But first, you need to learn how to set up the event handlers for an
application.

Chapter 7

Get off to a fast start with jQuery

The syntax for calling a jQuery method

$("selector").methodName(parameters)

Some common jQuery methods

Method Description
val()

Get the value of a text box or other form control.

val(value)

Set the value of a text box or other form control.

text()

Get the text of an element.

text(value)

Set the text of an element.

next([type])

Get the next sibling of an element or the next sibling of a specified type if the parameter is coded.

submit()

Submit the selected form.

focus()

Move the focus to the selected form control or link.

Examples
How to get the value from a text box
var gallons = $("#gallons").val();

How to set the value for an input element

$("#gallons").val("");

How to set the text in an element

$("#email_address_error").text("Email address is required");

How to set the text for the next sibling with object chaining
$("#last_name").next().text("Last name is required");

How to submit a form

$("#join_list").submit();

How to move the focus to a form control or link

$("#email_address").focus();

Description
To call a jQuery method, you code a selector, the dot operator, the method name,
and any parameters within parentheses. Then, that method is applied to the element
or elements that are selected by the selector.
When you use object chaining with jQuery, you code one method after the other.
This works because each method returns the appropriate object.
If the selector for a method selects more than one element, jQuery applies the
method to all of the elements so you dont have to code a loop to do that.

Figure 7-5

How to call jQuery methods

205

206

Section 2

jQuery essentials

How to use jQuery event methods

When you use jQuery, you use event methods to attach event handlers to
events. To do that, you use the syntax shown at the top of figure 7-6. First, you
code the selector for the element that will initiate the event like a button that
will be clicked. Then, you code the name of the event method that represents
the event that you want to use. Last, you code a function that will be the event
handler for the event within parentheses.
In the table in this figure, the two event methods that youll use the most are
summarized. The ready event is the jQuery alternative to the JavaScript load
event, except that it works better. Unlike the load event, the ready event is triggered as soon as the DOM is built, even if other elements like images are still
being loaded into the browser. This means that the user can start using the web
page faster.
Because the DOM usually has to be built before you can use JavaScript or
jQuery, youll probably use the ready event method in every JavaScript application that you develop. The examples in this figure show two ways to do that. In
the long form, you use document as the selector for the web page followed by the
dot, the method name (ready), and the function for the event handler.
In the short form, you can omit the selector and event method name and just
code the function in parentheses after the dollar sign. Although this form is often
used by professional developers, all of the examples in this book use the long
form. That way, its clear where the ready event handler starts.
The next example in this figure shows an event handler for the click event
of all h2 elements. This is coded just like the event handler for the ready event
except h2 is used as the selector and click is used as the name of the event
method.
The last example in this figure shows how you code an event handler within
the ready event handler. Note here that the closing brace, parenthesis, and semicolon for each event handler is critical. As you can guess, its easy to omit one
of these marks or get them out of sequence so this is a frequent source of errors.
Thats why professional programmers often code inline comments after the ending marks for each event handler to identify which event handler the marks are
for.

Chapter 7

Get off to a fast start with jQuery

The syntax for a jQuery event method

$(selector).eventMethodName(function() {
// the statements of the event handler
});

Two common jQuery event methods

Event method

Description

ready(handler)

The event handler runs when the DOM is ready.

click(handler)

The event handler runs when the selected element is clicked.

Two ways to code an event handler for the jQuery ready event
The long way
$(document).ready(function() {
alert("The DOM is ready");
});

The short way

$(function(){
// (document).ready is assumed
alert("The DOM is ready");
});

An event handler for the click event of all h2 elements

$("h2").click(function() {
alert("This heading has been clicked");
});

The click event handler within the ready event handler

$(document).ready(function() {
$("h2").click(function() {
alert("This heading has been clicked");
}); // end of click event handler
}); // end of ready event handler

Description
To code a jQuery event handler, you code a selector, the dot operator, the name of
the jQuery event method, and an anonymous function that handles the event within
parentheses.
The event handler for the ready event will run any methods that it contains as soon
as the DOM is ready, even if the browser is loading images and other content for the
page. This works better than the JavaScript onload event, which doesnt occur until
all of the content for the page is loaded.
In this book, the ready event is always coded the long way thats shown above. In
practice, though, many programmers use the short way.
When coding one event handler within another, the use of the closing braces, parentheses, and semicolons is critical. To help get this right, many programmers code
inline comments after these punctuation marks to identify the ends of the handlers.
Figure 7-6

How to use jQuery event methods

207

208

Section 2

jQuery essentials

The Email List application in jQuery

With that as background, youre ready to see how jQuery can be used in the
Email List application that you studied in section 1. That will show you how
jQuery can simplify coding.

The user interface and HTML

To refresh your memory, figure 7-7 presents the user interface and HTML
for the Email List application. To use the application, the user enters text into the
first three text boxes and clicks on the Join our List button. Then, the JavaScript
validates the entries and displays appropriate error messages if errors are found.
If no errors are found, the data in the form is submitted to the web server for
processing.
In the HTML, note first the script element that loads jQuery. It is followed by
the script element that identifies the file that holds the JavaScript for this application. That sequence is essential because the JavaScript file is going to use the
jQuery file.
Also note that the span elements are adjacent siblings to the input elements
for the text boxes. The starting text for each of these span elements is an asterisk
that indicates that the text box entry is required. Later, if the JavaScript finds
errors in the entries, it displays error messages in these span elements.

Chapter 7

Get off to a fast start with jQuery

The user interface for the Email List application

The HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Join Email List</title>
<link rel="stylesheet" href="email_list.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="email_list.js"></script>
</head>
<body>
<section>
<h1>Please join our email list</h1>
<form id="email_form" name="email_form"
action="join.html" method="get">
<label for="email_address1">Email Address:</label>
<input type="text" id="email_address1">
<span>*</span><br>
<label for="email_address2">Re-enter Email Address:</label>
<input type="text" id="email_address2">
<span>*</span><br>
<label for="first_name">First Name:</label>
<input type="text" id="first_name">
<span>*</span><br>
<label>&nbsp;</label>
<input type="button" id="join_list" value="Join our List">
</form>
</section>
</body>
</html>

Figure 7-7

The user interface and HTML for the Email List application

209

210

Section 2

jQuery essentials

The jQuery
Figure 7-8 presents the jQuery for this application. This is the code in the
email_list.js file thats included by the HTML. Here, all of the jQuery is highlighted. The rest of the code is JavaScript code.
To start, you can see that an event handler for the click event of the Join our
List button is coded within the event handler for the ready event. Then, if you
look at the last three lines of code, you can see the ending punctuation marks
for these handlers. Within the click event handler, the first two statements show
how jQuery selectors and the val method can be used to get the values from text
boxes.
In the first if statement, you can see how an error message is displayed if the
user doesnt enter an email address in the first text box. Here, the next method
gets the adjacent sibling for the text box, which is the span element, and then the
text method puts an error message in that span element. This changes the DOM,
and as soon as it is changed, the error message is displayed in the browser.
The next, text, and val methods are used in similar ways in the next two if
statements. Then, the fourth if statement tests to see whether the isValid variable
is still true. If it is, the submit method of the form is issued, which sends the data
to the web server.
That ends the event handler for the click event of the Join our List button.
But that handler is followed by one more statement. It moves the focus to the first
text box, the one with email_address1 as its id.
As you review this code, note that it doesnt require the standard $ function
that gets an element object when the elements id is passed to it. Instead, the $
sign is used to start a jQuery selector that gets elements by their ids. This simplifies the coding.
Although this jQuery code illustrates how jQuery can simplify a data validation application, it doesnt begin to show the power of jQuery. For that, you need
to learn more selectors, methods, and event methods, and then see how they can
be used in other types of applications. Youll do that next.

Chapter 7

Get off to a fast start with jQuery

The jQuery for the Email List application (email_list.js)

$(document).ready(function() {
$("#join_list").click(function() {
var emailAddress1 = $("#email_address1").val();
var emailAddress2 = $("#email_address2").val();
var isValid = true;
// validate the first email address
if (emailAddress1 == "") {
$("#email_address1").next().text("This field is required.");
isValid = false;
} else {
$("#email_address1").next().text("");
}
// validate the second email address
if (emailAddress2 == "") {
$("#email_address2").next().text("This field is required.");
isValid = false;
} else if (emailAddress1 != emailAddress2) {
$("#email_address2").next().text(
"This entry must equal first entry.");
isValid = false;
} else {
$("#email_address2").next().text("");
}
// validate the first name entry
if ($("#first_name").val() == "") {
$("#first_name").next().text("This field is required.");
isValid = false;
}
else {
$("#first_name").next().text("");
}
// submit the form if all entries are valid
if (isValid) {
$("#email_form").submit();
}
}); // end click
$("#email_address1").focus();
}); // end ready

Figure 7-8

The jQuery for the Email List application

211

212

Section 2

jQuery essentials

A working subset of selectors,

methods, and event methods
The next three figures present a working subset of the most useful jQuery
selectors, methods, and event methods. This is a lot to take in, but once you
understand them, youll be able to write practical jQuery applications of your
own.

The most useful selectors

In figure 7-4, you were introduced to the basic selectors that you can use
with jQuery. Now, figure 7-9 presents the other selectors that youre most likely
to use in your jQuery applications. The only selectors of significance that are
missing are ones that youll learn about in later chapters, like the animate selector that you use with animations and the form control selectors that you use with
forms.
If this summary seems daunting, just read the list and realize that these
selectors let you select just about any element that you need to select. Then, make
sure that you understand the examples in this figure. Later, when you need to
make a specific type of selection for an application, you can refer back to this
summary and to figure 7-4.
To illustrate the use of these selectors, the first example shows a selector
that gets the li elements that are the first children of their parent elements. If the
HTML contains more than one list, this selects the first li element of each list.
The second example shows how to get the even tr (row) elements in an HTML
table.
The third example shows how to use the :eq selector to get a specific element
within an array of elements. If, for example, there are four <p> elements that
are descendants of the faqs element, :eq(2) will return the third <p> element
because the index values start with zero.
The last example shows a selector that gets all input elements with type
attributes that have text as the value. In other words, this selector gets all text
boxes. Note, however, that you can also get the text boxes by using this selector:
$("input[type=text]")

This just shows that you can often select the elements that you want in more than
one way.

Chapter 7

Get off to a fast start with jQuery

A summary of the most useful jQuery selectors

Selector Selects
[attribute]

All elements with the named attribute.

[attribute=value]

All elements with the named attribute and value.

:contains(text)

All elements that contain the specified text.

:empty

All elements with no children including text nodes.

:eq(n)

The element at index n within the selected set.

:even

All elements with an even index within the selected set.

:first

The first element within the set.

:first-child

All elements that are first children of their parent elements.

:gt(n)

All elements within the selected set that have an index greater than n.

:has(selector)

All elements that contain the element specified by the selector.

:header

All elements that are headers (h1, h2, ...).

:hidden

All elements that are hidden.

:last

The last element within the selected set.

:last-child

All elements that are the last children of their parent elements.

:lt(n)

All elements within the selected set that have an index less than n.

:not(selector)

All elements that arent selected by the selector.

:nth-child

All elements that are the nth children of their parent elements.

:odd

All elements with an odd index within the selected set.

:only-child

All elements that are the only children of their parent elements.

:parent

All elements that are parents of other elements, including text nodes.

:text

All input elements with the type attribute set to text.

:visible

All elements that are visible.

Examples
How to select the li elements that are the first child of their parent element
$("li:first-child")

How to select the even tr elements of a table

$("table > tr:even")

// numbering starts at 0, so first tag is even

How to select the third descendant <p> element of an element

$("#faqs p:eq(2)")

// numbering starts at 0

How to select all input elements with text as the type attribute
$(":text")

Description
Figure 7-4 and the table above summarize the selectors that you are most likely to need.
Not included are six attribute selectors that let you select attributes with attribute
values that contain specific substrings.
In chapter 8, youll learn about a selector thats used with animation, and in chapter
10, youll learn about other selectors that are used for form controls.
Figure 7-9

The most useful selectors

213

214

Section 2

jQuery essentials

The most useful methods

The table in figure 7-10 represents a collection of methods that are taken
from several jQuery categories. For instance, the prev and next methods are
DOM traversal methods. The attr, css, addClass, removeClass, and toggleClass
methods are DOM manipulation methods. The hide and show methods are effect
methods. And the each method is a miscellaneous method.
These are some of the most useful jQuery methods, and they will get you off
to a fast start with jQuery. Then, youll add methods to your repertoire as you
read the rest of the chapters in this section. For instance, youll learn how to use
the other effect methods in chapter 8, and youll learn how to use the other DOM
transversal and manipulation methods in chapter 9.
Here again, if this table seems daunting, just read through these methods
to see whats available. Then, study the examples to see how they can be used.
Later, when you need a specific method for an application, you can refer back to
this summary.
In the first example, the attr method is used to get the src attribute of an
element with image as its id. The second example uses the attr method to add
a src attribute to the selected element with the value thats stored in the variable
named imageSource. If the element already has an src attribute, this method
changes its value. The third example uses the css method to change the color
property of the selected elements to blue.
In the fourth example, the addClass method is used to add a class to all of
the h2 elements within the element that has faqs as its id. Thats similar to
what youve done using JavaScript.
In the last example, the each method is used to perform a function for
each element in an array. In this case, the array contains all of the <a> elements within the element with image_list as its id, and the each method loops
through these elements. As you will see, this simplifies the handling of the elements in the array.

Chapter 7

Get off to a fast start with jQuery

A summary of the most useful jQuery methods

Method Description
next([selector])

Get the next sibling of an element or the first sibling of a

specified type if the parameter is coded.

prev([selector])

Get the previous sibling of an element or the previous sibling

of a specified type if the parameter is coded.

attr(attributeName)

Get the value of the specified attribute.

attr(attributeName, value)

Set the value of the specified attribute.

css(propertyName)

Get the value of the specified property.

css(propertyName, value)

Set the value of the specified property.

addClass(className)

Add one or more classes to an element and, if necessary, create the class. If you use more than one class as the parameter,
separate them with spaces.

removeClass([className])

Remove one or more classes. If you use more than one class
as the parameter, separate them with spaces.

toggleClass(className)

If the class is present, remove it. Otherwise, add it.

hide([duration])

Hide the selected element. The duration parameter can be

slow, fast, or a number giving the time in milliseconds.
By default, the duration is 400 milliseconds, slow is 600
milliseconds, and fast is 200 milliseconds.

show([duration])

Show the selected element. The duration parameter is the

same as for the hide method.

each(function)

Run the function for each element in an array.

Get the value of the src attribute of an image

$("#image").attr("src");

Set the value of the src attribute of an image to the value of a variable
$("#image").attr("src", imageSource);

Set the value of the color property of the h2 elements to blue

$("h2").css("color", "blue");

Add a class to the h2 descendants of the faqs element

$("#faqs h2").addClass("minus");

Run a function for each <a> element within an image_list element

$("#image_list a").each(function() {
// the statements of the function
});

Description
The table above presents a powerful set of jQuery methods. This table adds to the
methods that were presented in figure 7-5.
In the chapters that follow, youll learn how to use other methods, including those
for effects (chapter 8), DOM scripting and traversal (chapter 9), forms (chapter 10),
and Ajax and JSON (chapter 14).
Figure 7-10

The most useful methods

215

216

Section 2

jQuery essentials

The most useful event methods

Figure 7-11 summarizes the most useful event methods, and this summary
includes the ready and click methods that were introduced in figure 7-6. As you
can see, most of these event methods provide for a single event handler that runs
when the event occurs. Those event methods work like the ready and click methods, but with different events.
This is illustrated by the first example, which works just like the click event
method, except that it handles the double-click event. Of note here is the use of
the this keyword within the handler. Here, it is coded as a jQuery selector, and it
refers to the text box that has been double-clicked. This is similar to the way the
this keyword works with JavaScript. Note that it isnt enclosed within quotation
marks, even though its a selector. What this function does is use the val method
to set the value of the double-clicked text box to an empty string.
In contrast, the toggle and hover event methods provide for two event handlers. For the toggle event method, the first event handler runs the first time the
element is clicked and every other time thereafter. This is referred to as the even
event handler, because the counting starts with zero. In contrast, the second event
handler is referred to as the odd event handler, because it runs on odd clicks of
the element, counting from zero. The result is that this event method lets you
alternate event handlers each time the element is clicked. This makes it much
easier to develop an application that requires this functionality.
Similarly, the hover event method provides one event handler for when the
mouse pointer moves into an element and another handler for when the mouse
pointer moves out of an element. This is illustrated by the second example in this
figure. Note here that the first function is the first parameter of the hover method,
and it is followed by a comma. Then, the second function is the second parameter of the hover method. To end the parameters, the last line of code consists of
a right parenthesis followed by a semicolon.
This is typical of jQuery coding, which often requires the use of one or more
functions within another function. Thats why you need to code the functions in
a way that helps you keep the punctuation straight. It also helps to code inline
comments that mark the ends of functions and methods.
In these examples, note that when a selector gets more than one element, the
event method sets up the event handler for each of the selected elements. This
makes it much easier to set up event handlers with jQuery than it is with
JavaScript.

Chapter 7

Get off to a fast start with jQuery

A summary of the most useful jQuery event methods

Event method

Description

ready(handler)

The handler runs when the DOM is ready.

unload(handler)

The handler runs when the user closes the browser

window.

error(handler)

The handler runs when a JavaScript error occurs.

click(handler)

The handler runs when the selected element is clicked.

toggle(handlerEven, handlerOdd)

The first handler runs on even clicks of the element,

starting with 0. The second handler runs on odd clicks
of the element.

dblclick(handler)

The handler runs when the selected element is doubleclicked.

mouseenter(handler)

The handler runs when the mouse pointer enters the

selected element.

mouseover(handler)

The handler runs when the mouse pointer moves over

the selected element.

mouseout(handler)

The handler runs when the mouse pointer moves out

of the selected element.

hover(handlerIn, handlerOut)

The first event handler runs when the mouse pointer

moves into an element. The second event handler runs
when the mouse pointer moves out.

A handler for the double-click event of all text boxes

that clears the clicked box
$(":text").dblclick(function () {
$(this).val("");
}

A handler for the hover event of each img element within a list
$("#image_list img").hover(
function() {
alert("The mouse pointer has moved into an img element");
},
function() {
alert("The mouse pointer has moved out of an img element);
}
); // end hover

Description
The table above presents the event methods that youll use the most. Not included
are: keydown, keypress, keyup, mousedown, mouseup, mouseleave, and
mousemove.

Figure 7-11

The most useful event methods

217

218

Section 2

jQuery essentials

Other event methods that you should be aware of

For most applications, youll use the event methods that have already been
presented. Youll also code the function or functions for the event handlers as the
parameters of the event methods.
Sometimes, though, youll want to attach event handlers in other ways,
remove an event handler, or trigger an event that starts an event handler. Then,
you can use the methods that are presented in the table in figure 7-12.
When you use the first two methods in this table, you usually store the function for the event handler in a variable, as illustrated by the first example after
the table. Then, you can use the name of the variable as the second parameter of
the event method.
To illustrate, the second example shows how to use the bind method to attach
an event handler to the click event of an element with clear as its id. Note,
however, that the bind method is also used when you use the shortcut method to
attach an event handler to an event. Its just done behind the scene so you may
not be aware of it.
One of the benefits of storing an event handler in a variable is that you can
attach the handler to more than one event. Thats illustrated by the third example.
There, two statements are used to apply the clearClick event handler to the click
event of a button with clear as its id as well as the dblclick event of all text
boxes.
For some applications, you may want to remove an event handler when some
condition occurs. To do that, you can use the unbind method, as illustrated by the
fourth example in this figure.
Or, if you want to remove an event handler after it runs just one time, you
can use the one event method. This is illustrated by the fifth example.
If you want to initiate an event from your jQuery code, you can use the
trigger method in either the long or short form, as illustrated by the sixth set of
examples. Both of those examples trigger the click event of the element with
clear as its id, which in turn causes the clearClick event handler to be run.
That provides another way to run the same event handler for two different
events. All you have to do is trigger the event for one event handler from another
event handler. Thats illustrated by the last example in this figure. There, the
event handler for the double-click event of all text boxes triggers the click event
of the element with clear as its id, and that starts the clearClick event handler.

Chapter 7

Get off to a fast start with jQuery

Other event methods that you should be aware of

Event method

Description

bind(event, handler)

Attach an event handler to an event.

unbind(event, handler)

Remove an event handler from an event.

one(event, handler)

Attach an event handler and remove it after it runs one time.

trigger(event)

Trigger the event for the selected element.

How to store an event handler in a variable

var clearClick = function () {
// the statements for the event handler
}

How to attach an event handler to an event

With the bind method
$("#clear").bind(click, clearClick);

With the shortcut method

$("#clear").click(clearClick);

How to attach an event handler to two different events

$("#clear").click(clearClick);
$(":text").dblclick(clearClick);

How to remove an event handler from an event

$("#clear").unbind("click", clearClick);

How to attach and remove an event handler so it runs only once

$("#clear").one("click", confirmClick);

How to trigger an event

With the trigger method
$("#clear").trigger("click");

With the shortcut method

$("#clear").click();

How to use the shortcut method to trigger an event from an event handler
$(":text").dblclick(function () {
$("#clear").click();
// triggers the click event of the clear button
}

Description
When you store an event handler in a variable, you can use the bind method to
attach it to more than one event.
When you use the shortcut method to attach an event handler to an event, youre
actually using the bind method.
The submit and focus methods are actually event methods. When you use the shortcut method to trigger them, they trigger the submit and focus events.
Figure 7-12

Other event methods that you should be aware of

219

220

Section 2

jQuery essentials

Three illustrative applications

Now, to help you see how the selectors, methods, and event methods work in
actual applications, this chapter presents three typical JavaScript applications.

The FAQs application in jQuery

Figure 7-13 presents the FAQs application that you studied in chapter 6, but
this time it uses jQuery. When this applications starts, the div elements after
the h2 elements are hidden by the CSS, and the h2 elements are preceded by a
plus sign. Then, if the user clicks on an h2 element, the div element below it is
displayed and the plus sign is changed to a minus sign. And if the user clicks on
the heading again, the process is reversed.
This is a typical jQuery application, and its the type of application that the
toggle event method was designed for. As a result, the jQuery code for this application consists of a toggle event method thats within the ready method. This
toggle event method sets up the event handlers for every h2 element within the
section that has faqs as its id:
$("#faqs h2").toggle

Remember that the parameters for the toggle event method are two functions, separated by a comma. So thats whats coded within the parentheses for
this method. In both of these functions, the this keyword is used, and it refers to
the current h2 element because thats the object of the toggle method.
In the first function (parameter) for this method, the first statement uses the
addClass method to add a class attribute to the h2 element with minus as the
value. The CSS for this application (not shown) uses this class to change the
background image for the element from a plus sign to a minus sign. Then, the
second statement chains the next and show methods to display the hidden div
element that is an adjacent sibling to the h2 element.
The second function for this method works the same way, but in reverse.
There, the first statement uses the removeClass method to remove the minus
class that was added the first time the heading was clicked. The second statement
uses the next and hide methods to hide the adjacent div element.
This application begins to show the power of jQuery. Here, it takes just 12
lines of code to set up the event handlers for alternating clicks of as many h2 elements as there are in the faqs section.
If you compare this code with the JavaScript code for this application in
figure 7-2, you can get a better idea of how much this simplifies this application.
In fact, since JavaScript doesnt provide for show and hide methods, the
JavaScript has to use a class and CSS to hide and close the div elements.

Chapter 7

Get off to a fast start with jQuery

The FAQs application in a browser

The HTML
<section id="faqs">
<h1>jQuery FAQs</h1>
<h2>What is jQuery?</h2>
<div>
<p>jQuery is a library of the JavaScript functions that you're most
likely to need as you develop web sites.
</p>
</div>
<h2>Why is jQuery becoming so popular?</h2>
<div>
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions are cross-browser compatible.</li>
</ul>
</div>
<h2>Which is harder to learn: jQuery or JavaScript?</h2>
<div>
<p>For most functions, jQuery is significantly easier to learn and
use than JavaScript. But remember: jQuery is JavaScript.
</p>
</div>
</section>

The jQuery
$(document).ready(function() {
$("#faqs h2").toggle(
function() {
$(this).addClass("minus");
$(this).next().show();
},
function() {
$(this).removeClass("minus");
$(this).next().hide();
}
); // end toggle
}); // end ready

Figure 7-13

The FAQs application in jQuery

221

222

Section 2

jQuery essentials

The Image Swap application in jQuery

Figure 7-14 presents another application that shows the power of jQuery. It is
the Image Swap application that you studied in chapter 6. In short, when the user
clicks on one of the thumbnail images at the top of the browser window, the caption and image below the thumbnails are changed.
In the HTML for this application, img elements are used to display the six
thumbnail images. However, these elements are coded within <a> elements so
the images are clickable and they can receive the focus. In the <a> elements, the
href attributes identify the images to be swapped when the links are clicked, and
the title attributes provide the text for the related captions. In this case, both the
<a> elements and the img elements are coded within a ul element.
After the ul element, you can see the h2 element for the caption and the img
element for the main image on the page. The ids of these elements are highlighted because the jQuery will use those ids as it swaps captions and images
into them.
For the motor-impaired, this HTML provides accessibility by coding the img
elements for the thumbnails within <a> elements. That way, the user can access
the thumbnail links by clicking on the Tab key, and the user can swap the image
by pressing the Enter key when a thumbnail has the focus, which starts the click
event.
Of note in the CSS for this page is the rule set for the li elements. Their
display properties are set to inline so the images go from left to right instead of
from top to bottom. Also, the padding on the right of each item is set to 10 pixels
to provide space between the images.

Chapter 7

Get off to a fast start with jQuery

The user interface for the Image Swap application

The HTML
<section>
<h1>Ram Tap Combined Test</h1>
<ul id="image_list">
<li><a href="images/h1.jpg" title="James Allison:
<img src="thumbnails/t1.jpg" alt=""></a></li>
<li><a href="images/h2.jpg" title="James Allison:
<img src="thumbnails/t2.jpg" alt=""></a></li>
<li><a href="images/h3.jpg" title="James Allison:
<img src="thumbnails/t3.jpg" alt=""></a></li>
<li><a href="images/h4.jpg" title="James Allison:
<img src="thumbnails/t4.jpg" alt=""></a></li>
<li><a href="images/h5.jpg" title="James Allison:
<img src="thumbnails/t5.jpg" alt=""></a></li>
<li><a href="images/h6.jpg" title="James Allison:
<img src="thumbnails/t6.jpg" alt=""></a></li>
</ul>
<h2 id="caption">James Allison 1-1</h2>
<p><img src="images/h1.jpg" alt="" id="image"></p>
</section>

1-1">
1-2">
1-3">
1-4">
1-5">
1-6">

The CSS for the li elements

li {
padding-right: 10px;
display: inline;
}

Figure 7-14

The user interface, HTML, and CSS for the Image Swap application

223

224

Section 2

jQuery essentials

Figure 7-15 presents the JavaScript and jQuery for this application. Within
the ready event handler, the each method is used to run a function for each <a>
element in the unordered list. This function preloads the images that will be
swapped so they are in the browser when the user starts using the application. If
an application uses many images, this can make the application run faster.
Within the function for each <a> element, the first statement creates a new
Image object. Then, the second statement uses the this keyword and the attr
method to set the src attribute of the Image object to the value of the href attribute in the <a> element. As soon as thats done, the image is loaded into the
browser.
The each method is followed by a click event method that sets up the event
handlers for the click events of the <a> elements that contain the thumbnail
images. Note here that evt is coded as the parameter for the click event method,
which receives the event object when the event occurs. This object will be used
later to cancel the default action of each link.
The first two statements in this event handler swap the image in the main
portion of the browser window. The first statement uses the this keyword and attr
method to get the value of the href attribute of the <a> element. This value gives
the location of the image to be swapped. Then, the second statement sets the src
attribute of the main img element to this value. As soon as thats done, the image
is swapped in the browser.
The next two statements work similarly. They swap the caption of the image
in the main portion of the browser window. This time, the caption is taken from
the title attribute of the <a> element.
The last statement in the click event handler uses the preventDefault method
of the evt object that is passed to the event handler to cancel the default action of
the link. This is a jQuery method that is cross-browser compatible, which simplifies the JavaScript code. It is executed in place of the preventDefault method of
the browser when you include the jQuery library. If the default isnt cancelled,
clicking on the link will display the image thats referred to by the href attribute
in a new window or tab, and that isnt what you want.
After the click event handler, the last statement in the ready method moves
the focus to the first thumbnail image. That will make it easier for the users to
tab to the thumbnails that they want to swap. To identify the first <a> element in
the thumbnails, the :first-child selector is used twice: first to get the first li element of the unordered list, then to get the first <a> element of the li element.

Chapter 7

Get off to a fast start with jQuery

The JavaScript
$(document).ready(function() {
// preload images
$("#image_list a").each(function() {
var swappedImage = new Image();
swappedImage.src = $(this).attr("href");
});
// set up event handlers for links
$("#image_list a").click(function(evt) {
// swap image
var imageURL = $(this).attr("href");
$("#image").attr("src", imageURL);
//swap caption
var caption = $(this).attr("title");
$("#caption").text(caption);
// cancel the default action of the link
evt.preventDefault(); // jQuery cross-browser method
}); // end click
// move focus to first thumbnail
$("li:first-child a:first-child").focus();
}); // end ready

Description
When you attach an event handler to a link, you often need to cancel the default
action of the link, which is to open the page or image thats identified by its href
attribute.
To cancel the default action of a link, you can use the jQuery preventDefault
method of the event object that is passed to the event handler. The jQuery version of
this method is cross-browser compatible.
To get the event object thats passed to a method, you need to code a parameter for
the event handler function. You can use whatever name you want for this parameter,
like evt or event. Then, you must use that name whenever you refer to the event
object.
When you use jQuery to work with images that arent included in the HTML,
preloading the images can improve the performance of the application because the
user doesnt have to wait for a new image to be loaded into the browser.
To preload an image, you create a new Image object and assign the URL for the
image to the Image objects src attribute. As soon as thats done, the image is
loaded into the browser.

Figure 7-15

The JavaScript for the Image Swap application

225

226

Section 2

jQuery essentials

The Image Rollover application in jQuery

Figure 7-16 presents another application that shows the power of jQuery. In
short, when the user hovers the mouse pointer over one of the starting images, it
is replaced by another image. And when the user moves the mouse pointer out of
the image, the original image is again displayed.
In the HTML for this application, img elements are coded within the li elements of an unordered list. In these img elements, the src attribute identifies the
image that is displayed when the application is loaded into the browser, and the
id attribute identifies the image that should be displayed when the mouse hovers
over the img element.
In the JavaScript for this application, the hover event method is used to set
up the event handlers. But note that this event method is coded within an each
method that performs a function for each occurrence of an img element within
the ul element that has image_rollovers as its id:
$("#image_rollovers img").each

The function for the each method starts by using the this keyword and
the attr method to get the values of the src and id attributes of each image and
storing them in variables named oldURL and newURL. Remember that these
attributes hold the values that locate each starting image and its rollover image.
If you look at the HTML, you can see that these images are jpg files that are
stored in an images folder. For instance, the rollover image specified by the first
id attribute is:
images/h4.jpg

The next two statements preload the rollover images by creating a new
Image object for each one and assigning the value of the newURL variable to
its src attribute. As soon as the src attribute is set, the browser loads the image.
Although preloading isnt essential, it can improve the user experience because
the users wont have to wait for a rollover image to be loaded.
At this point, the hover event method is used to set up the event handlers
for each image. Remember that this event method has two event handlers as its
parameters. The first event handler is run when the mouse pointer moves into
the element, and the second one is run when the mouse pointer moves out of the
image. Here, the this keyword is used so the hover event applies to each img
element.
In the function for the first event handler, you can see that the this keyword
and the attr method are used to set the src attribute of the image to the value
of the newURL variable. That causes the rollover image to be displayed. The
function for the second event handler reverses this process by restoring the src
attribute of the image to the value of the oldURL variable.
Of course, theres more than one way to code an application like this. For
instance, you could implement this application by using the mouseover and
mouseout event methods instead of the hover event method. Then, you would
code the first function of the hover event as the mouseover event handler and the
second function as the mouseout event handler.

Chapter 7

Get off to a fast start with jQuery

Three images with the middle image rolled over

The HTML
<section>
<h1>Ram Tap Combined Test</h1>
<ul id="image_rollovers">
<li><img src="images/h1.jpg" alt="" id="images/h4.jpg"></li>
<li><img src="images/h2.jpg" alt="" id="images/h5.jpg"></li>
<li><img src="images/h3.jpg" alt="" id="images/h6.jpg"></li>
</ul>
</section>

The JavaScript
$(document).ready(function() {
$("#image_rollovers img").each(function() {
var oldURL = $(this).attr("src");
// gets the src attribute
var newURL = $(this).attr("id");
// gets the id attribute
// preload images
var rolloverImage = new Image();
rolloverImage.src = newURL;
// set up event handlers
$(this).hover(
function() {
$(this).attr("src", newURL);
},
function() {
$(this).attr("src", oldURL);
}
); // end hover
}); // end each
}); // end ready

Figure 7-16

The Image Rollover application in jQuery

// sets the src attribute

// sets the src attribute

227

228

Section 2

jQuery essentials

Perspective
To get you off to a fast start, this chapter has presented a working subset of
the most useful jQuery selectors, methods, and event methods. That should give
you some idea of what you have to work with when you use jQuery. And youll
add to those selectors and methods as you read other chapters in this book.
The trick of course is being able to apply the right selectors, methods, and
event methods to the application that youre trying to develop. To get good at
that, it helps to review many different types of jQuery applications. Thats why
this chapter has presented four applications, and thats why youll see many
more before you complete this book.

Terms
jQuery method
CDN (Content Delivery Network)
getter method
jQuery UI
setter method
plugin
object chaining
selector
event method

Summary
jQuery is a JavaScript library that provides methods that make JavaScript
programming easier. These methods have been tested for cross-browser
compatibility.
jQuery UI and plugins are JavaScript libraries that use the jQuery library to
build higher-level features.
To use jQuery, you code a script element in the head section that includes
the file for the jQuery core library. This file can be downloaded and stored
on your computer or server, or you can access it through a Content Delivery
Network (CDN).
When you code statements that use jQuery, you use selectors that are like
those for CSS. You also use a dot syntax that consists of the selector for
one or more elements, the dot, and the name of the method that should be
executed.
To set up event handlers in jQuery, you use event methods. Most of these
methods have one parameter that is the event handler that will be run when
the event occurs. But some event methods like the toggle method take two
event handler parameters.

Exercise 7-1

Chapter 7

Get off to a fast start with jQuery

Add a Clear button

to the Email List application

In this exercise, youll add a Clear button to the Email List application of figures
7-7 and 7-8. That will force you to create and attach another event handler.
1. Use your text editor to open the index.html and email_list.js files in this
folder:
c:\jquery\exercises\ch07\email_list\

2. Run the application to refresh your memory about how it works. Note that a
Clear button has been added below the Join our List button, but the button
doesnt work.
3. Add an event handler for the click event of the Clear button that clears all of
the text boxes by setting them to an empty string (). This can be done in one
statement. To select just the text boxes, you use a selector like the last one in
figure 7-9. To set the values to empty strings, you use the val method like the
second example in figure 7-5. Now, test this change.
4. This event handler should also put the asterisks back in the span elements that
are displayed to the right of the text boxes to show that entries are required.
That requires just one statement that uses the next and the text methods.
5. Add one more statement to this event handler that moves the focus to the first
text box. Then, test this change.
6. Add another event handler to this application for the double-click event of any
text box. This event handler should do the same thing that the event handler
for the click event of the Clear button does. The easiest way to do that is to
trigger the click event of the Clear button from the handler for the double-click
event, as in the last example in figure 7-12.
7. Comment out the line of code that you just used to trigger the click event of
the Clear button. Then, add a statement to the double-click event handler that
only clears the text from the text box that the user double-clicks in. To do that,
youll have to use the this keyword, as in the first example in figure 7-11.

Exercise 7-2

Use different event methods

for the Image Rollover application

This exercise asks you to modify the Image Rollover application of figure 7-16
so it uses different events for the event handlers.
1. Use your text editor to open the HTML and JavaScript files that are in this
folder:
c:\jquery\exercises\ch07\image_rollover\

2. Run the application to refresh your memory about how it works.

229

230

Section 2

jQuery essentials

3. Comment out the hover method in the JavaScript, and rewrite the code
so it uses the mouseover and mouseout event methods to implement this
application. That should take about five minutes.

Exercise 7-3

Develop a Book List application

In this exercise, youll start with the HTML and CSS for the user interface that
follows. Then, youll develop the jQuery code that makes it work.

Development guidelines
1. Youll find the HTML, CSS, and image files for this application in this folder:
c:\jquery\exercises\ch07\book_list\

Youll also find an empty JavaScript file named book_list.js. You can add your
code to this file.
2. This application works like the FAQs application you saw in this chapter,
except that a list of book links is displayed below each heading. If the user
clicks on one of these links, an image for the book is displayed to the right of
the list. In addition, anytime the user clicks on a heading with a plus or minus
sign before it, the image should no longer be displayed.
3. The HTML for the links of this application is like the HTML for the Image
Swap application. However, the links for this application dont require the title
attribute since no caption is displayed for the image.
4. The images that are referred to by the href attributes of the links in this
application should be preloaded. To do that, you can loop through all the links
in the section element. Also, be sure to cancel the default actions of the links.
5. Feel free to copy and paste code from any of the applications that are available
to you. Thats the most efficient way to build a new application.
IE note: If you set the src attribute of the img element to an empty string so
no image is displayed when the application starts and when the user clicks on
a heading, a placeholder will be displayed for this element in Internet Explorer.
To avoid that, you can set the style attribute of the img element so the display
property is set to none. Then, you can set this property to block when you
want to display an image. In chapter 9, youll learn an easier way to set CSS
properties using jQuery.

How to build your jQuery skills

The easiest way is to let Murachs JavaScript and jQuery be
your guide! So if youve enjoyed this chapter, I hope youll
get your own copy of the book today. You can use it to:

Teach yourself how to use JavaScript and jQuery to create

web sites that deliver the dynamic user interfaces, fast
response times, and accessibility features that todays
users expect

Pick up a new skill whenever you want or need to by

focusing on material thats new to you

Look up coding details or refresh your memory on forgotten details when youre in
the middle of developing a web application

Loan to your colleagues who are always asking you questions about client-side
web programming

Mike Murach, Publisher

To get your copy, you can order online at www.murach.com or call us at

1-800-221-5528 (toll-free in the U.S. and Canada). And remember, when you order
directly from us, this book comes with my personal guarantee:

100% Guarantee
You must be satisfied. Each book you buy directly
from us must outperform any competing book or
course youve ever tried, or send it back within 90
days for a full refundno questions asked.
Thanks for your interest in Murach books!