JQuery selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to “find” (or select) HTML elements based on their name, id, classes, types, attributes, values of

attributes and much more. It’s based on the existing CSS Selectors, and in addition, it has some own custom selectors.

All selectors in jQuery start with the dollar sign and parentheses: $().

The element Selector

The JQuery element selector selects elements based on the element name.

You can select all <p> elements on a page like this:

$("p")

Example

When a user clicks on a button, all <p> elements will be hidden:

Example

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

The #id Selector

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.

An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.

To find an element with a specific id, w rite a hash character, followed by the id of the HTML element:

$("#test")

Example

When a user clicks on a button, the element with id=”test” will be hidden:

Example

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

jQuery.class selector

The .class selector selects all elements with the specific class.

The class refers to the class attribute of an HTML element.

The class attribute is used to set a particular style for several HTML elements.

Do not start a class attribute with a number. It may cause problems in some browsers.

Syntax

$(".class")

Example

Select all elements with class “intro”:

$(".intro")