jQuery Selectors References with Examples

jQuery Selectors allow you to select and manipulate HTML elements as a single element or group of elements. To Understanding jQuery selectors is the key to using the jQuery library most effectively. These selectors help you to understand jQuery concept.

Following are all jQuery Selectors,

Syntax
jQuery Selector typically follows this syntax,

$(selector).Method();

You can also perform multiple jQuery operations by using jQuery chaining process,

$(selector).Method1().Method2().Method3();

jQuery Basic Selectors

Selector Example Description
element $("p") Selected All <p> elements.
element, element $("p, h3") Selected All <p> and <h3> elements.
* $("*") Selects all elements
#id $("#heading") Selects element whose id="heading"
.class $(".param") Selects all the elements with class="param"
.class, .class $(".param, .hfirst") Selects all the elements with class="param" and class="hfirst"

jQuery Positional Selectors

Selector Example Description
:first $("p:first") Selects first <p> element in a DOM hierarchy
:last $("p:last") Selects last <p> element in a DOM hierarchy
:even $("tr:even") Selects all even rows
:odd $("tr:odd") Selects all odd rows
 
:eq(n) $("p:eq(2)") Selects nth element starting from index 0
:gt(n) $("p:gt(2)") Selects elements with an index greater than nth elements
:lt(n) $("p:lt(2)") Selects elements with an index less than nth elements
 
:first-child $("p:first-child") Selects all <p> elements which is the first child of their parent element
:last-child $("p:last-child") Selects all <p> elements which is the last child of their parent element
:first-of-type $("p:first-of-type") Selects all <p> elements which is the first <p> element of their parent element
:last-of-type $("p:last-of-type") Selects all <p> elements which is the last <p> element of their parent element
:nth-child(n) $("p:nth-child(2)") Selects all <p> elements which is the 2nd child of its parent element
:nth-last-child(n) $("p:nth-last-child(2)") Selects all <p> elements which is the 2nd child of its parent element from the last child
:nth-of-type(n) $("p:nth-of-type(2)") Selects all <p> elements which are the 2nd <p> element of its parent element
:nth-last-of-type(n) $("p:nth-last-of-type(2)") Selects all <p> elements which are the 2nd <p> element of its parent element from the last child
:only-child $("p:only-child") Selects all <p> elements which are the only child of its parent element
:only-of-type $("p:only-of-type") Selects all <p> elements which are the only child of their type of its parent element

jQuery Relational Selectors

Selector Example Description
parent child $("div p") Selects all <p> elements that are descendants of <div> element
parent > child $("div > p") Selects all <p> elements that are direct child of <div> element
element + next $("div + p") Selects all <p> elements that are immediately preceded by a sibling of <div> element
element ~ siblings $("div ~ p") Selects all <p> elements that are preceded by any sibling of <div> element

jQuery Custom Selectors

Selector Example Description
:animated $("div:animated") Select all elements that are currently animated
:contains(text) $("p:contains('paragraph')") Select all elements which contains the text "paragraph"
:empty $("p:empty") Select all elements that are empty
:focus $("input:focus") Select element that are currently has focus
:has $("p:has('span')") Select all <p> elements that have a <span> element
:header $(":header") Select all headers <h1>, <h2>, .. elements
:hidden $("p:hidden") Selects all hidden <p> elements
:lang(language) $("p:lang('de')") Selects all elements with the language attribute having specified value.
:not(selector) $("input:not(:checked)") Select all <input> elements that are not checked
:parent $("td:parent") Selects all elements of <tr> that are parents of non-empty element children
:root $("p:root") Selects document root element
:visible $("p:visible") Selects all visible <p> elements

jQuery Attributes Selectors

Selector Example Description
[attribute] $("[class]") Select all elements with the class attribute
[attribute=value] $("p[class='param']") Select all <p> elements with a class attribute, whose value equal to 'param'
[attribute!=value] $("p[class!='param']") Select all <p> elements which does not have class attribute or value does not equal to 'param'
[attribute^=value] $("p[class^='par']") Selects all <p> elements with a class attributes, whose value start with 'par'
[attribute$=value] $("[class$='ram']") Select all <p> elements with a class attribute, whose value ends with 'ram'
[attribute|=value] $("p[class|='param']") Selects all <p> elements whose class attributes are either equal to 'param' or starting with 'param' string followed by a hyphen (-)
[attribute~=value] $("p[class!='heading']") Selects all <p> elements whose class attributes, whose value containing specific 'heading' word
[attribute*=value] $("p[class*='heading']") Selects all <p> elements whose class attributes, whose value containing 'heading' word

jQuery Form Elements Selectors

Selector Example Description
:input $(":input") Select all <input> elements
:text $(":text") Select all <input> elements whose type='text'
:password $(":password") Select all <input> elements whose type='password'
:radio $(":radio") Select all <input> elements whose type='radio'
:checkbox $(":checkbox") Select all <input> elements whose type='checkbox'
:button $(":button") Select all <input> elements whose type='button'
:reset $(":reset") Select all <input> elements whose type='reset'
:submit $(":submit") Select all <input> elements whose type='submit'
:image $(":image") Select all <input> elements whose type='image'
:file $(":file") Select all <input> elements whose type='file'
:enabled $(":enabled") Select all enabled <input> elements
:disabled $(":disabled") Select all disabled <input> elements
:selected $(":selected") Select all selected <input> elements
:checked $(":checked") Select all checked <input> elements