jQuery SelectorsS2C Home « jQuery Selectors

• <<    CSS Selectors
• DOM Element Methods     >>

jQuery adds a whopping twenty-eight jQuery specific selectors to the thirty-three CSS selectors it supports. In this lesson we look at the jQuery form, index positional and custom selectors and how we use them within jQuery.

Being jQuery extensions all the selectors in this section are not part of any current CSS specification and thus cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. So where possible use current CSS selectors for speed and efficiency.

Using The jQuery Custom Selectors

The jQuery custom selectors are an eclectic group that feature some powerful selectors for various filtering of our matched set. In this section we take a look at a few of these selectors

:contains() ExampleTop

Selects all elements containing the specified text.

The following example will check for the text 'the' in 'em' elements on this page and apply orange background when the button below is clicked.

$(function(){
  $('#btn17').on('click', function() {
    $("em:contains('the')").css('backgroundColor', 'orange');
  });
}); 

:header ExampleTop

Selects all header elements.

In the example below we apply an orange backgroud to all header elements within the '#main' division of the page.

$(function(){
  $('#btn21').on('click', function() {
    $("#main :header").css('backgroundColor', 'orange');
  });
});

For the complete list of jQuery custom selectors with working examples take a look at the reference section, or click on a jQuery selector link at the bottom of this page to go straight to that selector reference.

Using The jQuery Form Selectors

The jQuery form selectors allow us to access form elements on the page using psuedo-class style selectors. For the majority of jQuery form selectors we can use valid CSS alternatives. For instance rather than using the jQuery form $(':checkbox') pseudo-selector, we can get the same results with valid CSS using $('[type=checkbox]'), without the hit to performance.

So what we will show in this section is those jQuery form selectors that have no CSS equivalents.

:input Example  Top

Selects all button, input, select and textarea elements.

Unfortunately this jQuery form selector acts differently depending upon which browser you are using. In Chrome and IE all input field elements are selected using the following code. In Firefox, Chrome and Safari radio and checkboxes are not highlighted and so the usefulness of this particular selector is questionable. Try the effect in different browsers to see this happen.

In the example below we apply a red border to 'input' elements within the form. The .submit(), .wrap() and .parent() methods are covered in later lessons and the reference section and so will not be discussed here.

$(function(){
  $('.ourform').submit(function () { return false; }); // disable submit 
  $('#btn5').on('click', function() {
    $('.ourform :input').wrap('<span></span>').parent()
                        .css('border', '1px solid red');
  });
});

:selected Example  Top

Selects all elements of type selected.

In the example below we output a message that changes every time a new select value is chosen. The .change(), .each(), .text()and .trigger() methods are covered in later lessons and the reference section and so will not be discussed here.

$(function(){
  $('.ourform2').submit(function () { return false; }); // disable submit 
  $("select").change(function () {
    var selectValue = "";
    $("select option:selected").each(function () {
   	  selectValue += $(this).text() + " pie shape is selected";
    });
    $("#selection").text(selectValue);
  }).trigger('change');
});

Apart from these two examples all the other form selectors can be achieved with better performance using an attribute match as mentioned above.

For the complete list of jQuery form selectors with working examples take a look at the reference section, or click on a jQuery form selector link at the bottom of this page to go straight to that selector reference.

Using The jQuery Index Positional Selectors

The jQuery index positional selectors allow us to access elements in our matched set via a zero-based index.

Index Positional Selectors Example  Top

The :even and :odd selectors allow us to choose even and odd elements in our matched sets based on a zero index (so even are 0,2,4 etc). One possible use for these selectors is shown below where we 'stripe' alternate rows of a table on button clicks.

The following example will select even or odd elements in the table below and change their background to orange and green respectively.

$(function(){
  $('#btn14').on('click', function() {
    $('.testtable tr:even').css('backgroundColor', 'orange');
  });
  $('#btn25').on('click', function() {
    $('.testtable tr:odd').css('backgroundColor', 'green');
  });
}); 

For the complete list of jQuery index positional selectors with working examples take a look at the reference section, or click on a jQuery selector link at the bottom of this page to go straight to that selector reference.

Lesson 4 Complete

In this lesson we looked at some of the jQuery selectors available and how to use them in jQuery.

Related Tutorials

jQuery 3.5 Basics - Lesson 3: CSS Selectors

What's Next?

In the next lesson we look at the four DOM element methods available for use in jQuery and how to use them.

• <<    CSS Selectors
• DOM Element Methods     >>