jQuery Tutorial
jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events
jQuery Effects
jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animation jQuery stop() jQuery Callback jQuery Chaining
jQuery Manipulation
jQuery Get/Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions
jQuery Traversing
jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering
jQuery AJAX
jQuery AJAX Intro jQuery Load jQuery Get/Post jQuery AJAX Events
jQuery Misc
jQuery noConflict() jQuery Filters
jQuery References
jQuery Reference jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Miscellaneous jQuery Properties

jQuery Selectors

The most basic concept of jQuery is to "select some elements and do something with them".

jQuery selector enables you to "find" (or select) HTML elements in your web page.

jQuery supports most CSS3 selector, as well as some non-standard selectors.

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


The element Selector

The jQuery element selector can be used to select elements based on the element name.

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

$("p")

The following jQuery code will select and highlight all the <p> elements when a user clicks on a button:

Run code

The #id Selector

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

The id of an element should be unique within a page, so the id selector is used to select one unique element.

To find an element with a specific id, write a hash (#) character, followed by the id of the HTML element:

$("#demo")

The following jQuery code will select and highlight the element with id="demo" when a user clicks on a button:

Run code

The .class Selector

The jQuery .class selector finds elements with a specific class name.

To find elements with a specific class, write a period (.) character, followed by the name of the class:

$(".demo")

The following jQuery code will select and highlight all the elements with class="demo" when a user clicks on a button:

Run code

Multiple Selectors

You can select many selectors if you like. Just separate the selectors with a comma.

The multiple selector selects the combined results of all the specified selectors:

$("selector1, selector2, selectorN")

The following jQuery code will select every <h2>, <div> and <span> elements:

Run code

This is useful when you want to do same things to different selectors.


Examples of jQuery Selectors

jQuery provides number of ways to select a specific HTML element(s).

Syntax Description Example
$("*") Selects all elements Demo
$(this) Selects the current element Demo
$("p.demo") Selects all <p> elements with class="demo" Demo
$("p:first") Selects the first <p> element Demo
$("div p:first-child") Selects the first <p> element of every <div> elements Demo
$("[target]") Select every element with target attribute Demo
$("a[href='/CSS3/']") Selects every <a> elements with href attribute value equal to "/CSS3/" Demo
$("a[href!='/CSS3/']") Selects every <a> elements with href attribute value NOT equal to "/CSS3/" Demo
$(":text") Selects all <input> elements of type="text" Demo
$("tr:even") Selects all even <tr> elements Demo
$("tr:odd") Selects all odd <tr> elements Demo

jQuery Selector Reference

For a complete selector reference, visit our jQuery Selectors Reference.