The most important functionality of jQuery is provided by it’s Selectors. This tutorial will explain jQuery Selectors with simple examples covering all the three standard selectors.
jQuery Selectors
jQuery Selectors are used to select HTML element(s) from an HTML document. Consider an HTML document is given and you need to select all the <div> from this document. This is where jQuery Selectors will help.
jQuery Selectors can find HTML elements (ie. Select HTML elements) based on the following:
- HTML element Name
- Element ID
- Element Class
- Element attribute name
- Element attribute value
- Many more criteria
The jQuery library harnesses the power of Cascading Style Sheets (CSS) selectors to let us quickly and easily access elements or groups of elements in the Document Object Model (DOM).
jQuery Selectors works in very similar way on an HTML document like an SQL Select Statement works on a Database to select the records.
jQuery Selector Syntax
Following is the jQuery Selector Syntax for selecting HTML elements:
$(document).ready(function(){
$(selector)
});
A jQuery selector starts with a dollar sign $ and then we put a selector inside the braces (). Here $() is called factory function, which makes use of following three building blocks while selecting elements in a given document:
| Selector Name | Description |
|---|---|
| The element Selector | Represents an HTML element name available in the DOM. For example $(‘p’) selects all paragraphs <p> in the document. |
| The #id Selector | Represents a HTML element available with the given ID in the DOM. For example $(‘#some-id’) selects the single element in the document that has some-id as element Id. |
| The .class Selector | Represents a HTML elements available with the given class in the DOM. For example $(‘.some-class’) selects all elements in the document that have a class of some-class. |
All the above selectors can be used either on their own or in combination with other selectors. All the jQuery selectors are based on the same principle except some tweaking.
The element Selector
The jQuery element selector selects HTML element(s) based on the element name. Following is a simple syntax of an element selector:
$(document).ready(function(){
$("Html Element Name")
});
Please note while using element name as jQuery Selector, we are not giving angle braces alongwith the element. For example, we are giving only plain p instead of <p>.
Examples
Following is an example to select all the <p> elements from an HTML document and then change the background color of those paragraphs. You will not see any <p> element in the output generated by this example.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("p").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>jQuery element Selector</h1>
<p>This is p tag</p>
<span>This is span tag</span>
<div>This is div tag</div>
</body>
</html>
The #id Selector
The jQuery #id selector selects an HTML element based on the element id attribute. Following is a simple syntax of a #id selector:
$(document).ready(function(){
$("#id of the element")
});
To use jQuery #id selector, you need to make sure that id attribute should be uniquely assigned to all the DOM elements. If your elements will have similar ids then it will not produce correct result.
Examples
Following is an example to select the <p> element whose id is foo and change the background color of those paragraphs.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("#foo").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>jQuery #id Selector</h1>
<p id="foo">This is foo p tag</p>
<span id="bar">This is bar span tag</span>
<div id="bill">This is bill div tag</div>
</body>
</html>
The .class Selector
The jQuery .class selector selects HTML element(s) based on the element class attribute. Following is a simple syntax of a .class selector:
$(document).ready(function(){
$(".class of the element")
});
Because a class can be assigned to multiple HTML elements with in an HTML document, so it is very much possible to find out multiple elements with a single .class selector statement.
Examples
Following is an example to select all the elements whose class is foo and change the background color of those elements.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$(".foo").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>jQuery .class Selector</h1>
<p class="foo">This is foo p tag</p>
<p class="foo">This is one more foo p tag</p>
<span class="bar">This is bar span tag</span>
<div class="bill">This is bill div tag</div>
</body>
</html>