- Categories: jQuery Reference, jQuery Resources, Reference
Quick Reference
This is a quick reference list of jQuery selectors and how they work in selecting HTML elements to apply scripting.
jQuery – * Selector
The * selector selects all HTML elements in the document, and if used together with another element can be used to select all that element’s child elements.
jQuery – :animated Selector
The :animated selector selects all HTML elements that are currently animated.
jQuery – [attribute] Selector
The [attribute] selector selects every HTML element with the specified attribute.
jQuery – [attribute=value] Selector
The [attribute=value] selector selects every element with both the specified attribute and specified value.
jQuery – [attribute!=value] Selector
The [attribute!=value] selector selects every element with the specific attribute that does NOT have the specified value.
jQuery – [attribute$=value] Selector
The [attribute$=value] selector selects every element with a specific attribute that has a value ending in a specified string.
jQuery – [attribute|=value] Selector
The [attribute|=value] selector selects every element with a specific attribute that has a value equal to or starting with a specified value.
jQuery – [attribute^=value] Selector
The [attribute^=value] selector selects every element with a specific attribute that starts with a value beginning with a specified string.
jQuery – [attribute~=value] Selector
The [attribute~=value] selector selects every element with a specific attribute that has a value containing a specified stand-alone word.
jQuery – [attribute*=value] Selector
The [attribute*=value] selector selects every element with a specific attribute that has a value containing a specified string even as part of another word.
jQuery – :button Selector
The :button selector selects HTML form input elements and button elements with type=”button”.
jQuery – :checkbox Selector
The :checkbox selector selects HTML form input elements with type=”checkbox”.
jQuery – :checked Selector
The :checked selector selects all checked HTML checkboxes or radio buttons.
jQuery – .class Selector
The .class selector selects all HTML elements with a specific class, which may include multiple elements on the page.
jQuery – :contains() Selector
The :contains() selector selects elements containing a specified string directly within it or indirectly in a child, grandchild, etc. of the element.
jQuery – :disabled Selector
The :disabled selector selects all HTML form elements that are disabled.
jQuery – Element Selector
The element selector selects all HTML elements with a specific element tag name.
jQuery – Element + Next Selector
The element + next selector selects the very next element specified after (not within) the first specified element.
jQuery – Element ~ Siblings Selector
The element ~ siblings selector selects sibling elements that appear after the specified element. Both of the specified elements must share the same parent.
jQuery – :empty Selector
The :empty selector selects empty HTML elements, which means an element without any child elements or text.
jQuery – :enabled Selector
The :enabled selector selects all HTML form elements that are enabled.
jQuery – :even Selector
The :even selector selects every element with an even index number (0, 2, 4, etc.). This is often used to create a striped row look in HTML tables.
jQuery – :file Selector
The :file selector selects HTML form input elements with type=”file”.
jQuery – :first-child Selector
The :first-child selector selects all HTML elements of a specified type that are also the first child of their parent element.
jQuery – :first-of-type Selector
The :first-of-type selector selects all elements that are the first child of a specified type of their parent element.
jQuery – :focus Selector
The :focus selector selects the element that currently has focus.
jQuery – :has() Selector
The :has() selector selects all elements that have one or more elements inside of them that matches the specified selector.
jQuery – :header Selector
The :header selector selects all header elements – h1, h2, h3, h4, h5, and h6.
jQuery – :hidden Selector
The :hidden selector selects hidden elements (display: none, form elements with type=hidden, elements with zero width/height, child with a hidden parent).
jQuery – #id Selector
The #id selector selects an HTML element with a specific id. HTML only allows for one unique #id per document.
jQuery – :image Selector
The :image selector selects HTML form input elements with type=”image”.
jQuery – :input Selector
The :input selector selects HTML form elements and button elements.
jQuery – :lang() Selector
The :lang() selector selects all elements with the language attribute starting with a specified value (e.g., lang=”en” or lang=”en-us”).
jQuery – :last-child Selector
The :last-child selector selects all HTML elements of a specified type that are also the last child of their parent element.
jQuery – :last-of-type Selector
The :last-of-type selector selects all elements that are the last child of a specified type of their parent element.
jQuery – :nth-child() Selector
The :nth-child() selector selects all specified elements that are the nth child of their parent, regardless of all the children’s types.
jQuery – :not() Selector
The :not() selector selects all elements except the specified element.
jQuery – :nth-last-child() Selector
The :nth-last-child() selector selects all elements that are the nth child of their parent, regardless of all the children’s types, counting from the end.
jQuery – :nth-last-of-type() Selector
The :nth-last-of-type() selector selects all elements that are the nth child of a specified type of their parent, counting from the last child.
jQuery – :nth-of-type() Selector
The :nth-of-type() selector selects all elements that are the nth child of a specified type of their parent.
jQuery – :odd Selector
The :odd selector selects every element with an odd index number (1, 3, 5, etc.). This is often used to create a striped row look in HTML tables.
jQuery – :only-child Selector
The :only-child selector selects every element that is the only child of its parent. If the parent has multiple child elements, it will NOT be selected.
jQuery – :only-of-type Selector
The :only-of-type selector selects every element that is the only child of its type of its parent.
jQuery – Parent Descendant Selector
The Parent Descendant selector selects all elements that are descendants (child, grandchild, great-grandchild, etc) of a specified element.
jQuery – :parent Selector
The :parent selector selects all specified html elements that have child elements or text.
jQuery – Parent > Child Selector
The Parent > Child selector selects all elements that are a direct child of the specified element.
jQuery – :password Selector
The :password selector selects HTML form input elements with type=”password”.
jQuery – :radio Selector
The :radio selector selects HTML form input elements with type=”radio”.
jQuery – :reset Selector
The :reset selector selects HTML form input elements and button elements with type=”reset”.
jQuery – :root Selector
The :root selector selects the document’s root element which is the html tag.
jQuery – :submit Selector
The :submit selector selects HTML form input elements and button elements with type=”submit”.
jQuery – :selected Selector
The :selected selector selects option elements from a dropdown list that are preselected.
jQuery – :text Selector
The :text selector selects HTML form input elements with type=”text”.
jQuery – :visible Selector
The :visible selector selects elements NOT set to: display: none, form elements with type=hidden, elements with zero width/height, child with a hidden parent.
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.
Why 1SMARTchicken?
See More →
Thanks for your support!
jQuery Books
All are affiliate links. Thank you for your support!
jQUERY NOTES:
- To use jQuery on your site, it must first be downloaded from the official jQuery site and linked to in your document
head, or linked to via a CDN in your documenthead - It is generally good practice to place your jQuery code/function inside the document load function so that the action takes place ONLY after the document has finished loading
- When using jQuery, single or double quotation marks are acceptable and work identically to one another; choose whichever you prefer, and stay consistent
Feedback
If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.
