jQuery 选择器的使用

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 1 CSS 2 CSS 3 下面列出来的是支持的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支持基本的XPath表达式。 定位路径 绝对路径 $("/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选择器可以用一些第三方部件进行扩充： More Selectors Plugin Mike Alsup on Custom Selectors Patch to allow selection by CSS property (full plugin to be released simultaneously with 1.1)

译者：wuchang（无常翻译：http://wuchang.cnblogs.com）