1. Ultimate Reference For jQuery Selectors
In this ultimate and updated jQuery reference tutorial, you'll discover an extensive list of selectors that are vital for interacting with web page elements and components. This comprehensive selector guide covers everything from basic to advanced selectors used in the jQuery programming language.
| Selector | Example | Selects |
| * | $("*") | Selects all elements on the page |
| #id * | $("#main *") | All elements inside the element with id=main |
| #id | $("#hero") | The element with id="hero" |
| .class | $(".firstname") | All elements with class="firstname" |
| .class, .class | $(".firstname, .lastname") | All elements with the class .firstname or .lastname |
| element | $("a") | All anchor elements <a> |
| el1, el2, el3 | $("ol, ul, p") | All <ol>, <ul> and <p> elements |
| :first | $("h3:first") | The first <h3> element |
| :last | $("h3:last") | The last <h3> element |
| :even | $("tr:even") | All even <tr> elements |
| :odd | $("tr:odd") | All odd <tr> elements |
| :first-child | $("td:first-child") | All <td> elements that are the first child of a <tr> element |
| :first-of-type | $("p:first-of-type") | All <p> elements that are the first <p> element of their parent |
| :last-child | $("td:last-child") | All <td> elements that are the last child of a <tr> element |
| :last-of-type | $("p:last-of-type") | All <p> elements that are the last <p> element of their parent |
| :nth-child(n) | $("p:nth-child(2)") | All <p> elements that are the second child of their parent |
| :nth-last-child(n) | $("p:nth-last-child(2)") | All <p> elements that are the second child of their parent, counting from the last child |
| :nth-of-type(n) | $("p:nth-of-type(2)") | All <p> elements that are the second <p> element of their parent |
| :nth-last-of-type(n) | $("p:nth-last-of-type(2)") | All <p> elements that are the second <p> element of their parent, counting from the last child |
| :only-child | $("p:only-child") | All <p> elements that are the only child of their parent |
| :only-of-type | $("p:only-of-type") | All <p> elements that are the only child of its type, of their parent |
| parent > child | $("div > p") | All <p> elements that are a direct child of a <div> element |
| parent descendant | $("div p") | All <p> elements that are descendants of a <div> element |
| :target | $(":target") | The element targeted by the URI fragment identifier |
| :scope | $(":scope") | The current element is being evaluated as the context for the selector |
| prev + next | $("div + p") | The <p> elements that are next to each <div> element |
| prev ~ siblings | $("div ~ p") | All <p> elements that appear after the <div> element |
| :eq(index) | $("ul li:eq(3)") | The fourth element in a list (index starts at 0) |
| :gt(no) | $("ul li:gt(3)") | List elements with an index greater than 3 |
| :lt(no) | $("ul li:lt(3)") | List elements with an index less than 3 |
| :not(selector) | $("input:not(:empty)") | All input elements that are not empty |
| :header | $(":header") | All header elements <h1>, <h2> ... |
| :animated | $(":animated") | All elements that are currently being animated |
| :focus | $(":focus") | The element that currently has focus |
| :contains(text) | $(":contains('Hello')") | All elements that contain the text "Hello" |
| :has(selector) | $("div:has(ul)") | All <div> elements that have a <ul> element |
| :empty | $(":empty") | All empty elements |
| :parent | $(":parent") | All elements that are a parent of another element |
| :hidden | $("div:hidden") | All hidden <div> elements |
| :visible | $("table:visible") | All visible <table>s |
| :root | $(":root") | The document's root element, typically the <html> element |
| :lang(language) | $("p:lang(fr)") | All <p> elements with a lang attribute value starting with "fr" |
| [attribute] | $("[href]") | All elements with an a href attribute |
| [attribute=value] | $("[href='home.htm']") | All elements with an href attribute value equal to "home.htm" |
| [attribute!=value] | $("[href!='home.htm']") | All elements with an href attribute value not equal to "home.htm" |
| [attribute$=value] | $("[href$='.png']") | All elements with an href attribute value ending with ".png" |
| [attribute|=value] | $("[title|='Tomorrow']") | All elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a hyphen |
| [attribute^=value] | $("[title^='John']") | All elements with a title attribute value starting with "John" |
| [attribute~=value] | $("[title~='hello']") | All elements with a title attribute value containing the specific word "hello" |
| [attribute*=value] | $("[title*='hello']") | All elements with a title attribute value containing the word "hello" |
| :input | $(":input") | All input elements |
| :text | $(":text") | All input elements with type="text" |
| :password | $(":password") | All input elements with type="password" |
| :radio | $(":radio") | All input elements with type="radio" |
| :checkbox | $(":checkbox") | All input elements with type="checkbox" |
| :submit | $(":submit") | All input elements with type="submit" |
| :reset | $(":reset") | All input elements with type="reset" |
| :button | $(":button") | All input elements with type="button" |
| :image | $(":image") | All input elements with type="image" |
| :file | $(":file") | All input elements with type="file" |
| :enabled | $(":enabled") | All enabled input elements |
| :disabled | $(":disabled") | All disabled input elements |
| :selected | $(":selected") | All selected input elements |
| :checked | $(":checked") | All checked input elements |