jQuery Selectors
Selectors for jQuery are one of the largest sections of the library jQuery.
Selecting and manipulating HTML elements is possible with jQuery selectors (s).
jQuery selectors are used to "find" (or select) HTML components based on their name, id, classes, types, attributes, attribute values, and many other criteria. It is built on the current CSS Selectors and includes some of its own unique selectors.
The dollar "$" symbol and parenthes begin all selections in jQuery : $ ().
The element Selector
Elements are selected using the jQuery element selector based on their names.
On a page like this, you may pick every p element, div element, and so on.
$("p")
$("div") Example :- Clicking on a button will hide all h4 elements :
<!DOCTYPE html>
<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 () {
$("h4").hide();
});
});
</script>
</head>
<body>
<h2>This is a h2 heading</h2>
<h4>This is a h4 heading</h4>
<h4>This is also another h4 heading</h4>
<button>Click me to hide ALL h4 heading</button>
</body>
</html> Output :-
This is a h2 heading
This is a h4 heading
This is also another h4 heading
The #id Selector
The #id selector uses the id property of an HTML tag to search for the particular item.
Because an id should be unique inside a page or document, the #id selector should be used when looking for a single, distinct element.
To retrieve an item with a certain id, enter a hash character, followed by the
Example :- The element with id="test" is hidden by the user clicking on a button :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#b2").click(function () {
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
</html> Output :-
This is a heading
This is a paragraph.
This is another paragraph.
Related Links
The .class Selector
The .class selector in jQuery looks for elements that have a certain CSS class.
To discover element with a certain class, type a period followed by the class name :
$(".test") Example :- If a user clicks on a button, all class="test" elements are hidden.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#b3").click(function () {
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Output :-
This is a heading
This is a paragraph.
This is another paragraph.
More Examples of jQuery Selectors
| Syntax | Description |
|---|---|
| $("*") | All of the elements are selected |
| $(this) | The current HTML element is chosen. |
| $("p.intro") | All p elements with the class="intro" are selected. |
| $("p:first") | The first p element are Selected |
| $("ul li:first") | The first li element of the first ul are Selected |
| $("ul li:first-child") | The first li element of every ul are Selected |
| $("[href]") | All elements with an href attribute are Selected |
| $("a[target='_blank']") | All a elements with a target attribute value equal to "_blank" are Selected |
| $("a[target!='_blank']") | All a elements with a target attribute value NOT equal to "_blank" are Selected |
| $(":button") | All button elements and input elements of type="button" are Selected |
| $("tr:even") | All even tr elements are Selected |
| $("tr:odd") | All odd tr elements are Selected |
To see how the various selectors work, see our jQuery Selector Tester.
Related Links
Functions In a Separate File
You can set your jQuery functions in a separate .js file if there are many pages on your website that you want your jQuery functions to be easily maintained.
When in this tutorial we show jQuery, the features are introduced straight to the head area. It is recommended, however, to put them in a different file, such as this (use src to refer the file.js) :
Example :-
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>