jQuery Tutorial: Selectors

This page is a tutorial on jQuery's selectors. If you don't know the basics, see: jQuery Basics Tutorial.

Getting Elements You Want

Here's a most basic example of getting a element and do something with it.

// make all paragraphs red
$("p").css("color","red");

jQuery Selectors

Select by tag

// make all “p” tag elements red
$("p").css("color","red");

Test yourself: jQuery Select By Tag Example

Select by ID

// make element of id “xyz” red
$("#xyz").css("color","red");

Test yourself: jQuery Select By ID Example

Select by Class Value

// make element of class “xyz” red
$("[class='xyz']").css("color","red");

Test yourself: jQuery Select By Class Value Example

Select by Matching Any Attribute and Value

jq can select any tag attribute matching their value in many ways.

Here's a example of getting all elements that has attribue “abc” with value “xyz”.

// select elements with attribute “abc” that has value “xyz”, make it red.
$("[abc='xyz']").css("color","red");

The syntax follows CSS's syntax. If you are not familiar with CSS seletor syntax, see: CSS Tag Matching (Selector) Syntax.

To get elements without using jQuery, see: JavaScript: Get Elements by ID, Tag, Name, Class.