jQuery Selectors

Till now we have learnt 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.
Note: jQuery selectors allow you to select HTML elements (or groups of elements) by element name, attribute name or by content.

jQuery Element Selectors

jQuery uses CSS selectors to select HTML elements.
$("p") selects all

elements.
$("p.intro") selects all

elements with class="intro".
$("p#demo") selects all

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 red:
$("p").css("background-color","red");

Post Comment:

Notify me by email when others post comments to this article.

Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.

No HTML formatting and links to other web sites are allowed.

This is a strictly moderated site. Absolutely no spam allowed.

Name:	Sign In to fill automatically.
Email:	(Will not be published, but required to validate comment)
	Type the numbers and letters shown on the left.

JQuery Selectors

jQuery Selectors

jQuery Element Selectors

jQuery Attribute Selectors

jQuery CSS Selectors

Post Comment: