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 Reference

jQuery selectors allow you to select and manipulate HTML element(s).


jQuery Selectors

This section contains a comprehensive list of selectors belonging to the latest jQuery JavaScript library.

All the selectors are grouped into categories.


Element Selectors

Selector Example Example description
* $("*") Selects all elements (universal selector)
#id $("#demo") Selects a single element with id="demo"
.class $(".demo") Selects all elements with class="demo"
element $("p") Selects all <p> elements
selector1, selector2 $("p, div") Selects all <p> elements and all <div> elements

Hierarchy Selectors

Selector Example Example description
ancestor descendant $("div p") Selects all <p> elements inside <div> elements
parent > child $("div > p") Selects all <p> elements where the parent is a <div> element
prev + next $("div + p") Selects all <p> elements that are placed immediately after <div> elements
prev ~ siblings $("div ~ p") Selects all <p> elements that are siblings of a <div> element

Attribute Selectors

Selector Example Example description
[attribute] $("[target]") Selects all elements with a target attribute
[attribute=value] $("a[href='CSS3']") Selects all <a> elements with a href attribute value equal to "CSS3"
[attribute!=value] $("a[href!='CSS3']") Selects all <a> elements with a href attribute value not equal to "CSS3"
[attribute~=value] $("[alt~=Parrot]") Selects all elements with alt attribute containing the word "Parrot"
[attribute|=value] $("[lang|=en]") Selects all elements with a lang attribute value starting with "en"
[attribute^=value] $("a[href^=https]") Selects every <a> element whose href attribute value begins with "https"
[attribute$=value] $("a[href$='.org']") Selects every <a> element whose href attribute value ends with ".org"
[attribute*=value] $("a[href*=example]") Selects every <a> element whose href attribute value contains the substring "example"

Basic Filter Selectors

Selector Example Example description
:first $("p:first") Selects the first <p> element
:last $("p:last") Selects the last <p> element
:even $("tr:even") Selects all even <tr> elements, zero-indexed
:odd $("tr:odd") Selects all odd <tr> elements, zero-indexed
:not() $("p:not(.demo)") Select all <p> elements except those with class="demo"
:eq() $("tr:eq(2)") Select the 3rd <tr> element within the matched set, zero-based index
:lt() $("tr:lt(5)") Select all <tr> elements with an index number less than 5, zero-based index
:gt() $("tr:gt(5)") Select all <tr> elements with an index number higher than 5, zero-based index
:header $(":header") Selects all elements that are headers, like <h1>, <h2>, <h3> and so on
:lang() $("div:lang(en)") Selects all <div> elements that have a language value "en" i.e. lang="en", lang="en-us" etc
:root $(":root") Selects the document's root element which is always <html> element in a HTML document
:animated $(":animated") Select all elements that are animating at the time the selector is run

Child Selectors

Selector Example Example description
:first-child $("p:first-child") Selects all <p> elements that are the first child of their parent
:last-child $("p:last-child") Selects all <p> elements that are the last child of their parent
:only-child $("p:only-child") Selects all <p> elements that are the only child of their parent
:first-of-type $("p:first-of-type") Selects all <p> elements that are the first <p> element of their parent
:last-of-type $("p:last-of-type") Selects all <p> elements that are the last <p> element of their parent
:only-of-type $("p:only-of-type") Selects all <p> elements that have no siblings with the same element name
:nth-child(n) $("p:nth-child(3)") Selects all <p> elements that are the 3rd child of their parent
:nth-last-child(n) $("p:nth-last-child(4)") Selects all <p> elements that are the 4th-child of their parent, counting from the last element to the first
:nth-of-type(n) $("span:nth-of-type(3)") Selects all <span> elements that are the 3rd <span> element of their parent
:nth-last-of-type(n) $("span:nth-last-of-type(4)") Selects all <span> elements that are the 4th <span> element of their parent, counting from the last element to the first

Content Filter Selectors

Selector Example Example description
:contains() $("p:contains('is')") Selects all <p> elements that contains the text "is"
:empty $(":empty") Selects all elements that are empty i.e that have no children including text
:has() $("p:has(span)") Selects all <p> elements which contain at least one <span> element
:parent $(":parent") Select all elements that have at least one child node either an element or text

Form Selectors

Selector Example Example description
:input $(":input") Selects all input, textarea, select and button elements
:text $(":text") Selects all input elements with type="text"
:password $(":password") Selects all input elements with type="password"
:radio $(":radio") Selects all input elements with type="radio"
:checkbox $(":checkbox") Selects all input elements with type="checkbox"
:button $(":button") Selects all input and button elements with type="button"
:submit $(":submit") Selects all input and button elements with type="submit"
:reset $(":reset") Selects all input and button elements with type="reset"
:image $(":image") Selects all input elements with type="image"
:file $(":file") Selects all input elements with type="file"
:enabled $(":enabled") Selects all elements that are enabled
:disabled $(":disabled") Selects all elements that are disabled
:selected $(":selected") Selects all elements that are selected, only works for <option> elements
:checked $(":checked") Selects all elements that are checked or selected, works for checkboxes, radio buttons, and select elements
:focus $(":focus") Selects element if it is currently focused

Visibility Selectors

Selector Example Example Description
:hidden $("p:hidden") Selects all <p>elements that are hidden
:visible $("p:visible") Selects all <p> elements that are visible