jQuery Selectors

Selectors allow you to perform operations on groups of elements or a single element.

jQuery Selectors

In the previous chapters, we have shown some examples of how to select HTML elements.

The key point is to learn how jQuery selectors accurately select the elements you want to apply effects to.

jQuery element selectors and attribute selectors allow you to select HTML elements by tag name, attribute name, or content.

Selectors allow you to perform operations on a group of HTML elements or a single element.

In HTML DOM terminology:

Selectors allow you to perform operations on a group of DOM elements or a single DOM node.

jQuery Element Selectors

jQuery uses CSS selectors to select HTML elements.

$("p") selects <p> elements.

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

$("p#demo") selects all <p> elements with id="demo".

jQuery Attribute Selectors

jQuery uses XPath expressions to select elements with given attributes.

$("[href]") selects all elements with href attributes.

$("[href='#']") selects all elements with href values equal to "#".

$("[href!='#']") selects all elements with href values not equal to "#".

$("[href$='.jpg']") selects all elements with href values ending with ".jpg".

jQuery CSS Selectors

jQuery CSS selectors can be used to change the CSS properties of HTML elements.

The following example changes the background color of all <p> elements to red:

Example

$("p").css("background-color","red");

Try it yourself

More selector examples

Syntax Description
$(this) the current HTML element
$("p") all <p> elements
$("p.intro") all <p> elements with class="intro"
$(".intro") all elements with class="intro"
$("#intro") the element with id="intro"
$("ul li:first") the first <li> element of each <ul>
$("[href$='.jpg']") all href attributes with property values ending with ".jpg"
$("div#intro .head") all elements with class="head" within the <div> element with id="intro"

For a complete reference manual, please visit our jQuery Selector Reference Manual.