jQuery in Action
Selecting elements for manipulation
17
In the previous chapter, we discussed the many ways that the jQuery
$()
function
can be used. Its capabilities range from the selection of
DOM
elements to defining
functions to be executed when the
DOM
is loaded.
In this chapter, we examine in great detail how the
DOM
elements to be oper-
ated upon are identified by looking at two of the most powerful and frequently
used capabilities of
used capabilities of
$()
: the selection of
DOM
elements via selectors and the cre-
ation of new
DOM
elements.
A good number of the capabilities required by Rich Internet Applications are
achieved by manipulating the
DOM
elements that make up the pages. But before
they can be manipulated, they need to be identified and selected. Let's begin our
detailed tour of the many ways that jQuery lets us specify what elements are to be
targeted for manipulation.
detailed tour of the many ways that jQuery lets us specify what elements are to be
targeted for manipulation.
2.1 Selecting elements for manipulation
The first thing we need to do when using virtually any jQuery method (frequently
referred to as jQuery commands) is to select some page elements to operate upon.
Sometimes, the set of elements we want to select will be easy to describe, such as "all
paragraph elements on the page." Other times, they'll require a more complex
description like "all list elements that have the class
referred to as jQuery commands) is to select some page elements to operate upon.
Sometimes, the set of elements we want to select will be easy to describe, such as "all
paragraph elements on the page." Other times, they'll require a more complex
description like "all list elements that have the class
listElement
and contain a link."
Fortunately, jQuery provides a robust selector syntax; we'll be able to easily
specify virtually any set of elements elegantly and concisely. You probably already
know a big chunk of the syntax: jQuery uses the
know a big chunk of the syntax: jQuery uses the
CSS
syntax you already know and
love, and extends it with some custom methods to select elements that help you
perform tasks both common and complex.
perform tasks both common and complex.
To help you learn about element selection, we've put together a Selectors
Lab page that's available with the downloadable code examples for this book. If
you haven't yet downloaded the example code, now would be a great time to do
so. Please see the book's front section for details on how to find and download
this code.
you haven't yet downloaded the example code, now would be a great time to do
so. Please see the book's front section for details on how to find and download
this code.
This Selectors Lab allows you to enter a jQuery selector string and see (in real
time!) which
DOM
elements get selected. The Selectors Lab can be found at
chapter2/lab.selectors.html in the example code.
When displayed, the Lab should look as shown in figure 2.1 (if the panes don't
appear correctly lined up, you may need to widen your browser window).
The Selector pane at top left contains a text box and a button. To run a Lab
experiment, type a selector into the text box and click the Apply button. Go
ahead and type the string
ahead and type the string
li
into the box, and click Apply.