The jQuery Selector starts with the dollar sign and parentheses – $() and finds one or more HTML elements in the DOM. We can use name, id, CSS Class, type, attribute, etc to find elements using the jQuery Selector.
The below jQuery Selector finds all the div elements in the DOM.
1
| $("div") |
The #id Selector
In #id selector we use the id of the element. For example to find an element that has the id as findMe, we will use $(“findMe”).
Hide an element that has id “findMe”
My id is “findMe”
My id is “anotherPara”
Explanation: I have 2 paragraph (there id’s are findMe and anotherPara) and a hide button (id as hideButton). On the click of the button my jQuery Selector finds the findMe paragraph and calls the .hide()function to hide it.
1
2
3
4
5
6
7
8
| <p id="findMe">My id is "findMe"</p><p id="anotherPara">My id is "anotherPara"</p><button id="hideButton">Hide</button>$(document).ready(function () { $("#hideButton").click(function (e) { $("#findMe").hide(); });}); |
The CSS Class Selector
It finds all the elements with a specific class. For example $(“.myClass”) finds all elements that has the myClass class.
Change Color of all elements that has the CSS Class as “myClass”
Paragraph with class “myClass”
Paragraph with class “anotherClass”
Div with class “myClass”
Div with class “mydiv”
Explanation: I have 2 paragraph, 2 div and 2 anchor elements. One from each of them has the CSS class myClass. There is also a button when clicked changes the background-color of the elements having myClass class to Red.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <p class="myClass">Paragraph with class "myClass"</p><p class="myPara">Paragraph with class "anotherClass"</p><div class="myClass">Div with class "myClass"</div><div class="myDiv">Div with class "mydiv"</div><a href="#" class="myClass">Anchor with class "myClass"</a><a href="#" class="myAnchor">Anchor with class "myAnchor"</a><button id="colorButton">Change Color</button> $("#colorButton").click(function (e) { $(".myClass").css("backgroundColor", "Red");}); |
On the button Click only the background color of elements having myClass will change to Red. I used jQuery CSS to change the background color of the elements.
Common jQuery Selectors
There can be almost unlimited jQuery Selectors. If not all, you should know the most commonly used ones. These are:
1. HTML Element Selectors
| jQuery Selector | Example | Explanation |
|---|---|---|
| a | $(“a”) | All “a” elements in the DOM. |
| div | $(“div”) | All “div” elements in the DOM. |
| h1,h2,h3 | $(“h1,h2,h3”) | All “h1, h2 and h3” elements in the DOM. |
| input[type=’checkbox’] | $(“#myDiv input[type=’checkbox’]”) | All input elements of type checkbox that are the children of element with id (“myDiv”). |
2. Hierarchy Selectors
| jQuery Selector | Example | Explanation |
|---|---|---|
| parent child | $(“#myId a”) | All “a” elements that are the child of the element with id “myId”. |
| parent > child | $(“#myId > a “) | All “a” elements that are the direct child of the element with id “myId”. |
| prev + next | $(“a + span”) | All “span” that are immediately preceded by sibling anchor. |
3. Class Selectors
| jQuery Selector | Example | Explanation |
|---|---|---|
| .class1,.class2 | $(“.white,.black”) | All the element having either “.white” or “.black” CSS class. |
| div .class | $(“div .myClass”) | All elments that are having class “myClass” and are the children of any “div” element. |
| elementId > element > element > element | $(“#myData > ul > li > a”) | The “anchors” that are direct childen of li element. The li element should be direct children of ul element. The ul element should be direct children of element having id “myData”. |
4. Index Selectors
| jQuery Selector | Example | Explanation |
|---|---|---|
| :first | $(“div:first”) | Selects the first div in the DOM. |
| :last | $(“div:last”) | Select the last div in the DOM. |
| :even | $(“tr:even”) | Selects all even tr elements in the DOM. |
| :odd | $(“tr:odd”) | Selects all odd tr elements in the DOM. |
| :eq(n) | $(“tr td:eq(2)”) | Selects all 3rd td elements that are children of tr elements. The jQuery index starts with 0 so eq(2) will be the 3rd. |
5. Child Selectors
| jQuery Selector | Example | Explanation |
|---|---|---|
| :first-child | $(“tr:first-child”) | Selects all tr elements that are first child of their parent. |
| :last-child | $(“tr:last-child”) | Selects all tr elements that are last child of their parent. |
| :nth-child(n) | $(“tr:nth-child(3)”) | Selects all tr elements that are 3rd child of their parent. |
6. Attribute Selectors
| jQuery Selector | Example | Explanation |
|---|---|---|
| [attribute] | $(“[title]”) | Selects all elements having title attribute. |
| [attribute==value] | $(“a[href==’http://www.yogihosting.com’]”) | Selects all anchor elements with href attribute value as http://www.yogihosting.com. |
| [attribute!=value] | $(“img[alt!=’jQuery’]”) | Selects all img elements whose alt attribute is not jQuery. |
7. Content Selectors
| jQuery Selector | Example | Explanation |
|---|---|---|
| :contains(text) | $(“p:contains(‘jQuery’)”) | Selects all paragraphs that contains text jQuery. |
| :has(value) | $(“p:has(‘.myClass’)”) | Selects all paragraphs that contains elements having class “myClass”. |
| :empty | $(“p:empty”) | Selects all paragraphs that are empty. |
| :hidden | $(“div:hidden”) | Selects all div that are hidden. |
.png)
