Web Development with jQuery (2015)

Part IV. Appendices

Appendix B. jQuery Selectors

The following table contains the selector syntax that you can use with jQuery's Selector API, which is implemented using the open source Sizzle engine.

Selector	Description
Simple Selectors The following selectors are the most basic, commonly used selectors.
#idName div#idName	Selects a single element via the id name specified in the element's id attribute.
div	Selects one or more elements by the element name—for example, form, div, input, and so on.
div.className .className	Selects one or more elements via a class name present in the element's class attribute. Individual elements may also have multiple class names.
*	The universal or wildcard selector; selects all elements.
div.body, div.sideColumn, h1.title	Selects one or more elements by chaining multiple selectors together with commas.
Hierarchy The following selectors are used based on hierarchical context.
div.outerContainer table.form	Selects one or more elements based on an ancestral relationship.
div#wrapper > h1.title	Selects one or more elements based on a parent, child relationship.
h3 + p	Selects the sibling immediately following an element.
h3 ∼ p	Selects any siblings immediately following an element.
Context Filters The following selectors are applied based on the context elements that appear in the document.
:root	Selects the root element of the document; in an HTML document this will be the <html> element. In an XML document, it will be whatever name is given the root element.
:first	Selects the first element that occurs in the selection.
:last	Selects the last element that occurs in the selection.
:not(selector)	Reduces a selection by specifying what you want to exclude from a selection.
:even	Selects only elements falling within even numbering. jQuery calculates position, offset from zero. Item one would be considered number zero, item two would be considered number one, and so on; so :even matches numbers 0, 2, 4, and so on.
:odd	Selects only elements falling within odd numbering. jQuery calculates position offset from zero. Item one would be number 0, item two would be number 1; so :odd matches numbers 1, 3, 5, and so on.
:eq(index)	Selects a single element based on its offset in the selection counting from 9; for example, :eq(0) matches the first item in the selection, :eq(1) matches the second item in the selection, and so on.
:gt(index)	Selects all elements where each element's offset is greater than the number specified. Specifying :gt(4) selects elements with offset 5 or greater, where the count is offset from 0.
:lt(index)	Selects all elements where each element's offset is less than the number specified. For example, specifying :lt(4) would select element's with offset 0, 1, 2, and 3.
:header	Selects all elements that are headers, for example, h1, h2, h3, h4, h5, or h6.
:animated	Selects all elements that are currently animated.
:lang("en") :lang("en-us")	Selects all elements of the specified language, such as <div id="en"> or <div id="en-us">.
:target	Selects the element based on the URI fragment, if a fragment exists. For example, if you have the URL: http://www.example.com#idName :target would select the element in the document with the id name idName.
:contains(text)	Selects elements based on whether the text specified is present in the element's content. For example, :contents("Lorem Ipsum") matches: <p>Lorem Ipsum</p> and any other element containing Lorem Ipsum anywhere in its text content.
:empty	Selects elements that have no children (including text nodes). For example, :empty matches <div></div>, <a></a>, or <span></span>.
:has(selector)	Selects elements that match the specified selector. For example, input:has(':checked') matches any element that has a check box or radio <input> with the attribute checked="checked".
:parent	Selects an element's parent. Therefore, div:parent matches all parents that have <div> children.
Visibility Filters The following selectors make selections based on whether an element is visible or invisible.
:hidden	Selects all elements that are hidden or <input> elements that are of type="hidden", depending on the context of the selection. The concept of hidden applies to either elements with CSS visibility: hidden; or display: none;.
:visible	Selects all elements that are visible—for example, they are not hidden with visibility: hidden; or display: none;.
Attribute Filters The following selectors make selections based on attribute presence or strings contained within attribute values.
[attribute]	Selects all elements where the specified attribute is present. For example, the selector [href] selects all elements in a document that have an href attribute.
[attribute=value]	Selects all elements where the attribute has an exact match for the specified value. For example, [href="#"] matches all href="#" attributes in the document (regardless of what element the attribute is attached to).
[attribute!=value]	Selects all elements where the attribute does not have the specified value. For example, given the selector [src!="about:blank"] all elements with a src attribute that does not contain the value about:blank will be matched.
[attribute∧=value]	Selects all elements where the attribute's value begins with the specified string. One example might be the selector [href∧="https://"], which would match all href attributes that reference a secure HTTP connection.
[attribute$=value]	Selects all elements where the attribute's value ends with the specified string. For example, the selector: [href$=".pdf"] matches all href attributes that link to pdf documents (assuming there are no query string parameters or URL fragments).
[attribute*=value]	Selects all elements where the attribute's value contains the specified string anywhere within the value. If you were searching for href attributes that might have query string permanents or URL fragments, you could use the selector[href*=".pdf"] to find PDF documents where the string ".pdf" might occur somewhere within the attribute's value.
[attribute∼=value]	Selects all elements where the attribute's value contains the specified word. This is useful for situations like class names where there are multiple values separated by spaces. This selector is intended to match one space-separated value. Take, for example, this selector: [class∼="selected"]; this selector would match the following attribute: class="disabled selected bodyContainer".
[href][title][class][target]	Selects all elements where the element has each attribute. In this example, any element that contains all four attributes, href, title, class, and target, would be matched. Chaining attribute selectors works with any type of attribute selector mentioned here, so you can test if an attribute is present, if another attribute contains a particular value, and if another attribute begins with a value, and so on.
Child Filters The following selectors make selections based on the position of children elements relative to their siblings and their parents.
:nth-child(offset) :nth-child(even) :nth-child(odd) :nth-child(equation)	Selects all elements where the element is a certain offset counting from zero, or elements that are in even or odd positions (also determined by counting offset from zero). You can also provide a mathematical expression that will be evaluated to determine which elements are matches.
:nth-last-child(offset) :nth-last-child(even) :nth-last-child(odd) :nth-last-child(equation)	Similar to nth-child, but elements are selected based on their offset position counting backward from the last child of the parent.
:first-child	Selects all elements where the element is the first child of its parent.
:last-child	Selects all elements where the element is a last child of its parent.
:only-child	Selects all elements where the element is the only child of its parent.
:first-of-type	Matches the first element of the specified type, wherever it may occur within the context of the selection. If the selection is within the context of the entire document and the selection div:first-of-type is used, the first occurrence of <div> in relation to its parent element, wherever it may be, is matched.
:last-of-type	Matches the last element of the specified type within the context of that element's parent and siblings.
:nth-of-type(offset) :nth-of-type(even) :nth-of-type(odd) :nth-of-type(equation)	Selects elements in relation to their parent and siblings counting offset from zero, the first element of the same type.
:nth-last-of-type(offset) :nth-last-of-type(even) :nth-last-of-type(odd) :nth-last-of-type(equation)	Selects elements in relation to their parent and siblings of the same type, counting from the last element of that type.
:only-of-type	Selects elements of the specified type that have no siblings of the same type.
Forms Elements The following selectors can be used to select various form input elements.
:input	Selects all <input>, <select>, <textarea>, and <button> elements.
:text	Selects all <input> elements where type="text".
:password	Selects all <input> elements where type="password".
:radio	Selects all <input> elements where type="radio".
:checkbox	Selects all <input> elements where type="checkbox".
:submit	Selects all <input> elements where type="submit".
:image	Selects all <input> elements where type="image"
:reset	Selects all <input> elements where type="reset".
:button	Selects all <button> elements and <input> elements where type="button".
:file	Selects all <input> elements where type="file".
:hidden	Selects all elements that are hidden using visibility: hidden; or display: none; or <input> elements where type="hidden".
Form State Selectors The following selectors are used to select form elements based on their state.
:enabled	Selects all elements that are enabled.
:disabled	Selects all elements that are disabled with the attribute disabled="disabled".
:checked	Selects all elements that are checked, for example, check box and radio inputs, where the attribute checked="checked" is present.
:selected	Selects all elements that are selected, for example, options in a select drop-down where the attribute selected="selected" is present.
:focus	Selects whatever element currently has focus.

Note that selectors marked with an asterisk (*) are jQuery extensions to the standard Selector API, which utilizes the built-in browser Selector API document.querySelector() and document.querySelectorAll()and may not perform as well as natively supported selectors. Wherever possible, jQuery's selector engine, Sizzle, transforms these extended features into natively supported selectors at run time, so in many cases the performance impact is negligible, but there is still the additional overhead of parsing the selector and transforming the selector into one that the native selector API understands.

Having said that, to get the best possible performance out of jQuery, it is best to first perform a selection using a highly efficient selector (the most efficient selector is an id selector), and then filter the selection from within the context of that selection using filtering methods such as find(), filter(), and so on. This is good practice not just for jQuery extensions to the selector API but for any selection. Id selectors are the most efficient selectors because ids are meant to be unique (you should never assign the same id name to multiple elements) and, when done correctly, id selections result in only one possible match within a document.