jQuery - Selectors

jQuery Selectors are used to select one or more HTML elements and once the element is selected then we can perform various operation on that. jQuery Selectors are used to select and manipulate HTML elements as part of jQuery library.

All jQuery selectors start with a dollor sign and parenthesis e.g. $(). It is known as the factory function.

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

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

$("p")

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

Example

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

Usage of Selectors:

Name:  It selects all elements that match with the given element name.

#ID: It selects a single element that matches with the given id.

.Class: It selects all elements that match with the given class.

Universal(*): It selects all elements available in a DOM.

Examples of jQuery selectors

$("*") Selects all elements

$(this) Selects the current HTML element

$("p.intro") Selects all <p> elements with class="intro"

$("p:first") Selects the first <p> element

$("ul li:first") Selects the first <li> element of the first <ul>

$("ul li:first-child") Selects the first <li> element of every <ul>

$("[href]") Selects all elements with an href attribute

$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"

$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank"

$(":button") Selects all <button> elements and <input> elements of type="button"

$("tr:even") Selects all even <tr> elements

$("tr:odd") Selects all odd <tr> elements