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 : $ ().

You can also search for these topics, jquery selectors cheat sheet, jquery selector all elements with class, jquery selector attribute with or without multiple values, select multiple ids, starts with id, has attribute, use of the multiple classes and conditions using jquery selectors, data attribute, jquery value of the selector.

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

You can also search for these topics, element selector using jquery, jquery element selector by name, jquery element selector multiple, jquery element to selector first, jquery element selector with variable.

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 HTML element id:

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.

You can also search for these topics, jquery id selector, how to find the id selector in jquery , working of jquery id selector, jquery multiple the id selector example, syntax for jquery id selector example.

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.

You can also search for these topics, jquery class selector value, class selector selector click event using jquery, multiple classes using jquery class selector, syntax for jquery class selector example.

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.

You can also search for these topics, jquery selectors syntaxes, description for jquery syntaxes, jquery different selectors, list the jquery selectors syntax, Examples of jQuery Selectors.

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>

You can also search for these topics, how to call function from another file in jquery, how to save jquery file, call the jquery function in a separate file, jquery to execute same function in a separate file, how to load the jquery load function in a separate file, check the function in a separate file in jquery.