jQuery Selector – The Complete Usage & Tutorial Guide

Last Updated: June 4, 2021

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.

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

Learn how to implement an API with jQuery – Implementing TheMovieDB (TMDB) API with jQuery AJAX

Explanation: I have 2 paragraph (there id’s are findMe and anotherPara) and a hide button (whose id is hideButton). On the click of the button, the jQuery Selector finds the findMe paragraph and calls the .hide() method in order 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 class called myClass.

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 called myClass. There is also a button which 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 event, 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 having id as “myDiv”.

2. Hierarchy Selectors

jQuery Selector	Example	Explanation
parent child	$(“#myId a”)	All “a” elements that are the child of the element with id called “myId”.
parent > child	$(“#myId > a “)	All “a” elements that are the direct child of the element with id called “myId”.
prev + next	$(“a + span”)	All “span” that are immediately preceded by sibling anchor.

Related tutorial – The jQuery .grep() method is used to filter an array based on a provided condition. You can create any such condition based on the filter logic of your application.

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 called “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==’https://www.yogihosting.com’]”)	Selects all anchor elements with href attribute value as https://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 called “myClass”.
:empty	$(“p:empty”)	Selects all paragraphs that are empty.
:hidden	$(“div:hidden”)	Selects all div that are hidden.