jQuery的选择器是CSS 1-3,XPath的结合物。jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言。如果你了解CSS(绝大部分WEB开发者都用到的),那么你学起来就很容易了。
同时使用CSS和XPath
看几个例子:
隐藏所有包含有链接的段落:
$("p[a]").hide();
显示页面的第一个段落:
$("p:eq(0)").show();
隐藏所有当前可见的层元素:
$("div:visible").hide();
获取所有无序列表的列表项:
$("ul/li")
/* valid too: $("ul > li") */
取得name值为bar的输入字段的值:
$("input[@name=bar]").val();
所有处于选中状态的单选r按钮:
$("input[@type=radio][@checked]")
如果你对查询语言的工作原理还有疑问,可以。
CSS查询器
jQuery完全支持CSS1.3。
关于CSS的一些资料查看下面的连接:
下面列出来的是支持的CSS查询器的列表式语法:
- * 任何元素
- E 类型为E的元素
- E:root 类型为E,并且是文档的根元素
- E:nth-child(n) 是其父元素的第n个类型为E的子元素
- E:first-child 是其父元素的第1个类型为E的子元素
- E:last-child 是其父元素的最后一个类型为E的子元素
- E:only-child 且是其父元素的唯一一个类型为E的子元素
- E:empty 没有子元素(包括text节点)的类型为E的元素
- E:enabled
- E:disabled 类型为E,允许或被禁止的用户界面元素
- E:checked 类型为E,处于选中状态的用户界面元素(例如单选按钮或复选框)
- E.warning 类型为E,且class属性值为warning
- E#myid 类型为E,ID为 "myid"。(至多匹配一个元素)
- E:not(s) 类型为E,不匹配选择器s
- E F 在类型E后面的类型为F的元素
- E > F 为E元素子元素的F元素
- E + F an F element immediately preceded by an E element
- E ~ F an F element preceded by an E element
不同之处
所有的属性选择器都被写成和XPath极其相似(因为所有的属性都以@符号开始)。
- E[@foo] 拥有foo属性的E元素
- E[@foo=bar] foo属性的值为bar的E元素
- E[@foo^=bar] foo属性的值以字符串"bar"开始的E元素
- E[@foo$=bar] foo属性的值以字符串"bar"结尾的E元素
- E[@foo*=bar] foo属性的值包含有字符串"bar"结尾的E元素
不支持的部分
- E:link
- E:visited an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
- E:active
- E:hover
- E:focus an E element during certain user actions
- E:target an E element being the target of the referring URI
- E::first-line the first formatted line of an E element
- E::first-letter the first formatted letter of an E element
- E::selection the portion of an E element that is currently selected/highlighted by the user
- E::before generated content before an E element
- E::after generated content after an E element
jQuery不支持下列的选择器,因为这些没什么用处。
- E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one
- E:nth-of-type(n) an E element, the n-th sibling of its type
- E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one
- E:first-of-type an E element, first sibling of its type
- E:last-of-type an E element, last sibling of its type
- E:only-of-type an E element, only sibling of its type
- E:lang(fr) an element of type E in language "fr"
XPath 查询器
XPath是jQuery内置支持的一种表达式语言。jQuery支持基本的式。
定位路径
- 绝对路径$("/html/body//p")$("/*/body//p")$("//p/../div")
- 相对路径$("a",this) $("p/a",this)
支持的Axis选择器
- Descendant Element has a descendant element
$("//div//p")
- Child Element has a child element
$("//div/p")
- Preceding Sibling Element has an element before it, on the same axes
$("//div ~ form")
- Parent Selects the parent element of the element
$("//div/../p") 支持的谓词
- [@*] 拥有一个属性$("//div[@*]")
- [@foo] 拥有foo属性$("//input[@checked]")
- [@foo='test'] 属性foo值为'test'$("//a[@ref='nofollow']")
- [Nodelist] Element contains a node list, for example: $("//div[p]")$("//div[p/a]")
支持的谓词,但与XPath和CSS又不同的
- [last()] or [position()=last()]改为:last$("p:last")
- [0] or [position()=0] 改为 :eq(0) or :first$("p:first")$("p:eq(0)")
- [position() < 5] 改为:lt(5)$("p:lt(5)")
- [position() > 2] 改为:gt(2)$("p:gt(2)")
定制的选择器
jQuery包含一些在CSS和XPath都不用到的表达式,但我们觉得它们使用起来非常方便,所以包含进来了。
下列的列表式语法基于不同的CSS选择器,但又有非常相似的名字。
- :even 从匹配的元素集中取序数为偶数的元素
- :odd 从匹配的元素集中取序数为奇数的元素
- :eq(0) and :nth(0) 从匹配的元素集中取第0个元素
- :gt(4) 从匹配的元素集中取序数大于N的元素
- :lt(4) 从匹配的元素集中取序数小于N的元素
- :first 相当于 :eq(0)
- :last 最后一个匹配的元素
- :parent 选择包含子元素(包含text节点)的所有元素
- :contains('test') 选择所有含有指定文本的元素
- :visible 选择所有可见的元素(display值为block 或者visible 、visibility 值为visible的元素,不包括hide域)
- :hidden 选择所有隐藏的元素(非Hide域,且display值为block 或者visible 、visibility 值为visible的元素)
例:
$("p:first").css("fontWeight","bold"); $("div:hidden").show(); $("div:contains('test')").hide();
表单选择器这是为表单提供的一些选择器:
- :input 选择表单元素(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").
同样也可以使用:hidden,详细说明上面已经介绍过。
$('#myForm :input')
如果你需要指定表单:
$('input:radio', myForm)
这将选择myForm表单中所有单选按钮。选择radio通常是用[@type=radio],但是这样用理精简些。
更多的选择器
jQuery选择器可以用一些第三方部件进行扩充:
- to allow selection by CSS property (full plugin to be released simultaneously with 1.1)