jQuery Query Selector
In jQuery we do not select a selector via the querySelector() or querySelectorAll() method. These ways are defined in JavaScript, and jQuery is still on the primitive path of individually denoting selectors based on the HTML attribute id and class.
Here, in the following content, we will examine how the querySelector() method works in the case of jQuery. jQuery will not respond to this method, but we will see the process in a jQuery way.
Use id and class Selector
When we consider id as a selector, it is required to put the # sign before mentioning the id name as the selector. This is the identification carrier to say it is an id.
Also, in the case of class, we need to use . before adding the class name as the selector. You can also use other ids, classes, or elements to define features explicitly in the care of other selectors.
Let’s see a demonstration.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>id selector</title>
</head>
<body>
<div id="pink" style="height: 100px; width: 100px">
<div class="purple" style="height: 50px; width: 50px"></div>
<div id="buff" style="height:60px"></div>
<button onclick="btn()">Click</button>
<script>
function btn(){
$("#pink").css("background-color", "pink");
$(".purple").css("background-color", "purple");
}
</script>
</div>
</body>
</html>
Output:
In this regard, we have selected two div elements, and both have their identity tracer. The parent div has an associated id, whereas a class explicitly defines the second div.
We could have mentioned the class and id together. Let’s see how it can be done.
Code Snippet 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>id selector</title>
</head>
<body>
<div id="pink" style="height: 100px; width: 100px">
<div class="blue" style="height: 50px; width: 50px"></div>
<div class="purple" style="height: 50px; width: 50px"></div>
</div>
<div id="buff" style="height:40px"></div>
<button onclick="btn()">Click</button>
<script>
function btn(){
$("#pink").css("background-color", "pink");
$("#pink .purple").css("background-color", "purple");
$('#pink .blue').css("background-color", "powderblue");
}
</script>
</div>
</body>
</html>
Output 2:
Use of :eq() and Other Filter-Based Selectors
Even though in jQuery, we do not have the querySelectorAll() method, we can explicitly define our specific selections. The elements, class, and id are indexed when there is more than one entry.
Only one entry would be counted as the [0]th indexed element.
So, here we will demonstrate the use case of the :eq() extension of jQuery and the :odd() filter to output the exact change we wish to make in our page flow.
Multiple other conventions are available to select the selectors, and you might pay a visit to the article almost similar to this article’s concept.
Let’s dive into the code fence.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>id selector</title>
</head>
<body>
<table border=2>
<tr><td>D0</td><td>D1</td></tr>
<tr><td>D2</td><td>D3</td></tr>
</table>
<div id="buff" style="height:10px"></div>
<button onclick="btn()">Click</button>
<script>
function btn(){
$("td:eq(2)").css("background-color", "powderblue");
$("td:odd").css("background-color", 'violet');
}
</script>
</div>
</body>
</html>
Output:
The 2nd element of the table data is configured differently. And in this case, we used the :eq() to have the index position.
Also, it is to be noted the indexing starts from 0. On the odd() indexes of the table data, we hued a different shade to understand the difference between the selector methods and indexes.
