jQuery selectors are based on the selectors defined in the CSS specifications. They’re string values that identify elements of interest within the HTML DOM. Within jQuery, filter is another term for selector. Both narrow down the set of matching elements from an existing collection, which starts with all the nodes in the current context.
3.1.1 Why add new selectors?
jQuery has a vast array of built-in selectors, so why would you want to add new ones? If you have a multistep selection process to find particular elements on a page, and that same process is used many times, either on that one page or across several pages, then you should consider creating a custom selector to implement it.
Although you could obtain a collection of elements using a combination of jQuery selectors and functions, creating a custom selector means that your particular selec- tion process is more legible, concise, and consistent across the multiple web pages that use it. By choosing an appropriate name, your selector directly indicates what’s desired, rather than having to work through multiple steps that may obscure the intent. Similarly, your invocation code is briefer and there’s less chance of forgetting a step, because there’s only one definition of the underlying selection process. The selector code is also easier to test, and any bug fixes or enhancements are immediately applied to all instances where it’s used.
For example, to pick items other than the first or last in a list, you could use the fol- lowing combination of built-in selectors:
$('li:not(:first, :last)', list)...
Or you could define your own selector and use that instead:
$('li:middle', list)...
If you want to find all paragraphs with some form of emphasized text in them, you could write this:
$('p:has(b | i | em | strong)')...
Or you could ensure you don’t omit or mistype an element by defining your own selector:
$('p:has(:emphasis)')...
The next two subsections briefly review the selectors built into jQuery. After that you’ll see how to define your own selectors.
32 CHAPTER 3 Selectors and filters
3.1.2 Basic selectors
There are many basic selectors in jQuery, allowing selection by element name, ID, class, and/or attribute and value (as shown in table 3.1). Most of these are imple- mented by native functions provided by the browser, so they’ll perform better than other selectors.
The selectors can be combined to create specific selections. For example, to find all the label elements that immediately follow an input element (perhaps these are checkbox labels), and that are located within the element with the ID of content, you would use this:
$('#content input + label')...
Table 3.1 Basic jQuery selectors
Name Selector pattern Functionality
All selector * Selects all elements regardless of their name
Element selector element Selects all elements with a matching name;
for example, input
ID selector #identifier Selects one element with the matching ID;
for example,
#field1
Class selector .class Selects all elements with a matching class;
for example, div.tabs Descendant
selector
parent child Selects all child elements that are contained anywhere within parent elements; for example,
#list1 li
Child selector parent > child Selects all childelements that are the direct children of parent elements; for example,
#tabs > div Next adjacent
selector
prev + next Selects all next elements that are immediately preceded by a sibling prev element; for example, input + label
Next siblings selector
prev ~ siblings Selects all siblings elements that follow after prev elements and have the same parent; for example, h2 ~ p
Has attribute selector
[name] Selects all elements that have the named attribute, regardless of its value; for example,
input[readonly]
Attribute equals selector
[name="value"] Selects all elements that have the named attribute with the exact given value; for example,
label[for="field1"]
33 What are selectors and filters?
3.1.3 Pseudo-class selectors
In addition, jQuery provides numerous pseudo-class selectors that implement and extend the CSS-defined pseudo-class offerings. Pseudo-classes are defined in the CSS specification as classifying elements based on characteristics other than their name, attributes, or content-criteria that can’t be deduced from the document tree. These selectors are identified by a colon (:) followed by the selector name and an optional parameter.
For example, to find all checkbox controls that have been checked, you could combine two pseudo-class selectors:
$('input:checkbox:checked')...
Attribute not equal selector
[name!="value"] Selects all elements that either don’t have the named attribute or that do have the named attribute but not with the exact given value; for example,
a[target!="_blank"]
Attribute starts with selector
[name^="value"] Selects all elements that have the named attribute with a value that starts with the given value;
for example, a[href^="http:"]
Attribute ends with selector
[name$="value"] Selects all elements that have the named attribute with a value that ends with the given value;
for example, a[href$=".pdf"]
Attribute contains selector
[name*="value"] Selects all elements that have the named attribute with a value that contains the given value;
for example,
a[href*="google"]
Attribute contains word selector
[name~="value"] Selects all elements that have the named attribute with a value that contains the given word, delimited by spaces; for example,
a[title~="Google"]
Attribute con- tains prefix selector
[name|="value"] Selects all elements that have the named attribute with a value that’s either equal to the given value or starts with that value followed by a hyphen (-);
for example,
a[class|="ui-state"]
Multiple attribute selector
[name1="value1"]
[name2="value2"]
Selects all elements that match all of the supplied attribute selectors; for example,
input[type="checkbox"][disabled]
Multiple selector selector1,selector2 Combines all elements selected by each of the individual selectors; for example,
input, select, textarea Table 3.1 Basic jQuery selectors (continued)
Name Selector pattern Functionality
34 CHAPTER 3 Selectors and filters
Note that most of these selectors are implemented in JavaScript and can’t be dele- gated to the built-in browser functionality, and so will run a little slower than the basic selectors.
Pseudo-class selectors come in a number of different types. Normal pseudo-class selectors only inspect the element itself—its attributes or content—before deciding to include or exclude it. Some pseudo-class selectors (set filters) take into account the entire list of elements resulting from a previous selection and filter those based on their position within that collection. Another type (child filters) looks at the relation- ship of an element to its siblings, regardless of whether those siblings form part of the current collection. In normal usage these types make no difference, but they’re important when writing your own selectors.
The jQuery built-in pseudo-class selectors are shown in table 3.2.
Table 3.2 jQuery pseudo-class selectors
Name Selector pattern Type Functionality
Animated selector
:animated Selects all elements currently being animated;
for example,
div.content:animated Button
selector
:button Selects all button elements and inputs of type button; for example,
form :button Checkbox
selector
:checkbox Selects all inputs of type checkbox; for example, input:checkbox
Checked selector
:checked Selects all elements (checkboxes and radio buttons) that are checked; for example, input[name="gender"]:checked Contains
selector
:contains(value) Selects all elements that contain text equal to a given value; for example,
h1:contains(Chapter) Disabled
selector
:disabled Selects all disabled elements; for example, input:disabled
Empty selector :empty Selects all elements that have no children, including text nodes; for example, span:empty
Enabled selector :enabled Selects all enabled elements; for example, input:enabled
Equals index selector
:eq(index) Set Selects the element at the given index (zero- based) within the previous selection; for example, li:eq(1)
Even selector :even Set Selects all even-numbered elements (zero-based) within the previous selection; for example, tr:even
35 What are selectors and filters?
File selector :file Selects all inputs of type file; for example, input:file
First selector :first Set Selects the first element within the previous selection; for example,
select option:first First child
selector
:first-child Child Selects all elements that are the first child of their parent; for example,
table td:first-child First of type
selector
:first-of-type Child Selects all elements that are the first among siblings of the same element name (new in jQuery 1.9); for example,
p:first-of-type
Focus selector :focus Selects the element that is currently focused;
for example, input:focus Greater than
index selector
:gt(index) Set Selects all elements within the previous selection with an index greater than the given value;
for example, li:gt(1)
Has selector :has(selector) Selects all elements that contain at least one element that matches the given selector;
for example,
form:has(input.error)
Header selector :header Selects all header elements: h1, h2, etc.; for example,
:header
Hidden selector :hidden Selects all elements that are hidden; for example, form input:hidden
Image selector :image Selects all inputs of type image; for example, input:image
Input selector :input Selects all input, select, textarea, and button elements; for example,
form :input Language
selector
:lang(language) Selects all elements of the given language (new in jQuery 1.9); for example,
p:lang(fr)
Last selector :last Set Selects the last element within the previous selection; for example,
#mylist li:last Last child
selector
:last-child Child Selects all elements that are the last child of their parent; for example,
table td:last-child Table 3.2 jQuery pseudo-class selectors (continued)
Name Selector pattern Type Functionality
36 CHAPTER 3 Selectors and filters
Last of type selector
:last-of-type Child Selects all elements that are the last among siblings of the same element name (new in jQuery 1.9); for example,
p:last-of-type Less than index
selector
:lt(index) Set Selects all elements within the previous selection with an index less than the given value;
for example, option:lt(2)
Not selector :not(selector) Selects all elements that don’t match the given selector; for example,
div:not(.ignore) Nth child
selector
:nth- child(index)
Child Selects all elements that are the nth child of their parent; for example,
table td:nth-child(3) Nth last child
selector
:nth-last-child (index)
Child Selects all elements that are the nth child of their parent counting from the last element to the first (new in jQuery 1.9); for example,
table td:nth-last-child(3) Nth last of type
selector
:nth-last-of- type(index)
Child Selects all elements that are the nth last among siblings of the same element name (new in jQuery 1.9); for example,
p:nth-last-of-type(2) Nth of type
selector
:nth-of- type(index)
Child Selects all elements that are the nth among
siblings of the same element name (new in jQuery 1.9), for example,
p:nth-of-type(2)
Odd selector :odd Set Selects all odd numbered elements (zero-based) within the previous selection; for example, tr:odd
Only child selector
:only-child Child Selects all elements that are the only child of their parent; for example,
li a:only-child Only of type
selector
:only-of-type Child Selects all elements that have no siblings of the same element name (new in jQuery 1.9);
for example, p:only-of-type
Parent selector :parent Selects all elements that are the parent of another node, including text nodes; for example,
li:parent Password
selector
:password Selects all inputs of type password; for example, input:password
Table 3.2 jQuery pseudo-class selectors (continued)
Name Selector pattern Type Functionality
37 Adding a pseudo-class selector