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(有些需要登录才能看到)。

  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-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

jQuery1.2选择器相关推荐

  1. jQuery1.2选择器(1)

    基本选择器 #myid 返回: <jQuery对象> 匹配一个id为myid的元素. element 返回: <jQuery对象> 数组 匹配所有的element元素 .myc ...

  2. jquery1.9学习笔记 之选择器(基本元素五)

    多种元素选择器  jQuery("selector1,selector2,selectorN") 例子: <!doctype html> <html lang=' ...

  3. jquery1.9学习笔记 之选择器(基本元素四)

    ID选择器("#id") 描述: 选择与给出ID属性匹配的单元标签. 对于ID选择器,jquery使用JS的函数document.getElementById(),当一个标签附加到 ...

  4. jQuery-1.样式篇---选择器

    jQuery选择器之id选择器 页面的任何操作都需要节点的支撑,开发者如何快速高效的找到指定的节点也是前端开发中的一个重点.jQuery提供了一系列的选择器帮助开发者达到这一目的,让开发者可以更少的处 ...

  5. jQuery-1.9.1源码分析系列(二)jQuery选择器续2——筛选

    前面分析了选择器的结构和几个解析函数,接下来分析jQuery对象的伪类选择器.这里所谓的jQuery对象的伪类选择器就是从已有的jQuery对象(元素集合)中筛选出指定的集合出来. 4.    jQu ...

  6. JQUERY1.9学习笔记 之内容过滤器(三) has选择器

    描述:选择至少包含一个元素,匹配指定的标签的标签. jQuery( ":has(selector)" ) 例:给所有的div添加一个类"test",在他们中有一 ...

  7. jQuery-1.9.1源码分析系列(三) Sizzle选择器引擎——一些有用的Sizzle API

    说一下Sizzle中零碎的API.这些API有的被jQuery接管,直接使用jQuery.xxx就可以使用,有的没有被接管,如果要在jQuery中使用,使用方法是jQuery.find.xxx. 具体 ...

  8. jQuery选择器实现隔行变色和使用javaScript实现隔行变色

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...

  9. jQuery学习笔记——jQuery选择器详解种类与方法

    jQuery的选择器根据页面中元素的不同,可以分为基本选择器.层次选择器.表单选择器.过滤选择器,而过滤选择器又有简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器和表 ...

最新文章

  1. CString工作原理和常见问题分析
  2. 《ActionScript 3.0基础教程》——1.4 对象参数
  3. centos7arm进入图形化_CentOS 7 安装图形化界面
  4. Linux中的通配符
  5. Pandas matplotlib 无法显示中文 Ubuntu16.04
  6. IDEA使用笔记(八)——自动生成 serialVersionUID 的设置
  7. 不怂Java进制转换(洛谷P1143题题解,Java语言描述)
  8. Python批量检查docx文档中文本框的内容是否正确
  9. Android官方命令深入分析之虚拟机
  10. 化敌为友,微软出手优化 Chrome!
  11. 【转】python编写规范——中标软件有限公司测试中心
  12. Codeforces 1032F Vasya and Maximum Matching dp
  13. macOS 10.14安装win10教程 bootcamp篇
  14. VP9编解码标准知识总结
  15. 关于十六进制发送和显示(VS上位机和下位机)
  16. 如何一键修改CAD图纸底图颜色?
  17. Caused by: java.lang.IllegalArgumentException报错
  18. python 如何同时遍历两个列表
  19. jQuery筛选-文档处理
  20. Linux环境下静默安装oracle12cR2

热门文章

  1. 2021-2025年中国智能眼镜行业市场供需与战略研究报告
  2. Trister‘s Lend告诉你如何选对借贷平台
  3. 现在AI发展到什么阶段了
  4. 解决mac Cornerston的Authentication provider raised an exception 更新失败问题
  5. makefile 初出茅庐-第1篇
  6. 解决osm移动地图shp图层消失问题
  7. 计算机一级基本操作题创建快捷方式,2018年3月计算机一级考试MSOffice模拟试题(4)...
  8. MySQL DQL查询
  9. app开发-CocoaChina
  10. git push origin master和git push有什么区别