jQuery 选择器的使用

jQuery的选择器是CSS 1-3，XPath的结合物。jQuery提取这二种查询语言最好的部分，融合后创造出了最终的jQuery表达式查询语言。如果你了解CSS（绝大部分WEB开发者都用到的），那么你学起来就很容易了。PHPChina 开源社区门户{S%}\0yx6{]

3M&x3n Nl.w%i;b0nK0同时使用CSS和XPathPHPChina 开源社区门户+C_DDY9@(H

看几个例子：PHPChina 开源社区门户 g*Gp8rp}

lcjT#ujO|D0隐藏所有包含有链接的段落：

$("p[a]").hide();PHPChina 开源社区门户K1w
q/?-r

显示页面的第一个段落：

$("p:eq(0)").show();PHPChina 开源社区门户&sp!S/_0P3X

隐藏所有当前可见的层元素：PHPChina 开源社区门户pZFy b:O5]8e

1d)xv;~ w+x6c
MC$j0md0$("div:visible").hide();

获取所有无序列表的列表项：PHPChina 开源社区门户q?B8s:pE!}

$("ul/li")

 /* valid too: $("ul > li") */PHPChina 开源社区门户4j/f&l'jxKP2h2_#h

取得name值为bar的输入字段的值：PHPChina 开源社区门户8S6Rk~W3D

$("input[@name=bar]").val();

Q#z%O0C@/Z2X0所有处于选中状态的单选r按钮：

$("input[@type=radio][@checked]")PHPChina 开源社区门户XB+e7KA^+vF

如果你对查询语言的工作原理还有疑问，可以订阅这里的邮件列表。PHPChina 开源社区门户4r2MM L(a_

[#l-w5GJ;]&ta0CSS查询器

jQuery完全支持CSS1.3。PHPChina 开源社区门户:XE#x3`3\/|#I

关于CSS的一些资料查看下面的连接：PHPChina 开源社区门户p,ky0IV?O

• 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 + Fan F element immediately preceded by an E element
• E ~ Fan F element preceded by an E element

不同之处

V/NOGLq9Y0所有的属性选择器都被写成和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元素 

+HIsm#Bu8U;w)o0不支持的部分PHPChina 开源社区门户8x Y1`!CR i-@'K2qe

• E:link
• E:visitedan 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:focusan E element during certain user actions
• E:targetan E element being the target of the referring URI
• E::first-linethe first formatted line of an E element
• E::first-letterthe first formatted letter of an E element
• E::selectionthe portion of an E element that is currently selected/highlighted by the user
• E::beforegenerated content before an E element
• E::aftergenerated content after an E element

j:~BO,ON|0jQuery不支持下列的选择器，因为这些没什么用处。

• 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-typean E element, first sibling of its type
• E:last-of-typean E element, last sibling of its type
• E:only-of-typean E element, only sibling of its type
• E:lang(fr)an element of type E in language "fr"

XPath 查询器

XPath是jQuery内置支持的一种表达式语言。jQuery支持基本的XPath表达式。

定位路径

• 绝对路径
  5h;h
  p1^d%uw0$("/html/body//p")PHPChina 开源社区门户Z @'V&q!mk|2[i
  $("/*/body//p")PHPChina 开源社区门户 P*Bpy E-~"YE.^$y8K
  $("//p/../div")
• 相对路径PHPChina 开源社区门户*G/w)pV?8n4v%HU6e1C'V,_
  $("a",this)PHPChina 开源社区门户kqD F~Hli.Z
  $("p/a",this)

支持的Axis选择器

• DescendantElement has a descendant element

$("//div//p")
 v5T5n8c"[0

• ChildElement has a child element

$("//div/p")
'rXAG/`8Nxa0

• Preceding SiblingElement has an element before it, on the same axes

$("//div ~ form")
A'Uq	E	f0

• ParentSelects the parent element of the element

$("//div/../p")PHPChina 开源社区门户
heM%{S0|!x]l
支持的谓词

• [@*]拥有一个属性PHPChina 开源社区门户"y%O?(S6UI
  $("//div[@*]")
• [@foo]拥有foo属性
  -f.`.c(p5q5s'K0$("//input[@checked]")
• [@foo='test']属性foo值为'test'PHPChina 开源社区门户Bk:l z8Of.u6]\
  $("//a[@ref='nofollow']")
• [Nodelist]Element contains a node list, for example: 
  5G1{$y7gGoH5G0$("//div[p]")
  7{fx%r2roEs7W0$("//div[p/a]")

qm-hg2k7y1Z0支持的谓词，但与XPath和CSS又不同的PHPChina 开源社区门户!WUrED5Fr5I

• [last()] or [position()=last()]改为:lastPHPChina 开源社区门户,y@,F2StJ nW
  $("p:last")
• [0] or [position()=0]改为:eq(0) or :first
  Z#{7}Pvch0$("p:first")
  Jy4?J5Y}!['a0$("p:eq(0)")
• [position() < 5]改为:lt(5)PHPChina 开源社区门户h2{N)hr/B
  $("p:lt(5)")
• [position() > 2]改为:gt(2)
  kz+dJ7wm7T0$("p:gt(2)")

定制的选择器

d7^] af#|$p0jQuery包含一些在CSS和XPath都不用到的表达式，但我们觉得它们使用起来非常方便，所以包含进来了。

8h DJYR1E/[0下列的列表式语法基于不同的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的元素)

例：PHPChina 开源社区门户BEMB'V/c4}$rC

$("p:first").css("fontWeight","bold");
"IPO"S6E0$("div:hidden").show();PHPChina 开源社区门户K
O{ Wa
j0T1z
$("div:contains('test')").hide();
I?2s
\Aiw0

q"iyf?0表单选择器
3vrOUT-RrY5bC@0这是为表单提供的一些选择器：PHPChina 开源社区门户+H jJ8[b#U7l+p:n

• :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").

K Q-uf \%Y ~;~0同样也可以使用:hidden，详细说明上面已经介绍过。

$('#myForm :input')PHPChina 开源社区门户t.e,{P~ T5~x

xO3e[@2nc0如果你需要指定表单：PHPChina 开源社区门户)o{3{Ru:YW0Z

5mg}IO @I1i0$('input:radio', myForm)

这将选择myForm表单中所有单选按钮。选择radio通常是用[@type=radio]，但是这样用理精简些。