jQuery 选择器使用大全（标签选择器，ID选择器等）

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)