jquery_ref_selectors
jQuery Selectors Reference
Section titled “jQuery Selectors Reference”jQuery Selectors leverage CSS selector syntax to target specific HTML elements for manipulation. Understanding selectors is fundamental to using jQuery effectively.
Section titled “jQuery Selectors leverage CSS selector syntax to target specific HTML elements for manipulation. Understanding selectors is fundamental to using jQuery effectively.”This reference covers common CSS selectors supported by jQuery, along with some jQuery-specific extensions. Modern browsers have excellent CSS selector support, making many complex selections possible without jQuery-specific syntax.
SelectorExampleSelects
**Basic Selectors**
*$("*")All elements (Use with caution due to performance implications).
#id$("#userProfile")The element with the specific ID `userProfile`.
.class$(".product-item")All elements with the class `product-item`.
.class1.class2$(".item.featured")All elements having *both* `item` and `featured` classes.
.class1, .class2$(".warning, .error")All elements with *either* the `warning` or `error` class.
element$("p")All `<p>` elements.
el1, el2, el3$("h1, h2, p")All `<h1>`, `<h2>`, and `<p>` elements.
**Hierarchy Selectors**
parent > child$("ul > li")All `<li>` elements that are direct children of a `<ul>`.
parent descendant$("article p")All `<p>` elements that are descendants (any level down) of an `<article>` element.
element + next$("h2 + p")Selects the `<p>` element immediately following each `<h2>` element (must be siblings).
element ~ siblings$("h2 ~ p")Selects all `<p>` elements that are siblings following an `<h2>` element.
**Basic Filters / Pseudo-classes**
:first$("li:first")The first matched `<li>` element *within the jQuery selection* (jQuery extension). Use `:first-child` for CSS standard.
:last$("li:last")The last matched `<li>` element *within the jQuery selection* (jQuery extension). Use `:last-child` for CSS standard.
:even$("tr:even")Selects even-indexed elements (0, 2, 4...) *within the jQuery selection* (0-based index, jQuery extension). Use `:nth-child(even)` for CSS standard.
:odd$("tr:odd")Selects odd-indexed elements (1, 3, 5...) *within the jQuery selection* (0-based index, jQuery extension). Use `:nth-child(odd)` for CSS standard.
:eq(index)$("ul li:eq(2)")The element at the specific zero-based index (here, the 3rd list item) *within the jQuery selection* (jQuery extension).
:gt(index)$("ul li:gt(1)")Elements at an index greater than the specified index (here, 3rd, 4th, ...) *within the jQuery selection* (jQuery extension).
:lt(index)$("ul li:lt(2)")Elements at an index less than the specified index (here, 1st, 2nd) *within the jQuery selection* (jQuery extension).
:not(selector)$("input:not(:checked)")Selects all elements that do *not* match the given inner selector (Standard CSS).
:header$(":header")Selects all heading elements (`<h1>` through `<h6>`) (jQuery extension).
:animated$(":animated")Selects elements currently undergoing a jQuery animation (jQuery extension).
:focus$(":focus")Selects the element that currently has focus (Standard CSS).
**Content Filters**
:contains(text)$("p:contains('Important')")Selects elements whose text content includes the specified string (case-sensitive, jQuery extension).
:has(selector)$("div:has(span.icon)")Selects elements that contain at least one descendant matching the inner selector (jQuery extension).
:empty$("td:empty")Selects elements that have no children (including text nodes) (Standard CSS).
:parent$("td:parent")Selects elements that have at least one child node (element or text) (Opposite of `:empty`, jQuery extension).
**Visibility Filters**
:hidden$("div:hidden")Selects elements that are currently hidden. This includes `display: none`, `visibility: hidden`, `opacity: 0`, `type="hidden"` inputs, and elements with zero width/height (jQuery extension, can have performance costs).
:visible$("div:visible")Selects elements that are currently visible (Opposite of `:hidden`, jQuery extension).
**Child Filters / Pseudo-classes (Standard CSS)**
:first-child$("li:first-child")Selects every `<li>` element that is the first child of its parent.
:last-child$("li:last-child")Selects every `<li>` element that is the last child of its parent.
:only-child$("p:only-child")Selects every `<p>` element that is the only child of its parent.
:first-of-type$("h2:first-of-type")Selects every `<h2>` element that is the first `<h2>` among siblings.
:last-of-type$("h2:last-of-type")Selects every `<h2>` element that is the last `<h2>` among siblings.
:only-of-type$("p:only-of-type")Selects every `<p>` element that is the only `<p>` among siblings.
:nth-child(n)$("li:nth-child(3)")Selects the element that is the 3rd child of its parent.
:nth-child(odd/even)$("tr:nth-child(odd)")Selects odd (1st, 3rd...) or even (2nd, 4th...) children.
:nth-child(an+b)$("tr:nth-child(3n+1)")Selects children based on a formula (e.g., 1st, 4th, 7th...).
:nth-last-child(n)$("li:nth-last-child(2)")Selects the element that is the 2nd child, counting from the last child.
:nth-of-type(n)$("p:nth-of-type(2)")Selects the 2nd `<p>` element among its siblings.
:nth-last-of-type(n)$("p:nth-last-of-type(1)")Selects the last `<p>` element among its siblings.
**Attribute Selectors (Standard CSS)**
[attribute]$("[data-role]")Selects all elements with a `data-role` attribute.
[attribute=value]$("a[target='_blank']")Selects `<a>` elements with a `target` attribute exactly equal to `_blank`.
[attribute!=value]$("input[type!='submit']")Selects `<input>` elements whose `type` attribute is not equal to `submit` (jQuery extension, use `:not([type='submit'])` for standard CSS).
[attribute^=value]$("a[href^='https://']")Selects `<a>` elements whose `href` attribute value starts with `https://`.
[attribute$=value]$("img[src$='.png']")Selects `<img>` elements whose `src` attribute value ends with `.png`.
[attribute*=value]$("a[href*='jquery']")Selects `<a>` elements whose `href` attribute value contains the substring `jquery`.
[attribute|=value]$("[lang|='en']")Selects elements with a `lang` attribute equal to `en` or starting `en-`.
[attribute~=value]$("p[class~='important']")Selects `<p>` elements where the `class` attribute contains the whole word `important` (space-separated list).
**Form Selectors (jQuery Extensions)**
:input$(":input")Selects all `<input>`, `<textarea>`, `<select>`, and `<button>` elements.
:text$(":text")Selects input elements with `type="text"`.
:password$(":password")Selects input elements with `type="password"`.
:radio$(":radio")Selects input elements with `type="radio"`.
:checkbox$(":checkbox")Selects input elements with `type="checkbox"`.
:submit$(":submit")Selects input elements with `type="submit"` and `<button>` elements implicitly or explicitly of type submit.
:reset$(":reset")Selects input elements with `type="reset"`.
:button$(":button")Selects input elements with `type="button"` and all `<button>` elements.
:image$(":image")Selects input elements with `type="image"`.
:file$(":file")Selects input elements with `type="file"`.
:enabled$(":enabled")Selects all form elements that are currently enabled (Standard CSS).
:disabled$(":disabled")Selects all form elements that are currently disabled (Standard CSS).
:checked$(":checked")Selects all checked radio buttons and checkboxes (Standard CSS).
:selected$("option:selected")Selects all selected `<option>` elements within a `<select>` (Standard CSS).Note: While jQuery extensions are convenient, prefer standard CSS selectors where possible for better performance and future compatibility.