What are different jQuery Selectors ?

Selectors used to select and manipulate HTML element(s).

These "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes etc.

All selectors starts with the dollar sign and parentheses: $()

Element Selector

It selects elements based on the element name, Like $("p") will select all <p> elements on a page.

Example : Hide all <p> elements when user click a button

$(document).ready(function() {

 $("button").click(function() {

   $("p").hide();

 });

});

#id Selector

It uses the id attribute of an HTML tag to find the specific element.

Here, the id should be unique in the page because it finds a single / unique element.

Use a hash character, followed by the id of the element, Like $("#test")

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

$(document).ready(function() {

 $("button").click(function() {

   $("#test").hide();

 });

});

.class Selector

It finds elements with a specific class.

Write a period character, followed by the name of the class, Like $(".test")

Example : Elements with class "test" will be hidden, when user click on a button

$(document).ready(function() {

 $("button").click(function() {

    $(".test").hide();

 });

});