jQuery Selector – The Complete Usage Tutorial Guide

jQuery Selector – The Complete Usage Tutorial Guide

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.

$("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.

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

Anchor with class “myClass”
Anchor with class “myAnchor”

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.

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

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.