Exploring jQuery Selectors, Part 3
In the first two parts of this series, you gained an understanding of the heart of the jQuery JavaScript library—selectors.Part 1introduced you to jQuery's selectors feature and demonstrated its basic and hierarchy selector categories.Part 2focused on the form and attribute selector categories. Part 3 concludes this series by exploring filter, extension, and custom selectors.
Filter Selectors
jQuery classifies some of its selectors asfiltersfor narrowing the returned selection. Along with the multiple attribute selector discussed inPart 2, which is based on filters, jQuery documents basic, child, content, and visibility filters.
Basic Filters
Basic filtersnarrow selections to elements that are being animated, or elements based on their position in a matched set. The following table lists the supported basic filters.
Basic Filter |
Description |
Animated (":animated") |
Select all elements that are in the process of animation at the time the selector is run. For example,$("div:animated")selects all |
Eq (":eq(n)") |
Select the element at the specified zero-based indexnwithin the matched set. For example,$('.note:eq(1)')selects the second element whoseclassvalue isnote. |
Even (":even") |
Select elements with even-numbered indexes starting with index 0. For example,$('.note:even')selects all even elements whoseclassvalue isnote. |
First (":first") |
Select the first matched element. For example,$('.note:first')selects the first element whoseclassvalue isnote. |
Focus (":focus") |
Select the element that is currently focused. For example,$('input:focus')selects theelement that has focus. |
Gt(":gt(n)") |
Select all elements at an index greater than the specified zero-based indexnwithin the matched set. For example,$('.note:gt(1)')selects all elements following the second element whoseclassvalue isnote. |
Header (":header") |
Select all elements that are headers (,,). For example,$(":header")selects all header elements. |
Last (":last") |
Select the last matched element. For example,$('.note:last')selects the last element whoseclassvalue isnote. |
Lt (":lt(n)") |
Select all elements at an index less than the specified zero-based indexnwithin the matched set. For example,$('.note:lt(3)')selects a maximum of the first three elements whoseclassvalue isnote. |
Not (":not(selector)") |
Select all elements that don't match the given selector. For example,$('.note:not(:eq(1))')selects all elements whoseclassvalue isnoteexcept for the second element. |
Odd (":odd") |
Select elements with odd-numbered indexes starting with index 1. For example,$('.note:odd')selects all odd elements whoseclassvalue isnote. |
Listing 1 presents an HTML document that demonstrates the:animatedselector.
Listing 1: Experimenting with the:animatedselector.
Filter Selector Demo: ":animated" first division
second division
third division
Listing 1 specifies three Theelement first executes$("div").css("border-style", "solid");to give each TheanimateDiv()function invokesjQuery'sfadeToggle([duration][,easing][,callback])method, passing"slow"todurationandanimateDivtocallback. No argument is passed toeasing. The argument passed todurationidentifies the number of milliseconds in which an animation cycle (opaque to transparent, or transparent to opaque) takes place. Although typically a number is passed, you can pass a string such as"slow", which represents 600 milliseconds. At the end of the cycle, the function passed tocallbackis invoked. BecauseanimatedDivis passed as an argument, this function will be invoked to begin a new animation cycle in the opposite direction to the cycle just ended. Theelement now executesanimatedDiv()to begin the animation. Having done so, it executes$("#cc").click(function(){ /* ... */ })to register a click event-handler with theelement (whoseidattribute value is set tocc). The anonymous function passed toclick()defines functionrndColor()to return a randomly generated CSS color string. It then executes$("div:animated").css("background-color", rndColor());to change the animated Figure 1 shows the resulting page with a randomly generated background color for the second Figure 1The second Child filtersselect elements that are children of their parents based on position or whether they're the sole children. The following table lists the supported child filters. Child Filter Description First Child (":first-child") Select all elements that are the first child of their parent elements. For example,$("ul li:first-child")returns the firstelement in each matched Last Child (":last-child") Select all elements that are the last child of their parent elements. For example,$("ul li:last-child")returns the lastelement in each matched Nth Child (":nth-child(n)") Select all elements that are thenth-child of their parent elements. For example,$("ul li:nth-child(2)")returns the secondelement in each matched Only Child (":only-child") Select all elements that are the only child of their parent elements. For example,$("ul li:only-child(2)")returns theelement in each matched Listing 2 presents an HTML document that demonstrates theNth-child(n)selector. Listing 2 specifies a single Expression$("div span:nth-child(1)")返回一个jQueryobject containing the firstchild element of the Figure 2 shows the resulting page with the firstchild element of the Figure 2The nested elements are colored red and green. Content filtersselect elements based on whether or not they have content. The following table lists the supported content filters. Content Filter Description Contains (":contains(text)") Select all elements that contain the specified text. The comparison is case sensitive. For example,$(p:contains('jQuery'))selects all elements that containjQuerydirectly or in any child elements. Empty (":empty") Select all elements that have no children (including text nodes). For example,$(td:empty())selects all Has (":has(selector)") Select elements that contain at least one element matching the specifiedselector. For example,$(div:has(span))selects all Parent (":parent") Select all elements that are the parent of another element, including text nodes. For example,$(td:parent())selects all Listing 3 presents an HTML document that demonstrates:parentand:empty.Child Filters
element.
element.
element. jQuery'snth-child(n)implementation is strictly derived from the CSS specification, meaning that the value ofnis 1-based.
element where theelement is the only child of the
element.
Listing 2: Experimenting with theNth-child(n)selector.
Content Filters
elements that have no child elements—not even text nodes.
elements that have child elements or text. This selector is the opposite of:empty.
Listing 3: Experimenting with the:parentand:emptyselectors.
< html > <头> <标题>过滤选择器演示:父母Versus Empty
Cell (1, 1) Cell (2, 2)