jQuery Selectors
The following section contains a brief overview of jQuery selectors.
jQuery Selectors Order by Alphabet
This section contains a comprehensive list of selectors belonging to the latest jQuery JavaScript library. All the selectors are grouped into categories.
Basic Selectors
| Selector | Example | Description |
|---|---|---|
* |
$("*") |
Selects all elements. |
#id |
$("#foo") |
Selects all elements with the id="foo". |
.class |
$(".bar") |
Selects all elements with the class="bar". |
element |
$("p") |
Selects all <p> elements. |
selector1, selector2, selectorN |
$("h1, p.bar, span") |
Selects all <h1> and <span>, but only that <p> elements that has the class="bar". |
Basic Filter Selectors
| Selector | 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. |
:eq() |
$("tr:eq(1)") |
Select the 2nd <tr> element within the matched set, zero-based index. |
:not() |
$("p:not(:empty)") |
Select all <p> elements that are not empty. |
:lt() |
$("ul li:lt(3)") |
Select all <li> elements at an index less than three within the matched set (i.e. selects 1st, 2nd, 3rd list elements), zero-based index. |
:gt() |
$("ul li:gt(3)") |
Select all <li> elements at an index greater than three within the matched set (i.e. selects 4th, 5th, ... list elements), zero-based index. |
:header |
$(":header") |
Selects all elements that are headers, like <h1>, <h2>, <h3> and so on. |
:lang() |
$(":lang(en)") |
Selects all 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 Filter Selectors
| Selector | 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. |
:nth-child(n) |
$("p:nth-child(3)") |
Selects all <p> elements that are the 3rd 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-last-child(n) |
$("p:nth-last-child(3)") |
Selects all <p> elements that are the 3rd-child of their parent, counting from the last element to the first. |
:nth-of-type(n) |
$("p:nth-of-type(2)") |
Selects all <p> elements that are the 2nd <p> element of their parent |
:nth-last-of-type(n) |
$("p:nth-last-of-type(2)") |
Selects all <p> elements that are the 2nd-child of their parent, counting from the last element to the first. |
Content Filter Selectors
| Selector | Example | Description |
|---|---|---|
:contains() |
$('p:contains("Hello")') |
Selects all <p> elements that contains the text "Hello". |
:empty |
$("td:empty") |
Selects all <td> elements that are empty i.e that have no children including text. |
:has() |
$("p:has(img)") |
Selects all <p> elements which contain at least one <img> element. |
:parent |
$(":parent") |
Select all elements that have at least one child node either an element or text. |
Form Selectors
| Selector | Example | Description |
|---|---|---|
:input |
$(":input") |
Selects all input, textarea, select and button elements (basically selects all form controls). |
: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. |
Attribute Selectors
| Selector | Example | Description |
|---|---|---|
[attribute] |
$("[href]") |
Selects all elements with a href attribute, with any value. |
[attribute="value"] |
$('a[target="_blank"]') |
Selects all <a> elements that have the target attribute with a value equal to "_blank". |
[attribute="value"] |
$('a[target!="_blank"]') |
Selects all <a> elements that don't have the target attribute, or if have don't with a value "_blank". |
[attribute$="value"] |
$('img[src$=".png"]') |
Selects all <img> elements that have the src attribute with a value ending with ".png". |
[attribute|="value"] |
$('a[hreflang|="en"]') |
Selects all <a> elements that have the hreflang attribute with a value equal to "en", or starting with "en" followed by a hyphen, like "en-US". |
[attribute^="value"] |
$('img[title^="Smiley"]') |
Selects all <img> elements that have the title attribute with a value beginning exactly with a "Smiley" string. |
[attribute~="value"] |
$('img[title~="Kites"]') |
Selects all <img> elements that have the title attribute with a value containing the word "Kites", delimited by spaces. |
[attribute*="value"] |
$('input[name*="male"]') |
Selects all <input> elements that have the name attribute with a value containing the substring "male". |
Hierarchy Selectors
| Selector | Example | Description |
|---|---|---|
parent > child |
$("ul > li") |
Selects all <li> elements that are direct child of their parent <ul> element. |
ancestor descendant |
$("form label") |
Selects all <label> elements that are descendant of their ancestor <form> element. |
prev + next |
$("h1 + p") |
Selects all <p> elements that are next i.e. immediately preceded to the <h1> elements. |
prev ~ siblings |
$("h1 ~ p") |
Selects all <p> elements that are siblings and follow after the <h1> elements. |
Visibility Filter Selectors
| Selector | Example | Description |
|---|---|---|
:hidden |
$("p:hidden") |
Selects all <p> elements that are hidden. |
:visible |
$("p:visible") |
Selects all <p> elements that are visible. |
This section contains a comprehensive list of selectors belonging to the latest jQuery JavaScript library. All the selectors are listed alphabetically.
| Selector | Example | Description |
|---|---|---|
* |
$("*") |
Selects all elements. |
#id |
$("#foo") |
Selects all elements with the id="foo". |
.class |
$(".bar") |
Selects all elements with the class="bar". |
element |
$("p") |
Selects all <p> elements. |
selector1, selector2, selectorN |
$("h1, p.bar, span") |
Selects all <h1> and <span>, but only that <p> elements that has the class="bar". |
ancestor descendant |
$("form label") |
Selects all <label> elements that are descendant of their ancestor <form> element. |
parent > child |
$("ul > li") |
Selects all <li> elements that are direct child of their parent <ul> element. |
prev + next |
$("h1 + p") |
Selects all <p> elements that are next i.e. immediately preceded to the <h1> elements. |
prev ~ siblings |
$("h1 ~ p") |
Selects all <p> elements that are siblings and follow after the <h1> elements. |
:animated |
$(":animated") |
Select all elements that are animating at the time the selector is run. |
[attribute] |
$("[href]") |
Selects all elements with a href attribute, with any value. |
[attribute="value"] |
$('a[target="_blank"]') |
Selects all <a> elements that have the target attribute with a value equal to "_blank". |
[attribute|="value"] |
$('a[hreflang|="en"]') |
Selects all <a> elements that have the hreflang attribute with a value equal to "en", or starting with "en" followed by a hyphen, like "en-US". |
[attribute*="value"] |
$('input[name*="male"]') |
Selects all <input> elements that have the name attribute with a value containing the substring "male". |
[attribute~="value"] |
$('img[title~="Kites"]') |
Selects all <img> elements that have the title attribute with a value containing the word "Kites", delimited by spaces. |
[attribute$="value"] |
$('img[src$=".png"]') |
Selects all <img> elements that have the src attribute with a value ending with ".png". |
[attribute!="value"] |
$('a[target!="_blank"]') |
Selects all <a> elements that don't have the target attribute, or if have don't with a value "_blank". |
[attribute^="value"] |
$('img[title^="Smiley"]') |
Selects all <img> elements that have the title attribute with a value beginning exactly with a "Smiley" string. |
:button |
$(":button") |
Selects all input and button elements with type="button". |
:checkbox |
$(":checkbox") |
Selects all input elements with type="checkbox". |
:checked |
$(":checked") |
Selects all elements that are checked or selected, works for checkboxes, radio buttons, and select elements. |
:contains() |
$('p:contains("Hello")') |
Selects all <p> elements that contains the text "Hello". |
:disabled |
$(":disabled") |
Selects all elements that are disabled. |
:empty |
$("td:empty") |
Selects all <td> elements that are empty i.e that have no children including text. |
:enabled |
$(":enabled") |
Selects all elements that are enabled. |
:eq() |
$("tr:eq(1)") |
Select the 2nd <tr> element within the matched set, zero-based index. |
:even |
$("tr:even") |
Selects all even <tr> elements, zero-indexed. |
:file |
$(":file") |
Selects all input elements with type="file". |
:first-child |
$("p:first-child") |
Selects all <p> elements that are the first child of their parent. |
:first-of-type |
$("p:first-of-type") |
Selects all <p> elements that are the first <p> element of their parent. |
:first |
$("p:first") |
Selects the first <p> element. |
:focus |
$(":focus") |
Selects element if it is currently focused. |
:gt() |
$("ul li:gt(3)") |
Select all <li> elements at an index greater than three within the matched set (i.e. selects 4th, 5th, ... list elements), zero-based index. |
:has() |
$("p:has(img)") |
Selects all <p> elements which contain at least one <img> element. |
:header |
$(":header") |
Selects all elements that are headers, like <h1>, <h2>, <h3> and so on. |
:hidden |
$("p:hidden") |
Selects all <p> elements that are hidden. |
:image |
$(":image") |
Selects all input elements with type="image". |
:input |
$(":input") |
Selects all input, textarea, select and button elements (basically selects all form controls). |
:lang() |
$(":lang(en)") |
Selects all elements that have a language value "en" i.e. lang="en", lang="en-us" etc. |
:last-child |
$("p:last-child") |
Selects all <p> elements that are the last child of their parent. |
:last-of-type |
$("p:last-of-type") |
Selects all <p> elements that are the last <p> element of their parent. |
:last |
$("p:last") |
Selects the last <p> element. |
:lt() |
$("ul li:lt(3)") |
Select all <li> elements at an index less than three within the matched set (i.e. selects 1st, 2nd, 3rd list elements), zero-based index. |
:not() |
$("p:not(:empty)") |
Select all <p> elements that are not empty. |
: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(3)") |
Selects all <p> elements that are the 3rd-child of their parent, counting from the last element to the first. |
:nth-last-of-type(n) |
$("p:nth-last-of-type(2)") |
Selects all <p> elements that are the 2nd-child of their parent, counting from the last element to the first. |
:nth-of-type(n) |
$("p:nth-of-type(2)") |
Selects all <p> elements that are the 2nd <p> element of their parent |
:odd |
$("tr:odd") |
Selects all odd <tr> elements, zero-indexed. |
:only-child |
$("p:only-child") |
Selects all <p> elements that are the only child of their parent. |
:only-of-type |
$("p:only-of-type") |
Selects all <p> elements that have no siblings with the same element name. |
:parent |
$(":parent") |
Select all elements that have at least one child node either an element or text. |
:password |
$(":password") |
Selects all input elements with type="password". |
:radio |
$(":radio") |
Selects all input elements with type="radio". |
:reset |
$(":reset") |
Selects all input and button elements with type="reset". |
:root |
$(":root") |
Selects the document's root element which is always <html> element in a HTML document. |
:selected |
$(":selected") |
Selects all elements that are selected, only works for <option> elements. |
:submit |
$(":submit") |
Selects all input and button elements with type="submit". |
:text |
$(":text") |
Selects all input elements with type="text". |
:visible |
$("p:visible") |
Selects all <p> elements that are visible. |
