In this section i will show you different types of jQuery Selectors.
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”. |
