jQuery 1.4 Reference Guide
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

Custom selectors

The following selectors were added to the jQuery library in an attempt to address common DOM traversal needs not met by the CSS specification.

Element at index (:eq(n))

Select the element at index n within the matched set.

Examples
  • $('li:eq(2)') selects the third <li> element
  • $('.myclass:eq(1)') selects the second element with the class myclass
Description

The selector :nth(n) exists as a synonym of this selector.

The index-related selector expressions (including this selector and the others that follow) filter the set of elements that have matched the expressions that precede them. They narrow the set down based on the order of the elements within this matched set. For example, if elements are first selected with a class selector (.myclass) and four elements are returned, these elements are given indices 0 through 3 for the purposes of these selectors.

Note that since JavaScript arrays use 0-based indexing, these selectors reflect that fact. This is why $('.myclass:eq(1)') selects the second element in the document with the class myclass, rather than the first. In contrast, :nth-child(n) uses 1-based indexing to conform to the CSS specification.

Greater than (:gt(n))

Select all elements at an index greater than n within the matched set.

Examples
  • $('li:gt(2)') selects all <li> elements following the third one
  • $('.myclass:gt(1)') selects all elements with the class myclass following the second one
Description

See the Description for Element at index, for important details regarding the indexing used by this selector.

Less than (:lt(n))

Select all elements at an index less than n within the matched set.

Examples
  • $('li:gt(2)') selects all <li> elements preceding the third one
  • $('.myclass:gt(1)') selects all elements with the class myclass preceding the second one
Description

See the Description for Element at index for important details regarding the indexing used by this selector.

First (:first)

Select the first element within the matched set.

Examples
  • $('li:first') selects the first <li> element
  • $('.myclass:first') selects the first element with the class myclass
Description

The :first pseudo-class is shorthand for :eq(0). It could also be written as :lt(1).

See the Description for Element at index for important details regarding the indexing used by this selector.

Last (:last)

Select the last element within the matched set.

Examples
  • $('li:last) selects the last <li> element
  • $('.myclass:last) selects the last element with the class myclass
Description

While :first has equivalent selectors—nth(0) and eq(0)—the :last pseudo-class is unique in its ability to select only the last element in the set of matched elements.

See the Description for Element at index for important details regarding the indexing used by this selector.

Even element (:even)

Select all elements with an even index within the matched set.

Examples
  • $('li:even') selects the even-indexed elements within the set of <li> elements
  • $('.myclass:even') selects the even-indexed elements within the set of elements that have the class myclass
Description

See the Description for Element at index for important details regarding the indexing used by this selector. In particular, note that the 0-based indexing means that, counter-intuitively, :even selects the first element, third element, and so on within the matched set.

Odd element (:odd)

Select all elements with an odd index within the matched set.

Examples
  • $('li:odd') selects the odd-indexed elements within the set of <li> elements
  • $('.myclass:odd') selects the odd-indexed elements within the set of elements that have the class myclass
Description

See the Description for Element at index for important details regarding the indexing used by this selector. In particular, note that the 0-based indexing means that, counter-intuitively, :odd selects the second element, fourth element, and so on within the matched set.

Is parent (:parent)

Select all elements that are the parent of another element, including text nodes.

Examples
  • $(':parent') selects all elements that are the parent of another element, including text nodes
  • $('td:parent') selects all <td> elements that are the parent of another element, including text nodes
Description

One important thing to note regarding use of :parent (and :empty) is that child elements include text nodes.

The W3C recommends that the <p> element have at least one child node, even if that child is merely text (see http://www.w3.org/TR/html401/struct/text.html#edef-P). On the other hand, some other elements are empty (that is, have no children) by definition; for example, <input>, <img>, <br>, and <hr>.

Contains text (:contains(text))

Select all elements that contain the specified text.

Examples
  • $('p:contains(nothing special)') selects all <p> elements that contain the text nothing special
  • $('li:contains(second)') selects all <li> elements that contain the text second
Description

The matching text can appear directly within the selected element in any of that element's descendants, or a combination thereof. Therefore, the first example would still select the following paragraph:

<p>This paragraph is <span>nothing <strong>special</strong></span></p>

As with attribute value selectors, text inside the parentheses of :contains() can be written as bare words or surrounded by quotation marks. The text must have matching case to be selected.

Contains element (:has(E))

Select all elements that contain an element matching E.

Examples
  • $('p:has(img)') selects all <p> elements that contain an <img> element as a descendant
  • $('.myclass:has(#myid)') selects all elements with the class myclass that contain a descendant with ID myid
Description

This expression matches an element if an element matched by E exists anywhere among the descendants, and not just the direct children. For example, the first example matches the <p> element in the following HTML code:

<div id="container">
  <div id="inner">
    <p>
      <span><img src="example.jpg" alt="" /></span>
    </p>
  </div>
</div>

Visible (:visible)

Select all elements that are visible.

Examples
  • $('li:visible') selects all <li> elements that are visible
  • $('.myclass:visible') selects all elements with the class myclass that are visible
Description

The :visible selector matches items that are currently visible on the page. Rather than relying on the CSS properties assigned to the element, such as its display and visibility. jQuery determines whether the element is visible by testing its current width and height.

Elements can be considered hidden for several reasons:

  • They have a display value of none
  • They are form elements with type="hidden"
  • Their width and height are explicitly set to 0
  • An ancestor element is hidden, so the element is not shown on the page

If the element satisfies any of these conditions, it will not be matched by the :visible selector.

Hidden (:hidden)

Select all elements that are hidden.

Examples
  • $('li:hidden') selects all <li> elements that are hidden
  • $('.myclass:hidden') selects all elements with the class myclass that are hidden
Description

The :hidden selector matches items that are currently hidden on the page. For details on how this determination is made, see the Description for :visible.

Header element (:header)

Select all elements that are headers, such as <h1> or <h2>.

Examples
  • $(':header') selects all header elements
  • $('.myclass:header') selects all header elements with the class myclass

Currently animating (:animated)

Select all elements that are in the progress of an animation at the time the selector is run.

Examples
  • $(':animated') selects all elements that are currently animating
  • $('.myclass:animated') selects all elements with the class myclass that are currently animating
上一章目录下一章