Introducing JQuery Selectors

Rich Internet Applications (RIA) are created by manipulating the Document Object Model (DOM) elements in various ways. Before working on DOM elements we need to have an efficient and easy way to identify and select the elements required. The JQuery library provides different options to identify an element. The power of JQuery is that it allows us, users of the library, to write our own selectors.

All selectors will start with a $ symbol and the selector string is placed within (“). Note that $ is just a short form of JQuery. All selectors will return an array of elements that satisfy the condition. An element in the array can be indexed as a JavaScript array or by using “get”, the JQuery utility method. For example, to get the first DOM element in the page, we can use both $('*')[0] and $('*').get(0).

Basic selectors

The most efficient way of selecting an element is by using the ID of that element. JQuery, in turn, uses the native method, getElementById(). For example, to get an element with the ID msg, the selector should be $('#msg').

An element can be selected using its type. To select the entire span element in a page, we can use $('span'). For an appealing look and feel for an element, it should be associated with a class. JQuery provides ways to select elements based on this class. For example, when we need to associate a click operation with all the elements that have a class .button, then…

$('.button').click(function() {
     console.log("Element with class button is clicked");
});

$('*') is used to select all the DOM elements in a page.

We can combine different selectors together using the comma. The resulting array will contain all the elements that satisfy any of the condition(s) passed. For the following selector query:

$('#msgdiv , .msgdiv')

< …the resulting array will contain elements that have their class set to msgdiv or an element that has an ID equal to msgdiv. The same set of elements can also be matched using the JQuery function add().

$('#msgdiv').add('.msgdiv')

Form selectors

Form selectors help us to select an element based on its type. Though the same result could be achieved using an attribute selector (as we will see), the form selector provides a shorter way. As an example, :button will select all the <input type="button"> elements. The following table lists all form selectors.

Form filters also help us in making a selection based on the state of a particular element, like enabled, selected, etc, as shown in the following table.

The power of form selectors can be understood when two or more of them are combined. For example, $(':radio:checked') will select the radio buttons that are selected by the user.

Hierarchy selectors

These selectors are used to select elements based on their positions with respect to other elements. There are four ways, using which we will be able to select an element based on its hierarchy in the DOM. Let’s look at the HTML snippet example shown in Figure 1 to explain hierarchy selectors. The following table lists hierarchy selectors.

Filters

Filters are used to select a subset of elements from a set of elements. These filters are extremely useful when combined with the selectors that we have seen previously.

Basic filters

These filters are useful when we need to select an element based on its position in the returned array. We have already seen some ways to do this—for example get(n) and [n] will give the nth element from the returned set. But get(n) or [n] can’t be used in the chaining of functions. Filters (that we are going to discuss) will return a JQuery object that can be used in chaining, like $(':button:first').addClass("chained").

In our zebra table example, seen in the last article [published in the May 2009 issue of LFY] we have given different colours to every other row in a table. The same can be achieved using the odd or even selector. tr:odd will select every other odd element on a page, whereas tr:even will select every other even element on a page. In our zebra table example, we have used "$(".lfy tr:even").addClass("alt");" to select every even row under the table that has class lfy and added a class alt to them. The following table summarises the list of basic filters and their functions with an example.

Visibility filters

These filters are used to select elements based on their visibility in the page. An element can be in a visible or hidden state. For example, to select all the visible elements in a page, we can use $(':visible'). $(':hidden') will select all the hidden elements in a page. If we analyse the previous selector syntaxes, we would know that, by default, all filters will take $('*') as a matched set when none is explicitly mentioned. The following table lists the visibility filters and their functions.

Child filters

These filters are used to select an element based on its position with respect to its containing element, known as the parent. When we need to select the first rows from all the available tables in a page, we can use $('tr:first-child'). To make this selector work on a particular element (table), we need to prepend the selector with that element. For example, $('#tableid tr:first-child') will select the first row from the table with ID tableid. As we saw in basic filters, here too we have the n^th child (number/odd/even). For example, $('#tableid td:nth-child(odd)') will select all the odd columns from the page.

We can use the :only-child selector to select the element that is the ONLY child for its parent.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<div></div>
<div>
     <div><span>MySpan1</span><button>MyButton1</button></div>
     <div><span>MySpan2</span></div>
</div>
</html>

In the above HTML snippet, $('span:only-child') will select the span with value MySpan2.  The following table gives the complete list of child selectors with their usage patterns.

Attribute filters

Attribute filters are used to select elements based on the attribute values. For example, the text box <input type="text" name="dummyTextBox" value="Dummy TextBox" /> can be selected in the following way:

Content filters

Content filters are used to select elements based on what the element contains. For example, :contains(text) helps us to select elements that contain the given text. To explain ‘content filter’, let’s take the HTML snippet shown in Figure 2.

The following table lists the various content filters and their functions.

Note that if content filters are made to filter on * then they will select the complete DOM, even if only one DOM element satisfies. For example, $('table:has(td)').size() will be 1, but $(':has(td)') will be of size 7 (in the above fragment) since it selects all the above tr(s), the body and HTML too.

Not selectors

We have looked at a good number of selectors till now. In certain scenarios, when we need a function that will negate the available functionality, the :not selector comes to the rescue. As we know, we can use $('checkbox:checked') to get all the check boxes that are selected. But how about getting the check boxes that are not selected by the user? It’s simple! We need to use :not in front as $('checkbox:not('checked')).

Selector commands

There are a set of JQuery commands/functions that can be used to select an element. We know that every JQuery selector will return an array of elements. To get a particular element out of the array, we can use get(number). So $(':button').get(0) is equivalent to $(':button:first'). The inverse of get is index, which is used to find the position of an element in an array of elements. Considering a page that has only one submit, element $('*').index($(':submit')[0]) will return the position of the submit button in the complete DOM. When we need to select all input elements that are either of type radio or check box then we can use any one of the following: $(':radio,:checkbox') or $(':radio').add(':checkbox'). Following which, the add(JQuery expression) will add the result to the wrapped set.

When we need to remove the element that is added as part of the previous command from the wrapped set, then we can use end(). For example:

$(':image').add(':text').addClass('inputandtextclass').end().add('imageclass')

In the above case, the inputandtextclass class is applied to both image and text elements, whereas imageclass class will be applied to the image elements only.

We use find(expression) to select elements that match the given criteria and also the descendants of the already selected element set. We use filter(expression) to select elements that match the given criteria from the given set.

<div>
    <button value="Check">Check</button>
</div>

In the above HTML snippet, to select the button using:

• find, use $('div').find(':button'). This will search for buttons under div element.
• filter, use $('div :button').filter(':button'). This will search for the button element in the first wrapped set, which has both div and button.

Although we have equivalent selectors $('div button') and $(':button',$('div')), respectively, find and filter will be more useful in chaining.

JQuery selectors and filters have made the selection of a DOM element easier. It is always better to use the ID selector since JQuery uses the browser native method getElementByID(). So in any case, the ID selector is much faster than other selectors. Moreover, it’s always better to cache the result of selectors. The cached results can be used (if the DOM element is not updated dynamically) for future purposes, thereby making the response faster. To practice the above concepts, click codylindley.com/jqueryselectors.