jQuery1.2选择器

最新推荐文章于 2024-09-01 10:06:57 发布

diandi5157

最新推荐文章于 2024-09-01 10:06:57 发布

阅读量119

点赞数

原文链接：http://www.cnblogs.com/QLeelulu/archive/2008/03/26/1123204.html

版权

jQuery1.2选择器

以下的文档根据官网1.2选择器汉化，并做相应的调整及加入了部份示例。
由于实际使用中选择器在IE和非IE下会有不同的效果，请参照红色的字样。如有错误请及时联系我。
绯雨汉化：http://feiyu.asgard.cn

基本选择器

#myid	返回: <jQuery对象>
匹配一个id为myid的元素。
element	返回: <jQuery对象> 数组
匹配所有的element元素
.myclass	返回: <jQuery对象> 数组
匹配所有class为myclass的元素
*	返回: <jQuery对象> 数组
匹配所有元素。该选择器会选择文档中所有的元素，包括html，head，body
selector1,selector2,selectorN	返回: <jQuery对象> 数组
匹配所有满足selector1或selector2或selectorN的元素

层次选择

elementParent elementChild	返回: <jQuery对象> 数组
匹配elementParent下的所有子元素elementChild。例如：$("div p") 选择所有div下的p元素
elementParent > elementChild	返回: <jQuery对象> 数组
匹配elementParent下的子元素elementChild。例如：$("div>p") 选择所有上级元素为div的p元素
prev+next	返回: <jQuery对象> 数组
匹配prev同级之后紧邻的元素next。例如：$("h1+div") 选择所有div同级之前为h1的元素（<h1 /><div />）
prev ~ siblings	返回: <jQuery对象> 数组
匹配prev同级之后的元素siblings。例如：$("h1~div") 可以匹配（<h1 /><div /><div />）

基本滤镜

:first	返回: <jQuery对象>
匹配第一个元素
:last	返回: <jQuery对象>
匹配最后一个元素
:not(selector)	返回: <jQuery对象> 数组
匹配不满足selector的元素
:has(selector)	返回: <jQuery对象> 数组
匹配包含满足selector的元素。此选择器为1.2新增
:even	返回: <jQuery对象> 数组
从匹配的元素集中取序数为偶数的元素。
:odd	返回: <jQuery对象> 数组
从匹配的元素集中取序数为奇数的元素。
:eq(index)	返回: <jQuery对象> 数组
从匹配的元素集中取第index个元素
:gt(index)	返回: <jQuery对象> 数组
从匹配的元素中取序数大于index的元素
:lt(index)	返回: <jQuery对象> 数组
从匹配的元素中取序数小于index的元素
:header	返回: <jQuery对象> 数组
匹配所有的标题元素，例如h1，h2，h3……hN。此选择器为1.2新增
:animated	返回: <jQuery对象> 数组
匹配正在执行动画的元素。此选择器为1.2新增
:empty	返回: <jQuery对象> 数组
匹配所有没有子元素（包括文本内容）的元素
:parent	返回: <jQuery对象> 数组
匹配包含子元素（包含文本内容）的所有元素
:contains(text)	返回: <jQuery对象> 数组
匹配所有含有text的元素
:hidden	返回: <jQuery对象> 数组
匹配所有隐藏的元素，包含属性type值为hidden的元素
:visible	返回: <jQuery对象> 数组
匹配所有非隐藏的元素

子元素滤镜

E:nth-child(index/even/odd/equation)	返回: <jQuery对象> 数组
匹配所有E在其父元素下满足（index/even/odd/equation）条件的集合。注：下标从1开始
E:first-child	返回: <jQuery对象> 数组
匹配所有E在其父元素下是第一个子元素的集合。例如：HTML（<div><p id="p1"></p></div><div><p id="p2"></p><p id="p3"></p></div>"），使用$("p:first-child")，选取：<p id="p1"></p><p id="p2"></p>
E:last-child	返回: <jQuery对象> 数组
匹配所有E在其父元素下是最后一个子元素的集合。例如：同上的HTML，使用$("p:last-child")，选取：<p id="p1"></p><p id="p3"></p>
E:only-child	返回: <jQuery对象> 数组
匹配所有E是其父元素的唯一子元素的集合。例如：同上的HTML，使用$("p:only-child")，选取：<p id="p1"></p>

表单滤镜

:input	返回: <jQuery对象> 数组
匹配所有的input、textarea、select、button
:text	返回: <jQuery对象> 数组
匹配文本域。注：在IE浏览器下，选择的对象是所有type属性为text的元素，在非IE浏览器下，选择的对象是input元素type属性为text的元素
:password	返回: <jQuery对象> 数组
匹配密码域。注：在IE浏览器下，选择的对象是所有type属性为password的元素，在非IE浏览器下，选择的对象是input元素type属性为password的元素
:radio	返回: <jQuery对象> 数组
匹配单选按钮。注：在IE浏览器下，选择的对象是所有type属性为radio的元素，在非IE浏览器下，选择的对象是input元素type属性为radio的元素
:checkbox	返回: <jQuery对象> 数组
匹配复选框。注：在IE浏览器下，选择的对象是所有type属性为checkbox的元素，在非IE浏览器下，选择的对象是input元素type属性为checkbox的元素
:submit	返回: <jQuery对象> 数组
匹配提交按钮。注：在IE浏览器下，选择的对象是所有type属性为submit的元素，在非IE浏览器下，选择的对象是input元素type属性为submit的元素和button元素type属性为空或为submit的元素
:image	返回: <jQuery对象> 数组
匹配图像域。注：在IE浏览器下，选择的对象是所有type属性为image的元素，在非IE浏览器下，选择的对象是input元素type属性为image的元素
:reset	返回: <jQuery对象> 数组
匹配重置按钮。注：在IE浏览器下，选择的对象是所有type属性为reset的元素，在非IE浏览器下，选择的对象是input或button元素type属性为reset的元素
:button	返回: <jQuery对象> 数组
匹配按钮。注：在IE浏览器下，选择的对象是所有type属性为button的元素和元素名为button的元素，在非IE浏览器下，选择的对象是input元素type属性为button的元素和元素名为button的元素
:file	返回: <jQuery对象> 数组
匹配文件域。注：在IE浏览器下，选择的对象是所有type属性为file的元素，在非IE浏览器下，选择的对象是input元素type属性为file的元素
:enabled	返回: <jQuery对象> 数组
匹配所有可用的元素。注：即:not(:disabled)，参考:disabled的注释
:disabled	返回: <jQuery对象> 数组
匹配所有禁用的元素。注：在非IE浏览器下，选择的对象是禁用的表单元素
:checked	返回: <jQuery对象> 数组
匹配所有被选中的表单。注：在IE浏览器下，选择的对象是含有checked属性的所有元素
:selected	返回: <jQuery对象> 数组
匹配所有选择的表单。注：在IE浏览器下，选择的对象是含有selected属性的所有元素

属性滤镜

[attribute]	返回: <jQuery对象> 数组
匹配拥有attribute属性的元素
[attribute=value]	返回: <jQuery对象> 数组
匹配属性attribute为value的元素
[attribute!=value]	返回: <jQuery对象> 数组
匹配属性attribute不为value的元素
[attribute^=value]	返回: <jQuery对象> 数组
匹配属性attribute的值以value开始的元素
[attribute$=value]	返回: <jQuery对象> 数组
匹配属性attribute的值以value结尾的元素
*[attribute=value]**	返回: <jQuery对象> 数组
匹配属性attribute的值包含value的元素
[selector1][selector2][selectorN]	返回: <jQuery对象> 数组
匹配满足属性选择器selector1、selector2、selectorN的元素

绯雨的天空

热榜

这个热榜展示了最常用选择器的排名，数据是根据使用jQuery的著名网站分析得来的。热榜中的选择器已被归类（如，'div span'和'ul li'都是'tag tag'形式）。红色部分表示与W3C规范不兼容。% Used一栏表示选择器使用百分比（# of Uses一栏表示选择器使用次数）。只用过一次的选择器没在热榜中罗列。

*Selector*	% Used	# of Uses
#id	51.290%	1431
.class	13.082%	365
tag	6.416%	179
tag.class	3.978%	111
#id tag	2.151%	60
tag#id	1.935%	54
#id:visible	1.577%	44
#id .class	1.434%	40
.class .class	1.183%	33
*	0.968%	27
#id tag.class	0.932%	26
#id:hidden	0.789%	22
tag[name=value]	0.645%	18
.class tag	0.573%	16
[name=value]	0.538%	15
tag tag	0.502%	14
#id #id	0.430%	12
#id tag tag	0.358%	10
tag[name$=value]	0.323%	9
#id :checkbox	0.323%	9
#id #id :selected	0.287%	8
.class tag.class	0.287%	8
tag#id > tag	0.287%	8
tag, tag	0.251%	7
tag.class tag	0.251%	7
tag .class	0.215%	6
:radio	0.215%	6
#id, #id, #id	0.215%	6
#id .class tag	0.215%	6
:text	0.215%	6
tag, tag, tag	0.215%	6
.class .class .class	0.215%	6
#id tag[name=value]	0.179%	5
:checkbox	0.179%	5
tag[name*=value]	0.179%	5
#id, #id	0.179%	5
tag.class tag.class tag	0.143%	4
tag.class .class	0.143%	4
tag:selected	0.143%	4
.class .class .class tag	0.143%	4
.class.class	0.143%	4
tag:file	0.143%	4
tag, tag[name=value]	0.143%	4
#id, tag[name$=value]	0.143%	4
tag[name!=value]	0.143%	4
.class .class tag + .class	0.108%	3
.class .class tag:gt(2)	0.108%	3
tag:submit, tag:image, tag:submit	0.108%	3
tag.class tag.class tag.class tag.class tag.class tag.class	0.108%	3
#id tag tag.class tag.class tag	0.108%	3
:input	0.108%	3
tag.class tag.class	0.108%	3
.class .class tag:has(tag[name^=value])	0.108%	3
#id tag.class tag	0.108%	3
tag:eq(0)	0.108%	3
#id :input	0.108%	3
tag#id tag#id tag	0.108%	3
.class, .class	0.108%	3
tag:eq(1)	0.108%	3
tag#id tag	0.108%	3
.class tag#id	0.072%	2
#id tag:first	0.072%	2
#id tag tag[name!=value]	0.072%	2
.class #id tag tag	0.072%	2
tag#id tag.class	0.072%	2
tag:filled	0.072%	2
tag:first	0.072%	2
.class tag tag.class	0.072%	2
#id tag.class tag tag.class	0.072%	2
tag.class tag.class tag.class	0.072%	2
#id #id #id tag.class	0.072%	2
tag[name$=value], #id	0.072%	2
tag tag tag	0.072%	2
:submit, tag:image	0.072%	2
.class .class tag	0.072%	2
[name=value]:first	0.072%	2
.class .class, #id	0.072%	2
#id .class tag.class	0.072%	2
.class #id .class	0.072%	2
#id #id tag tag	0.072%	2
tag[name]	0.072%	2
tag, tag, tag, tag	0.072%	2
tag#id tag#id tag.class	0.072%	2
tag:unchecked	0.072%	2
#id .class.class	0.072%	2
#id tag.class tag > tag	0.072%	2
.class tag tag tag	0.072%	2
tag.class:first	0.072%	2
.class tag.class tag	0.072%	2
tag#id tag.class:first	0.072%	2
#id tag.class tag.class tag	0.072%	2
.class tag tag	0.072%	2
#id .class tag tag	0.072%	2
#id tag tag#id	0.072%	2
tag.class > tag	0.072%	2
#id .class *	0.072%	2
:input:visible	0.072%	2
#id .class .class	0.072%	2
#id > tag > tag > tag > tag > tag	0.072%	2
#id tag.class tag tag:gt(0)	0.072%	2
.class, .class, .class	0.072%	2
#id #id *	0.072%	2
#id > *:not(#id)	0.072%	2
#id tag[name^=value]	0.072%	2
.class tag.class	0.072%	2
tag:blank	0.072%	2

站点

并非所有站点URLs包含jQuery（有些需要登录才能看到）。

转帖：jquery选择器的使用

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

同时使用CSS和XPath

看几个例子：

隐藏所有包含有链接的段落：

[php]$("p[a]").hide();[/php]

显示页面的第一个段落：

$("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)

转载于:https://www.cnblogs.com/QLeelulu/archive/2008/03/26/1123204.html