JQuery Selectors
Last Updated :
22 Nov, 2023
What is a jQuery Selector?
jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction.
Syntax:
$(" ")
Note: jQuery selector starts with the dollar sign $, and you enclose the selector inside parentheses ().
We will explore some basic selectors along with the help of examples.
jQuery #id Selector
jQuery #id selector allows you to target specific elements by their unique ID attribute using the # symbol followed by the ID name.
Syntax:
$( "#id-name" )
Example: In this example, we added two buttons with IDs “colorButton” and “hideButton.” The first button is responsible for changing the background color of the first paragraph (with ID “p1”) to sky blue, and the second button is responsible for hiding the second paragraph (with ID “p2”).
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<script>
$(document).ready(function () {
// When the button with ID "colorButton" is
// clicked, set background color of the
// paragraph with ID "para1"
$("#colorButton").click(function () {
$("#p1").css("background-color", "skyblue");
});
// When the button with ID "hideButton" is
// clicked, hide the paragraph with ID "para2"
$("#hideButton").click(function () {
$("#p2").hide();
});
});
</script>
</head>
<body>
<h2>Id selector</h2>
<p id="p1">
In this peragraph we are changing background.
</p>
<p id="p2">
In 2nd peragraph we are going hide this pera.
</p>
<button id="colorButton">
Change Background Color
</button>
<br><br>
<button id="hideButton">
Hide Paragraph
</button>
</body>
</html>
|
Output:
jQuery .Class Selector
In jQuery, a class selector is used to target HTML elements by their class attribute using the dot ( . ) symbol followed by the class name.
Syntax:
$( ".class" )
Example: In this example, we are using a class selector to target our given p tag.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<script>
$(document).ready(function () {
$(".colorBtn").click(function () {
$(".p1").css("background-color", "yellow");
});
});
</script>
</head>
<body>
<h2>Class selector</h2>
<p class="p1">
In this peragraph we are changing background.
</p>
<button class="colorBtn">
Change Background Color
</button>
</body>
</html>
|
Output:
CSS selector
jQuery Tag Name Selector
In jQuery, a tag name selector is used to target HTML elements by their tag names.
Syntax:
$( "p" );
Example: In this example, we are using a tag name selector to target our p tag and provide some styling, in which we provide green color to our given text and the background color is sky blue to our p tag.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<script>
$(document).ready(function () {
$(".colorBtn").click(function () {
$("p").css({
"background-color": "skyblue",
"font-size": "25px",
"color": "green"
});
});
});
</script>
</head>
<body>
<h2> Tag name selector</h2>
<p>
GeeksforGeeks <br>
A computer science portal..!
</p>
<button class="colorBtn">
click here
</button>
</body>
</html>
|
Output:
tag name selector
List of all jQuery Selectors
The following table shows the various types of selectors available in jQuery:
| Syntax |
Description |
| $(“#id-name”) |
Specifies an id for an element to be selected. |
| $(“.class-name”) |
Specifies the class for an element to be selected. |
| $(“element-name”) |
Select and modify HTML elements based on the element name. |
| $(“*”) |
It is used to select all elements. |
| $(“.name1, .name2) |
It selects all elements with class name1 and name2. |
| $(“p:first”) |
It is used to select the first <p> element. |
| $(“p:last”) |
It is used to select the last <p> element. |
| $(“p:first-child”) |
It is used to select all <p> elements that are the first child of their parent. |
| $(“p:last-child”) |
It is used to select all <p> elements that are the last child of their parent. |
| $(“p:only-child”) |
It is used to select all <p> elements that are the only child of their parent. |
| $(“p:only-of-type”) |
It is used to select all <p> elements that are the only child of its type of their parent. |
| $(“:header”) |
It is used to select all header elements. |
| $(“p:hidden”) |
It is used to select all hidden <p> element. |
| $(“:animated”) |
It is used to select all animated elements. |
| $(“:root”) |
It is used to select the document’s root element. |
| $(“:focus”) |
It is used to select an element if it is is currently focused. |
| $(“:has(p)”) |
It is used to select All div elements are selected that have a p element. |
| $(“:empty”) |
The empty elements are selected. |
| $(“[href]”) |
All elements with a href attribute are selected. |
| $(“[href=’gfg.css’]”) |
All elements with a href attribute value equal to gfg.css are selected. |
| $(“[title^=’Hardy’]”) |
All elements with a title attribute value starting with “Hardy” are selected. |
| $(“[title~=’Good’]”) |
All elements with a title attribute value containing the specific value “Good” are selected. |
| $(“[title*=’Good’]”) |
All elements with a title attribute value containing the word “Good” are selected. |
| $(“:input”) |
All input elements are selected. |
| $(“:radio”) |
All input elements with type=”radio” are selected. |
| $(“:password”) |
All input elements with type=”password” are selected. |
| $(“:text”) |
All input elements with type=”text” are selected. |
| $(“:checkbox”) |
All input elements with type=”checkbox” are selected. |
| $(“:submit”) |
All input elements with type=”submit” are selected. |
| $(“:reset”) |
All input elements with type=”reset” are selected. |
| $(“:file”) |
All input elements with type=”file” are selected. |
| $(“:button”) |
All input elements with type=”button” are selected. |
| $(“:image”) |
All input elements with type=”image” are selected. |
| $(“:disabled”) |
All disabled input elements are selected. |
| $(“:enabled”) |
All enabled input elements are selected. |
| $(“:checked”) |
All checked input elements are selected. |
| $(“:selected”) |
All selected input elements are selected. |
| $(“parent descendant”) |
It is used to select all <p> elements that are descendants of a <div> element. |
| $(“element + next”) |
The <p> elements that are next to each <div> elementis selected. |
| $(“element ~ sibling”) |
All <p> elements that are siblings of a <div> elements are selected. |
| $(“ul li:eq(1)”) |
It will select the second element in a list (index starts at 0). |
| $(“ul li:gt(3)”) |
The list elements with an index greater than 3 are selected. |
| $(“ul li:lt(2)”) |
The list elements with an index less than 2 are selected. |
| $(“input:not(:empty)”) |
All input elements that are not empty are selected. |
| $(“tr:even”) |
it will select all even tr elements |
| $(“tr:odd”) |
it will select all odd tr elements. |
Share your thoughts in the comments
Please Login to comment...