22 jQuery: Novice to Ninja
$(<selectors go here>)
We’ll be using the shortcut alias for the remainder of the book as it’s much more
convenient. We mentioned earlier that there’s no real reason to use the full jQuery
name, unless you’re having conflict issues with other libraries (see the section called
“Avoiding Conflicts” in Chapter 9).
Simple Selecting
Our task is to select alternate table rows on the celebrity table. How do we do this?
When selecting with jQuery, your goal is to be only as specific as required: you
want to find out the most concise selector that returns exactly what you want to
change. Let’s begin by taking a look at the markup of the Celebrities table, shown
in Figure 2.1.
Figure 2.1. class and id attributes in the HTML page
We could start by selecting every table row element on the entire page. To select
by element type, you simply pass the element’s HTML name as a string parameter
to the $ function. To select all table row elements (which are marked up with the
<tr> tag), you would simply write:
$('tr')
Selecting, Decorating, and Enhancing 23
Nothing Happens!
If you run this command, nothing will happen on the page. This is expected; after
all, we’re just selecting elements. But there’s no need to worry; soon enough, we’ll
be modifying our selections in all sorts of weird and wonderful ways.
Similarly, if we wanted to select every paragraph, <div> element, <h1> heading, or
<input> box on the page, we would use these selectors accordingly:
$('p')
$('div')
$('h1')
$('input')
But we don’t want to change every table row on the celebrity page, just the rows in
the table that have the celebrity data. We need to be a bit more specific, and first
select the containing element that holds the list of celebrities. If you have a look at
the following HTML and at Figure 2.1, you can see that the table that contains our
celebrity data has an id of celebs and a class of data. We could use either of these
to select the table.
chapter_02/02_selecting/index.html (excerpt)
<table class="data" id="celebs">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Occupation</th>
<th>Approx. Location</th>
<th>Price</th>
</tr>
</thead>
jQuery borrows the conventions from CSS for referring to id and class names. To
select by id, use the hash symbol (#) followed by the element’s id, and pass this as
a string to the jQuery function:
$('#celebs')
24 jQuery: Novice to Ninja
You should note that the string we pass to the jQuery function is exactly the same
format as a CSS id selector. Because ids should be unique, we expect this to only
return one element. jQuery now holds a reference to this element.
Similarly, we can use a CSS class selector to select by class. We pass a string
consisting of a period (.), followed by the element’s class name to the jQuery
function:
$('.data')
Both of these statements will select the table but, as mentioned earlier when we
talked about the DOM, a class can be shared by multiple elements, and jQuery will
happily select as many elements as we point it to. If there were multiple tables (or
any other elements, for that matter) that also had the class data, they’d all be selec-
ted. For that reason, we’ll stick to using the id for this one!
Can You Be More Specific?
Just like with CSS, we can select either $('.data') or the more specific
$('table.data'). By specifying an element type in addition to the class, the
selector will only return table elements with the class data, rather than all
elements with the class data. Additionally, like CSS, you can add parent container
selectors to narrow your selection even further.
Narrowing Down Our Selection
We’ve selected the table successfully, though the table itself is of no interest to us;
we want every other row inside it. We’ve selected the containing element, and from
that containing element we want to pick out all the descendants that are table rows:
that is, we want to specify all table rows inside the containing table. To do this,
we put a space between the ancestor and the descendant:
$('#celebs tr')
You can use this construct to drill down to the elements that you’re looking for, but
for clarity’s sake, try to keep your selectors as succinct as possible.
