E,F,G 一个类型为 E 的 element,一个类型为 F 的 element,一个类型为 G 的 element(用于选择多个 element)
1.2 jQuery 支持,但(跟 CSS 规范)有所不同的选择器语法
不同之处是必须在属性名前加上符号“@”
- E[@foo] 一个类型为 E 的 element,它具有属性“foo”
- E[@foo=bar] 一个类型为 E 的 element,它具有属性“foo = bar”
- E[@foo^=bar] 一个类型为 E 的 element,它具有属性“foo“,并且其属性值是以”bar“开头的
- E[@foo$=bar] 一个类型为 E 的 element,它具有属性“foo“,并且其属性值是以”bar“结尾的
- E[@foo*=bar] 一个类型为 E 的 element,它具有属性“foo“,并且其属性值包含”bar“
- 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)
$(”/html/body//p”) $(”body//p”) $(”p/../div”)
- 相对路径,相对于设置的 context node
“this”
$(”p/*”, this) $(”/p//a”, this)
2.2 支持 Axis 选择器
- “//” : 子孙 elements (div 所有类型为 p 的子孙 elements)
$(”/div//p”) $(”//div//p”)
- “/” : 子 elements (div 所有类型为 p 的子 elements)
$(”//div/p”)
- “~” : 兄弟 elements (div 所有类型为 form 的兄弟 elements)
$(”//div ~ form”)
- ““..”: 父 elements (div 的父 element 下的类型为 p 的子 elements)
$(”//div/../p”)
2.3 支持谓词语法(Predicates)
$(”//input[@foo]”)
- [@foo=’test’] 具有属性“foo = ‘test’”
$(”//a[@foo = ‘tsxt’]”)
- [Nodelist] 其子孙 elements 匹配 Nodelist(用于过滤)
$(”//div[p]”) $(”//div[p/a]”)
2.4 jQuery 支持,但(跟 XPath 规范)有所不同的谓词语法(Predicates)
- [last()] or [position()=last()] becomes :last(选择结果集中的最后一个 element)
$(”p:last”)
- [0] or [position()=0] becomes :eq(0) or :first(选择结果集中的第个 element)
$(”p:first”) $(”p:eq(0)”)
- [position() < 5] becomes :lt(5)(选择结果集中索引大于5的 elements)
$(”p:lt(5)”)
- [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)
- :even 结果集中其索引为偶数(双数)的 elements
- :odd 结果集中其索引为奇数(单数)的 elements
- :eq(N) and :nth(N) 选择结果集中索引为 N 的 elements
- :gt(N) 选择结果集中索引大于 N 的 elements
- :lt(N) 选择结果集中索引小于 N 的 elements
- :first 选择结果集中的第一个 element (相当于 eq(0) 或者 nth(0))
- :last 选择结果集中的最后一个 element
- :parent 在结果集中选择 elements,它必须具有子 elements(包括文本节点)(跟 :empty 相反)
- :contains(’test’) 选择结果集中包含有指定文本的 elements
- :visible 选择所有可见(visible)的 elements( display 属性的值等于 visible、block、inline,或者 visibility 属性的值等于 visible,不包括 hidden 类型的 elements(关于 hidden 类型,如<input type=”hidden” …>))
- :hidden 选择所有隐藏(visible)的 elements( display 属性的值等于 none,或者 visibility 属性的值等于 hidden,不包括 hidden 类型的 elements(关于 hidden 类型,如<input type=”hidden” …>))
例子:
$(”p:first”).css(”fontWeight”,”bold”); $(”div:hidden”).show(); $(”/div:contains(’test’)”, this).hide();
3.2 表单选择器(Form Selectors)
- :input 选择所有表单 elements(input, select, textarea, button)
- :text 选择所有文本域 (type=”text”).
- :password 选择所有密码域 (type=”password”).
- :radio 选择所有单选按钮 (type=”radio”).
- :checkbox 选择所有复选框 (type=”checkbox”).
- :submit 选择所有提交按钮 (type=”submit”).
- :image 选择所有图像域 (type=”image”).
- :reset 选择所有重置按钮 (type=”reset”).
- :button 选择所有按钮 (type=”button”).
- :file 选择所有 <input type=”file”>.
:hidden 也是可用的,在上面的3.1 节有介绍。
建议在使用表单选择时提供一个 context root,例子:
$(’#myForm :input’)
$(’input:radio’, myForm)
上面最后的一行语句将会选择所有的“myForm”表单里的所有单选按钮,相当于[@type=radio](即 $(”[@type = radio],myForm”)),但用表单选择器会稍微快点,尤其对于大型的表单。
3.3 更多选择器
jQuery 选择器可以通过第三方的插件来扩展:
参考资料:
http://docs.jquery.com/DOM/Traversing/Selectors