jquery CSS和xpath选择器

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 E[@foo=bar]一个类型为 E 的 element，它具有属性“foo = bar”

o E[@foo^=bar]一个类型为 E 的 element，它具有属性“foo“，并且其属性值是以”bar“开头的

o E[@foo$=bar]一个类型为 E 的 element，它具有属性“foo“，并且其属性值是以”bar“结尾的

o E[@foo*=bar]一个类型为 E 的 element，它具有属性“foo“，并且其属性值包含”bar“

o E[@foo=bar][@baz=bop]一个类型为 E 的 element，它具有属性“foo = bar”和属性”baz = bop“

注：以上的“bar”和“bop”均为字符串。

1.3 jQuery 不支持的选择器语法（略）

因为没什么实际的作用，所以这里也不作赘述，想了解详情的可以参阅官方帮助文档。

1.4 Contex 和 Anchoring

可以设置 contex 来 anchor（定位）选择器，这也是 jQuery 跟 CSS 规范的一个不同之处。用户可以使用语法：$(expr, context)来设置context root。默认的 context root 是整个文档。

2. XPath 选择器（XPath Selectors）

XPath 也是 jQuer 支持的选择器语法之一。jQuery 支持基本的XPath 语法。下面以一些例子作说明。

2.1 定位路径（Location Paths）

o绝对路径，相对于整个 HTML 文档

$(”/html/body//p”) $(”body//p”) $(”p/../div”)

o相对路径，相对于设置的 context node“this”

$(”p/*”, this) $(”/p//a”, this)

2.2 支持 Axis 选择器

o“//” ：子孙 elements （div 所有类型为 p 的子孙 elements）$(”/div//p”)$(”//div//p”)

o“/” ：子 elements （div 所有类型为 p 的子 elements）$(”//div/p”)

o“~” ：兄弟 elements（div 所有类型为 form 的兄弟elements）

$(”//div ~ form”)

o““..”：父 elements （div 的父 element 下的类型为 p 的子 elements）

$(”//div/../p”)

2.3 支持谓词语法（Predicates）

o[@foo]具有属性“foo”

$(”//input[@foo]”)

o[@foo=’test’]具有属性“foo = ‘test’”

$(”//a[@foo = ‘tsxt’]”)

o[Nodelist]其子孙 elements 匹配 Nodelist（用于过滤）$(”//div[p]”) $(”//div[p/a]”)

2.4 jQuery 支持，但（跟 XPath 规范）有所不同的谓词语法（Predicates）

o[last()] or [position()=last()] becomes :last（选择结果集中的最后一个 element）

$(”p:last”)

o[0] or [position()=0] becomes :eq(0) or :first（选择结果集中的第个 element）

$(”p:first”) $(”p:eq(0)”)

o[position() < 5] becomes :lt(5)（选择结果集中索引大于5的elements）

$(”p:lt(5)”)

o[position() > 2] becomes :gt(2)（选择结果集中索引小于2的elements）

$(”p:gt(2)”)

注：“becomes” 前面的是 XPath 的 predicates 语法，后面是等价的jQuery 语法。

3. jQuery 自定义的选择器（Custom Selectors）

jQuery 具有一些自定义的选择器语法，这些语法虽然并不在 CSS 和XPath 规范之内，但它们相当的便捷，所在 jQuery 将它们囊括进来。

3.1 自定义选择器（Custom Selectors）

o:even结果集中其索引为偶数（双数）的 elements

o:odd结果集中其索引为奇数（单数）的 elements

o:eq(N) and :nth(N)选择结果集中索引为 N 的 elements

o:gt(N)选择结果集中索引大于 N 的 elements

o:lt(N)选择结果集中索引小于 N 的 elements

o:first选择结果集中的第一个 element （相当于 eq(0) 或者nth(0)）

o:last选择结果集中的最后一个 element

o:parent在结果集中选择 elements，它必须具有子 elements（包括文本节点）（跟 :empty 相反）

o:contains(’test’)选择结果集中包含有指定文本的 elements o:visible选择所有可见（visible）的 elements（ display 属性的值等于 visible、block、inline，或者 visibility 属性的值

等于 visible，不包括 hidden 类型的 elements（关于 hidden 类

型，如））

o:hidden选择所有隐藏（visible）的 elements（ display 属性的值等于 none，或者 visibility 属性的值等于 hidden，不包括

hidden 类型的 elements（关于 hidden 类型，如

type=”hidden” …>））

例子：

$(”p:first”).css(”fontWeight”,”bold”);

$(”div:hidden”).show();$(”/div:contains(’test’)”,

this).hide();

3.2 表单选择器（Form Selectors）

o:input选择所有表单 elements（input, select, textarea, button）

o:text选择所有文本域(type=”text”).

o:password选择所有密码域(type=”password”).

o:radio选择所有单选按钮(type=”radio”).

o:checkbox选择所有复选框(type=”checkbox”).

o:submit选择所有提交按钮(type=”submit”).

o:image选择所有图像域(type=”image”).

o:reset选择所有重置按钮(type=”reset”).

o:button选择所有按钮(type=”button”).

o:file选择所有.

:hidden也是可用的，在上面的3.1 节有介绍。

建议在使用表单选择时提供一个 context root，例子：

$(’#myForm :input’)

$(’input:radio’, myForm)

上面最后的一行语句将会选择所有的“myForm”表单里的所有单选按钮，相当于[@type=radio]（即$(”[@type = radio],myForm”)），但用表单选择器会稍微快点，尤其对于大型的表单。

3.3 更多选择器

jQuery 选择器可以通过第三方的插件来扩展：

o More Selectors Plugin

o Mike Alsup on Custom Selectors

o Patch to allow selection by CSS property (full plugin to be released simultaneously with 1.1)

参考资料：

https://www.360docs.net/doc/8c10355196.html,/DOM/Traversing/Selectors