jQuery in Action
Selecting elements for manipulation
29
Many of the custom jQuery selectors are form-related, allowing us to specify,
rather elegantly, a specific element type or state. We can combine selector filters
too. For example, if we want to select only enabled and checked check boxes, we
could use
rather elegantly, a specific element type or state. We can combine selector filters
too. For example, if we want to select only enabled and checked check boxes, we
could use
:checkbox:checked:enabled
Try out as many of these filters as you like in the Selectors Lab until you feel that
you have a good grasp of their operation.
you have a good grasp of their operation.
These filters are an immensely useful addition to the set of selectors at our dis-
posal, but what about the inverse of these filters?
Using the :not filter
If we want to negate a filter, let's say to match any input element that's not a check
box, we use the
box, we use the
:not
filter, which is supported for
CSS
filters and works with cus-
tom jQuery selector filters too.
To select non-check box
<input>
elements, we use
input:not(:checkbox)
It's important to recognize the distinction between filter selectors, which attenuate
a matching set of elements by applying a further selection criteria to them (like the
ones shown previously), and find selectors. Find selectors, such as the descendent
selector (space character), the child selector (
a matching set of elements by applying a further selection criteria to them (like the
ones shown previously), and find selectors. Find selectors, such as the descendent
selector (space character), the child selector (
>
), and the sibling selector (
+
), find
other elements that bear some relationship to the ones already selected, rather than
limiting the scope of the match with criteria applied to the matched elements.
limiting the scope of the match with criteria applied to the matched elements.
We can apply the
:not
filter to filter selectors, but not to find selectors. The
selector
div p:not(:hidden)
is a perfectly valid selector, but
div
:not(p:hidden)
isn't.
:selected
Selects option elements that are selected.
:submit
Selects submit buttons (button[type=submit] or
input[type=submit]
).
:text
Selects only text elements (input[type=text]).
:visible
Selects only elements that are visible.
Table 2.3 The jQuery custom filter selectors that give immense power to identify
target elements (continued)
Selector
Description