What Are jQuery Selectors?
jQuery is the most popular and widely used Javascript library that lets you simplify traversal and manipulate the HTML DOM tree. It offers you easy access to elements or group of elements in the DOM. The official website of jQuery calls it a powerful tool.
When you want to select or manipulate one or more than one HTML element, jQuery selectors are used. It lets you find out matching elements from DOM using expressions. It is interesting to note that jQuery selectors are linked to CSS selectors.
There are multiple selectors based on element, id, class, types, attributes, and many more.
What Does jQuery Selectors Do?
jQuery selectors play a very significant role in the JavaScript library. They are basically functions that allow you to select elements based on the given criteria from DOM.
These unique selectors are used to find and manipulate HTML elements based on various attributes or attribute values like name, id, class, HTML tags, etc.
Thus making it easier for you to find and access elements from DOM.
How To Use The jQuery Selectors?
It is very easy to use jQuery selectors. They are written within the <script> tag. All the jQuery selectors start with a dollar sign and contain attributes within the parentheses: $(). Let us take a look at the syntax and then discuss an example using the "this" selector.
Syntax:
$(attribute)
Example:
$(*)
Let us see how to hide the current element using the “this” selector.
Code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<h2>Example to use jQuery selector using "this" Selector</h2>
<p>"this" selector selects the current HTML element.</p>
<button>Hide me</button>
</body>
</html>You can explore more examples on your own at CodePen. From the code, you know what the output will be. Let's take a look:
What Are Various jQuery Selectors?
jQuery selectors provide multiple ways to select and manipulate elements. Here are some important jQuery selectors that can be helpful to a web developer:
1.The #id
Selector:
It uses the attribute “id” of the HTML tag to select
elements.
Syntax: $("#id_name")
2.The .class
Selector:
It selects elements with a specific class.
Syntax: $(".class_name")
3.The “*”
Selector:
This selector is used to select all the elements.
Syntax:
$("*")
4.The “this”
Selector:
This selector is used to select the current element in HTML.
Syntax: $(this)
5.The “p:first”
Selector:
It is used to select first element in <p> tag.
Syntax:
$("p:first")
6.The “p:test”
Selector:
It is used to select all elements in <p> tag with
class=”test”.
Syntax:
$("p.test")
7.The “:button”
Selector:
It selects all <button> elements as well as
<input> elements of type="button"
Syntax: $(":button")
8.The “tr:odd”
Selector:
It is used to select all odd <tr> elements.
Syntax:
$("tr:odd")
9.The “tr:even”
Selector:
This selector is used to select all even <tr>
elements.
Syntax:
$("tr:even")
10.The “[href]”
Selector:
It is used to select all elements with attribute “href”.
Syntax:
$("[href]")
11.The "ul
li:first" Selector:
It selects the first <li> element of the first
<ul> tag.
Syntax: $("ul li:first")
12.The
"a[target='_blank']" Selector:
This selector selects all <a> elements with an
attribute value equal to "_blank"
Syntax: $("a[target='_blank']")
Let us see an example to select even <tr> elements in
a table using jQuery “tr:even” selector.
Code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr:even").css("background-color", "lightblue");
});
</script>
</head>
<body>
<h1>Example to use "tr:even" selector in jQuery</h1>
<table border="1">
<tr>
<th>Product</th>
<th>Id</th>
</tr>
<tr>
<td>Book</td>
<td>1001</td>
</tr>
<tr>
<td>Pen</td>
<td>1002</td>
</tr>
<tr>
<td>Scale</td>
<td>1003</td>
</tr>
<tr>
<td>Pencil</td>
<td>1004</td>
</tr>
<tr>
<td>Bag</td>
<td>1005</td>
</tr>
</table>
</body>
</html>Here's how the output will be:
Conclusion
In this tutorial, we learned what is jQuery selectors. We also learned how to use jQuery selectors and its various types. We saw how to hide the current element using “this” selector and to select even elements using the <tr> tag. You can perform various such operations on elements using different jQuery selectors.
To learn more jQuery functions and codes, subscribe to our blog! To know about jQuery migrate, visit our previous article!
