精通jQuery选择器使用.docVIP

精通jQuery选择器使用 /junval/archive/2007/10/25/1843472.aspx jQuery 具有一个相当强大的选择器引擎，提供了完整的选择器语法，允许我们选择几乎所有的元素组合。jQuery 的选择器语法主要是基于 CSS3 和 XPath 的，对 CSS3 和 XPath 了解越多，使用 jQuery 时就越显得心应手。有关 CSS 和 XPath，请参阅以下链接： * CSS 1 * CSS 2 * CSS 3 * xPath 值得注意的是， CSS3 并没有得到现今所有浏览器的支持，因此我们很少使用它。然而，我们仍然可以在 jQuery 中使用 CSS3 选择元素，因为 jQuery 具备自己的自定义选择器引擎，并且实现了对 CSS3 的支持。 想了解 jQuery 选择器更多信息，可以访问 jQuery 的官方文档有关 Selector 的部分。下面，在原官方文档的基础上作一些简单的翻译和说明。 1. CSS 选择器（CSS Selectors） jQuery 完整地支持 CSS 1-3，并且可以在（选择器）表达式里加入自定义的 CSS-like （和xPath）。 1.1 jQuery 支持的 CSS 选择器语法 * * 任何 element * E 类型为 E 的所有element（其实 E 可以是任何 element） * E:nth-child(n) 一个类型为 E 的 element，它是其父 element 的第 n 个子 element * E:first-child 一个类型为 E 的 element，它是其父 element 的第一个子 element （相当于E:nth-child(0)） * E:last-child 一个类型为 E 的 element，它是其父 element 的最后一个子 element * E:only-child 一个类型为 E 的 element，它是其父 element 的唯一子 element * E:empty 一个类型为 E 的用户界面（UI） element，它没有子 element（包括 文本 element） * E:enabled 一个类型为 E 的用户界面（UI） element，它被设置为禁止（disabled） * E:disabled 一个类型为 E 的用户界面（UI） element，它被设置为允许（enabled） * E:checked 一个类型为 E 的用户界面（UI） element，它处于选中（checked）状态（适用于单选按钮和复选框） * E:selected 一个类型为 E 的用户界面（UI） element，它处于被选择（selected）状态（在选择范围内，有一个或多个可供选择的 element ）。注意：selected 属性并不在 CSS 的规范内，但jQuery 提供内部支持 * E.myclass 一个类型为 E 的 element，它的 class 类是“myclass” * E#myid 一个类型为 E 的 element，它的 id 是“myid” * E:not(s) 一个类型为 E 的 element，并且结果集中的 element 不匹配（不包含）选择器 s（用作过滤） * E F 一个类型为 F 的 element，它是类型为E 的 element 的子孙 element（注意是子孙 element） * E F 一个类型为 F 的 element，它是类型为E 的 element 的子 element（注意是子 element） * E + F 一个类型为 F 的 element，它是紧跟在类型为E 的 element 后面的一个兄弟 element（注意 F 是 E 的兄弟节点，并且是紧跟随其后的一个） * E ~ F 一个类型为 F 的 element，它是类型为E 的 element 后面的一个兄弟 element（注意 F 是 E 的兄弟节点，并且位置在E 的后面） * E,F,G 一个类型为 E 的 element，一个类型为 F 的 element，一个类型为 G 的 element（用于选择多个 element） 1.2 jQuery 支持，但（跟 CSS 规范）有所不同的选择器语法 不同之处是必须在属性名前加上符号“@” o E[@foo] 一个类型为 E 的 element，它具有属性“foo” o