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 is 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.
Meaning | Syntax |
---|---|
Attribute Equals | myAttribName="myValue" |
Attribute Not Equal | myAttribName!="myValue" |
Attribute Starts With | myAttribName^="myValue" |
Attribute Ends With | myAttribName$="myValue" |
Attribute Contains | myAttribName*="myValue" |
Attribute Contains Prefix | myAttribName|="myValue" |
Attribute Contains Word | myAttribName~="myValue" |
Here is 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: JS: Get Element by ID, Name, Class etc .