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");
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.
|Attribute Not Equal|
|Attribute Starts With|
|Attribute Ends With|
|Attribute Contains Prefix|
|Attribute Contains Word|
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: DOM: Get Elements by ID, Tag, Name, Class, CSS Selector.
If you have a question, put $5 at patreon and message me.