W3Schools.com

jQuery Selectors

jQuery selectors allow you to select and manipulate HTML elements as a group or as a single element.

jQuery Selectors

In the previous chapter we looked at some examples of how to select different HTML elements.

It is a key point to learn how jQuery selects exactly the elements you want to apply an effect to.

jQuery selectors allow you to select HTML elements (or groups of elements) by element name, attribute name or by content.

lamp In HTML DOM terms:

Selectors allow you to manipulate DOM elements as a group or as a single node.

jQuery Element Selectors

jQuery uses CSS selectors to select HTML elements.

$("p") selects all <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]") select all elements with an href attribute.

$("[href='#']") select all elements with an href value equal to "#".

$("[href!='#']") select all elements with an href attribute NOT equal to "#".

$("[href$='.jpg']") select all elements with an href attribute that ends with ".jpg".

jQuery CSS Selectors

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

The following example changes the background-color of all p elements to yellow:

Example

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

Try it yourself »

Some More Examples

Syntax Description
$(this) Current HTML element
$("p") All <p> elements
$("p.intro") All <p> elements with class="intro"
$("p#intro") All <p> elements with id="intro"
$("p#intro:first") The first <p> element with id="intro"
$(".intro") All elements with class="intro"
$("#intro") The first element with id="intro"
$("ul li:first") The first <li> element of the first <ul>
$("ul li:first-child") The first <li> element of every <ul>
$("[href$='.jpg']") All elements with an href attribute that ends with ".jpg"
$("div#intro .head") All elements with class="head" inside a <div> element with id="intro"

Use our excellent jQuery Selector Tester to experiment with the different selectors.

For a full reference please go to our jQuery Selectors Reference


WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
$7.95/mo SEO Hosting
Premium Website Design
WEB BUILDING
XML Editor - Free Trial!
FREE Website BUILDER
Free Website Templates Free CSS Templates
Make Your Own Website
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE