jQuery Selectors JQ Home << JQ Basics << jQuery Selectors

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 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.

In Chrome, Edge, Firefox and Opera 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');
  });
});

**Table For Testing Positional Selectors**
Table Row 1, Table Data 1	Table Row 1, Table Data 2
Table Row 2, Table Data 1	Table Row 2, Table Data 2
Table Row 3, Table Data 1	Table Row 3, Table Data 2
Table Row 4, Table Data 1	Table Row 4, Table Data 2

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.

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 '.content' division of the page.


$(function(){
  $('#btn21').on('click', function() {
    $(".content :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.

Lesson 4 Complete

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

Reference

Methods

Attributes and Properties - .css() method
Events - .change() method
jQuery Reference - Events - .on() method
Events - .ready() method
Events - .submit() method
Events - .trigger() method
Traversal - .each() method
Traversal - .parent() method
Manipulation - .text() method
Manipulation - .wrap() method

jQuery Custom Selectors

Animating Selector - :animated (Animating Match)
Attribute Not Equal Selector - [attr!="value"] (Attribute Value Non-Match)
jQuery Reference - Containing Text Selector - :contains()(Text Match)
jQuery Reference - Has Element Selector - :has() (Has Element Match)
Header Selector - :header (Header Element Match)
Hidden Selector - :hidden (Hidden Element Match)
Multi. Attrib. - [attr="value"][attrn="valuen"] (Multi. Attrib. Match)
Parent Selector - :parent (Has Children Match)
Visible Selector - :visible (Visible Element Match)

jQuery Form Selectors

jQuery Index Positional Selectors

Equals Index Selector - :eq() (Index Equals Match)
Even Index Selector - :even (Even Numbered Index Match)
First Selector - :first (First Element Match)
jQuery Reference - Greater Than Index Selector - :gt() (Greater Than Index Match)
Last Selector - :last (Last Element Match)
Less Than Index Selector - :lt() (Less Than Index Match)
Odd Index Selector - :odd (Odd Numbered Index Match)