Types of Selectors in jQuery (All Types Explained With Example)

The jQuery selector .class looks for elements that have a particular class.

To discover components belonging to a specific class, type a period character followed by the class name:

$(".test")

Example of Class Selector in jQuery

The elements with class="test" will be hidden when a user clicks on a button:

$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});

The element selector in jQuery selects elements based on their names.

You can do something like this to select all p> elements on a page:

$("p")

Example of element selector in jQuery

All

elements are hidden when a user clicks a button:

$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});

The id selector in jQuery looks for a specific element using the id attribute of an HTML tag.

The id should be unique; the #id selector should look for a single, distinct element.

Write a hash character followed by the HTML element's id to find a piece with a specific id:

$("#test")

Example of jQuery id Selector

The element with the id="test" will be hidden when a user clicks on a button:

$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});