jQuery for beginners: selectors

Recently, I was repeatedly asked how to select a particular element in DOM, and this article will be entirely devoted to selectors in jQuery, perhaps most of them you have seen in various sources, but it's worth to put them together in one place.

In all the examples, an abbreviated version to call jQuery methods is applied by using function $ (dollar sign).

JQuery selectors are based on CSS selectors, also they support XPath. So instead of digging too deep into the documentation lets me give you some examples, actually bunch of them. But let's start from the very basics.

First, we need a layout of an HTML page (typical one):

<div id="header">
  <h1><a href="/" title="home">Title of page</a></h1>
  <h2>Sub-title of page <span>small description</span></h2>
</div>
<div id="wrapper">
  <div id="content">
    <div class="article">
      <h3>Title of article</h3>
      <p>Simple text and content simple text and content simple text and content.</p>
      <span>Title of image</span>
      <img src="/img1.jpg" alt="Alt text of image" />
      <p>Simple text and content simple text and content simple text and content.</p>
      <span class="inner-banner">Text of banner</span>
      <p>Simple text and content simple text and content simple text and content.</p>
    </div>
    <span id="large-banner"><img src="/large-banner1.jpg" alt="Large banner" /></span>
    <div class="article">
      <h3>Title of article</h3>
      <p>Simple text and content simple text and content simple text and content.</p>
      <span>Title of image</span>
      <img src="/img2.jpg" alt="Alt text of image" />
      <p>Simple text and content simple text and content simple text and content.</p>
      <span class="inner-banner">Text of banner</span>
      <p>Simple text and content simple text and content simple text and content.</p>
    </div>
  </div>
</div>
<div id="sidebar">
  <ul> 
    <li><a href="/menu0.html">Menu item - 0</a></li>
    <li><a href="/menu1.html">Menu item - 1</a></li>
    <li><a href="/menu2.html">Menu item - 2</a></li>
    <li><a href="/menu3.html">Menu item - 3</a></li>
  </ul>
</div>
<div id="footer">
  Copyright &copy; 2013
</div>

And now to the picked selection:

Selecting elements by id or class the same used in CSS1.

$( '#sidebar' ); // selecting element with id = sidebar
$( '.article' ); // selecting elements with class = article
$( 'div#sidebar' ); // selecting element div with id = sidebar
$( 'div.article' ); // selecting elements div with class = article

Note: use only valid class and id names.

Researching through the hierarchy of objects in DOM

Easy selection of children:

$( 'div span' ); // selection of all span elements in div elements

You can get the same result using the following construction:

$( 'div' ).find( 'span' ); // selection of all span elements in div elements

Selecting only the direct descendants (not grandchildren):

$( 'div > span' ); // selection of all span elements in div elements, where span is a direct descendant of div

What's the best way, which is faster? Let's try out!

The same way selectors can be grouped:

$( 'div, span' ); selection of all div and span elements

Search by neighbors:

$( 'span + img' ); // selection of all img elements that go after span elements
$( 'span ~ img' ); // selection of all img elements that go after the first span element
$( '#large-banner' ).prev(); // selection of an element that goes before the found one
$( '#large-banner' ).next(); // selection of an element that goes after the found one

Selection of all elements, all parents, all children:

$( '*' ); // selection of all elements 
$( 'p > *' ); // selection all children of elements p 
$( 'p' ).children(); // --
$( 'p' ).parent(); // selection of all direct parents of p elements 
$( '* > p' ); // selection of all parents of p elements (you probably won't need it)
$( 'p' ).parents(); // --
$( 'p' ).parents( 'div' ); // selection of all parents of p element that are div (parents is perceived as the selector parameter)

Filters

There are many filters in jQuery, and using them is quite the pleasure:

$( 'div:first' ); // selecting the first div in DOM
$( 'div:last' ); // selecting the last div in DOM
$( 'div:not(.red)' ); // selecting div's that don't have class red
$( 'div:even' ); // selecting even div's
$( 'div:odd' ); // selecting odd div's
$( 'div:eq(N)' ); // selecting div with the number N in DOM
$( 'div:gt(N)' ); // selecting div's, with index greater than N in DOM
$( 'div:lt(N)' ); // selecting div's with index lower than N in DOM
$( ':header' ); selecting header h1, h2, h3, etc.
$( 'div:animated' ); // selecting elements with active animation

Filters by content and visibility:

$( 'div:contains(text)' ); // selecting div's containing text
$( 'div:empty' ); // selecting empty div's 
$( 'div:has(p)' ); // selecting div's that contain p 
$( 'div.red' ).filter( '.bold' ) // selecting div's that contain read and bold class
$( 'div:hidden' ); // selecting hidden div's 
$( 'div:visible' ); // selecting visible div's

There are also filters by attributes:

$( "div[id]" ); // selecting all div with the attribute id
$( "div[title='dog']" ); // selecting all div with the attribute title = "dog"
$( "div[title!='dog']" ); // selecting all div with the attribute title not equal "dog"
$( "div[title^='dog']" ); // selecting all div with the attribute title that start with "dog"
  // <div title=dogOfMine">,<div title="dogOfYours">,<div title="dog...">
$( "div[title$='dog']" ); // selecting all div with the attribute title that end with "dog" 
  // <div title="itsdog">,<div title="somedog">,<div title="...dog">
$( "div[title*='dog']" ); // selecting all div with the attribute title containing "dog"
  // <div title="itsdog">,<div title="dogOfMine">,<div title="its dog">,<div title="...dog...">

It is also worth to point out the following filter:

$( "a[rel~='external']" ); // selecting all a with the attribute rel containing external in its list of values separated by space 

As the result of its work the following tags will be selected:

<a href="" rel="external">link</a> - yes
<a href="" rel="nofollow external">link</a> - yes
<a href="" rel="external nofollow">link</a> - yes
<a href="" rel="friend external follow">link</a> - yes
<a href="" rel="external-link">link</a> - no

To work with elements of form there are number of selectors that allow you to select by the type of element and filters - enabled/disabled/selected/checked:

$( ':text' ); // selecting all input elements with the type = text
$( ':radio' ); // selecting all input elements with the type = radio
  // and so on
$( 'input:enabled' ); // selecting all active elements of input
$( 'input:checked' ); // selecting all marked checkboxes

Filters can also be grouped:

$( 'div[name=city]:visible:has(p)' ); // selecting visible div with the name city, which contains the tag p

Here are some useful selectors to work with elements of form:

$( 'form select[name=city] option:selected' ).val(); // obtaining the selected element(s) in the city
$( 'form :radio[name=some]:checked' ).val(); // obtaining the selected value of radio button with the name some
$( 'form :checkbox:checked' ); // selecting all marked checkboxes