jQuery1.2选择器

jQuery1.2选择器

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

基本选择器

 

#myid 

返回: <jQuery对象>

匹配一个idmyid的元素。

element 

返回: <jQuery对象> 数组

匹配所有的element元素

.myclass 

返回: <jQuery对象> 数组

匹配所有classmyclass的元素

* 

返回: <jQuery对象> 数组

匹配所有元素。该选择器会选择文档中所有的元素,包括htmlheadbody

selector1,selector2,selectorN 

返回: <jQuery对象> 数组

匹配所有满足selector1selector2selectorN的元素

层次选择

elementParent elementChild 

返回: <jQuery对象> 数组

匹配elementParent下的所有子元素elementChild例如:$("div p") 选择所有div下的p元素

elementParent > elementChild  

返回: <jQuery对象> 数组

匹配elementParent下的子元素elementChild例如:$("div>p") 选择所有上级元素为divp元素

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对象> 数组

匹配所有的标题元素,例如h1h2h3……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对象> 数组

匹配所有的inputtextareaselectbutton

: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浏览器下,选择的对象是inputbutton元素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对象> 数组

匹配属性attributevalue的元素

[attribute!=value] 

返回: <jQuery对象> 数组

匹配属性attribute不为value的元素

[attribute^=value] 

返回: <jQuery对象> 数组

匹配属性attribute的值以value开始的元素

[attribute$=value] 

返回: <jQuery对象> 数组

匹配属性attribute的值以value结尾的元素

[attribute*=value] 

返回: <jQuery对象> 数组

匹配属性attribute的值包含value的元素

[selector1][selector2][selectorN] 

返回: <jQuery对象> 数组

匹配满足属性选择器selector1selector2selectorN的元素

绯雨的天空

 

热榜

这个热榜展示了最常用选择器的排名,数据是根据使用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(有些需要登录才能看到)。

  1. http://code.google.com/
  2. http://www.dell.com/
  3. http://www.nbc.com
  4. http://www.cbsnews.com/
  5. http://politics.msnbc.com
  6. https://bankofamerica.com/
  7. http://bbc.co.uk/
  8. http://about.reuters.com/home/
  9. http://digg.com
  10. http://www.businessweek.com
  11. http://www.newsweek.com
  12. https://sellercentral.amazon.com/gp/homepage.html
  13. http://softwarecommunity.intel.com
  14. http://oracle.com/
  15. http://cisco.com/
  16. http://idle.slashdot.org/
  17. http://technorati.com
  18. http://sourceforge.net
  19. http://intuit.com
  20. http://turbotax.com
  21. http://quicken.com
  22. http://quickbooks.com
  23. http://ae.com/
  24. http://success.salesforce.com
  25. http://newsgator.com
  26. http://calendar.boston.com
  27. http://www.myyearbook.com
  28. http://nypost.com
  29. http://www.miamiherald.com/
  30. http://www.foodnetwork.com/
  31. http://www.rei.com/
  32. http://theonion.com
  33. http://feedburner.com
  34. http://pokerroom.com
  35. http://warnerbrosrecords.com/
  36. http://defjam.com
  37. http://www.pinpointtravel.com/
  38. http://classmates.com
  39. http://fandango.com
  40. http://pandora.com
  41. http://isohunt.com
  42. http://askaninja.com
  43. http://vodafone.co.uk
  44. http://www.independent.ie/
  45. http://islandrecords.com
  46. http://arstechnica.com
  47. http://www.dn.se/
  48. http://zeit.de
  49. http://linux.com
  50. http://www.smashbros.com
  51. http://quepasa.com
  52. http://www.dzone.com/
  53. http://my.barackobama.com
  54. http://joost.com
  55. http://www.wpni.com
  56. http://www.ifilm.com
  57. http://www.logitech.com
  58. http://jaiku.com/
  59. http://activestate.com/

 

 

转帖:jquery选择器的使用

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

同时使用CSSXPath

看几个例子:

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

[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
类型为EID "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
属性的值为barE元素
    * 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 查询器

XPathjQuery内置支持的一种表达式语言。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]")

支持的谓词,但与XPathCSS又不同的

    * [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包含一些在CSSXPath都不用到的表达式,但我们觉得它们使用起来非常方便,所以包含进来了。

下列的列表式语法基于不同的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)

posted on 2008-03-26 15:33  Q.Lee.lulu  阅读(2511)  评论(2编辑  收藏  举报