jQuery 1.3 : Selectors - Custom selectors

8/27/2012 1:12:37 AM
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:

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:

<td>As You Like It</td>
<td>All's Well that Ends Well</td>
<td>Romeo and Juliet</td>
stylingalternate rows</tr>
<td>Henry IV, Part I</td>
<td>Henry V</td>


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() {

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() {

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() {

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.&;
Most View
Looking Good, Sounding Great (Part 1) : Q Acoustics Q7000i 5.1, Bowers & Wilkins MT-50, Canton Movie 1050
Booting on HP 9000 Servers (part 2) - The setboot Command, Boot Console Handler (BCH) and Processor Dependent Code (PDC)
Sony Xperia ZL Review - A Powerhouse Phone In An Amazingly Compact Chassis (Part 3)
Long Awaited Canon Super Telephoto Emerges From The Wild
Sling Media Slingbox Pro-HD
Ouya Gaming Machine Review - Founding Backer Version (Part 1)
Seasonic And Enhance Junior PSUs - Compact Power Supply (Part 5) : Enhance ENP-7025E
SQL Server 2008 : Common performance problems (part 1) - Procedure cache bloating
ECS Z77H2-A2X v1.0 - Golden LGA 1155 Mainboard From The Black Series (Part 6)
Booting on HP 9000 Servers (part 4) - HPUX Secondary System Loader (hpux)
Top 10
SQL Server 2012 : Consolidating Data Capture with SQLdiag - Getting Friendly with SQLdiag (part 2) - Using SQLdiag as a Service
SQL Server 2012 : Consolidating Data Capture with SQLdiag - Getting Friendly with SQLdiag (part 1) - Using SQLdiag as a Command-line Application
SQL Server 2012 : Consolidating Data Capture with SQLdiag - The Data Collection Dilemma, An Approach to Data Collection
SQL Server 2012 : Troubleshooting Methodology and Practices - Data Analysis, Validating and Implementing Resolution
SQL Server 2012 : Troubleshooting Methodology and Practices - Data Collection
SQL Server 2012 : Troubleshooting Methodology and Practices - Defining the Problem
SQL Server 2012 : Troubleshooting Methodology and Practices - Approaching Problems
Windows 8 : Accessing System Image Backup and Recovery Functionality with Windows Backup, Cloud Backup
Windows 8 : Using the Windows 8 Recovery Tools (part 2) - Push Button Reset
Windows 8 : Using the Windows 8 Recovery Tools (part 1) - Creating a System Recovery Disc, Booting to the Windows Recovery Environment