jQuery 1.3 : Selectors - Custom selectors

To t&;&;he w&;&;&;ide variety of CSS selectors, jQuery adds its own custom selectors. Most of the custom selectors allow us to pick certain elements out of a line-up, so to speak. The syntax is the same as the CSS pseudo-class syntax, where the selector starts with a colon (:). For example, to select the second item from a matched set of div selectors with a class of horizontal, we write this:

$('&;div.horizontal:eq(1)')

Note that :eq(1) selects the second item in the set because JavaScript array numbering is zero-based, meaning that it starts with 0. In contrast, CSS is one-based, so a CSS selector such as $('div:nth-child(1)') would select all div selectors that are the first child of their parent (in this case, however, we would probably use $('div:first-child') instead).

Sty&;ling alternate rows

Two very&; useful custom selectors in the jQuery library are :odd and :even. Let's take a look at how we can use one of them for basic table striping, given the following table:

<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
stylingalternate rows</tr>
<tr>
<td>Henry IV, Part I</td>
<td>History</td>
<td>1596</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
<td>1599</td>
</tr>
</table>


					  

Now we c&;an add a style to the stylesheet for all table rows, and use an alt class for the even rows:

tr {
background-color: #fff;
}
.alt {
background-color: #ccc;
}

Finally, we write our jQuery code, attaching the class to the even-numbered table rows (<tr> tags):

$(document).ready(function() {
$('tr:odd').addClass('alt');
});

But wait! Why use the :odd selector for even-numbered rows? Well, just as with the :eq() selector, the :odd and :even selectors use JavaScript's native zero-based numbering. Therefore, the first row counts as 0 (even) and the second row counts as 1 (odd), and so on. With this in mind, we can expect our simple bit of code to produce a table that looks like this:

Note that we may see unintended results if there is more than one table on a page. For example, since the last row in this table has a white background, the first row in the next table would have the "alternate" gray background. One way to avoid this type of problem is to use the :nth-child() selector instead. This selector can take either a number, odd, or even as its argument. Notably, however, :nth-child() is the only jQuery selector that is one-based. To achieve the same row striping as we did above, and to make it consistent across multiple tables in a document, the code would look like this:

$(document).ready(function() {
$('tr:nth-child(even)').addClass('alt');
});

For one f&;inal custom-selector touch, let's suppose for some reason we want to highlight any table cell that referred to one of the Henry plays. All we have to do — after adding a class to the stylesheet to make the text bold and italicized ( .highlight {font-weight:bold; font-style: italics;} ) — is add a line to our jQuery code, using the :contains() selector.

$(document).ready(function() {
$('tr:nth-child(even)').addClass('alt');
$('td:contains(Henry)').addClass('highlight');
});

So, n&;&;ow we can see our lovely striped table with the Henry plays prominently featured:

It's important to note that the :contains() selector is case sensitive. Using $('td:contains(henry)') instead, without the uppercase "H," would select no cells.

Admittedly, there are ways to achieve the row striping and text highlighting without jQuery — or any client‑side programming, for that matter. Nevertheless, jQuery, along with CSS, is a great alternative for this type of styling in cases where the content is generated dynamically and we don’t have access to either the HTML or server-side code.

Form selectors

When working with forms, jQuery's custom selectors can make short work of selecting just the elements we need. The following table describes a handful of these selectors:

Selector	Match
:text, :checkbox, :radio, :image, :submit, :reset, :password, :file	Input elements with a type attribute equal to the selector name (excluding the colon). For example, :text selects <input type="text">
:input	Input, textarea, select, and button elements
:button	Button elements and input elements with a type attribute equal to button
:enabled	Form elements that are enabled
:disabled	Form elements that are disabled
:checked	Radio buttons or checkboxes that are checked
:selected	Option elements that are selected

As with the other selectors, form selectors can be combined for greater specificity. We can, for example, select all checked radio buttons (but not checkboxes) with $(':radio:checked') or select all password inputs and disabled text inputs with $(':password, :text:disabled'). Even with custom selectors, we use the same basic principles of CSS to build the list of matched elements.&;