jQuery选择器

王朝学院·作者佚名  2016-08-27  
宽屏版  字体:  |  |  | 超大  

选择器

1.基本选择器

1.1 #id

<div id="one"></div><div id="two:id">

$("#one") $("#two\\:id")

1.2 element

$("div")

1.3 .class

$(".class")

1.4 * //匹配所有元素

$("*")

1.5 selector1,selector2,selectorN

$("div,p,span,.class")

2.层级选择器

2.1 ancestor descendant 在给定的祖先元素下匹配所有的后代元素

$("form input") form下的所有input

2.2 parent > child

$("div > p") div下的所有子辈元素

2.3PRev + next

$("div + p") div后紧跟着的p,同辈元素

2.4 prev ~ siblings

$("div ~ p") div后面的所有p,同辈元素

3.筛选选择器

3.1 :first 获取第一个元素

$("li:first")

3.2 :last 获取最后一个元素

$("li:last")

3.3 :not(selector) selector用于筛选的选择器

$("input:not(:checked)")

$("li:not(#li)") #li是li的id

3.4 :even 匹配所有索引值为偶数的元素,从0开始

$("li:even") li的第1、3、5...行,索引值为0,2,4

3.5 :odd 匹配所有索引值为技术的元素,从0开始

$("li:odd")

3.6 :eq(index) 匹配一个给定索引值的元素,从0开始

$("li:eq(2)")

3.7 :gt(index) 匹配所有大于给定索引值的元素

$("li:gt(2)")

3.8 :lt(index) 匹配所有小于给定索引值的元素

$("li:lt(2)")

3.9 :lang(language) 选择指定语言的所有元素

<div lang="en"></div> <div lang="en-se">

$("div:lang(en)")

3.10 :header 匹配如h1,h2,h3,h4之类的标题元素

$(":header")

3.11 :animated 匹配所有正在执行动画效果的元素

$("div:animated")

3.12 :focus 匹配当前获取焦点的元素

$("#id").delegate("*","focus blur",function(event){

var elem=$(this);

setTimeout(function(){

elem.toggleClass("focused",elem.is(":focus"));

},0);

})

delegate(sel,[type],[data],fn) 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

3.13 :root 选择该文档的根元素 在HTML中,文档的根元素,和$(":root")选择的元素一样, 永远是<html>元素。

$(":root")

3.14 :target 选择由文档URI的格式化识别码表示的目标元素。

显示哪个 DOM 元素触发了事件:

$("p, button, h1, h2").click(function(event){

$("div").html("Triggered by a " + event.target.nodeName + " element.");

});

4.内容选择器

4.1 :contains(text) 匹配包含给定文本的元素

$("p:contains('text')")

4.2 :empty 匹配所有不包含子元素或者文本的空元素

$("li:empty")

4.3 :has(selector) 匹配含有选择器所匹配的元素的元素

$("p:has(span)")

4.4 :parent 匹配含有子元素或者文本的元素

$("p:parent")

5.可见性选择器

5.1 :hidden 匹配所有不可见元素,或者type为hidden的元素

$("div:hidden")

$("input:hidden")

5.2 :visible 匹配所有可见元素

$("div:visible")

6.属性选择器

6.1 [attribute] 匹配包含给定属性的元素

$("p[class]")

6.2 [attribute=value] 匹配给定的属性是某个特定值的元素

$("img[title='img']")

6.3 [attribute!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素。

此选择器等价于:not([attr=value]) 要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])

$("img[title!='img']")

6.4 [attribute^=value] 匹配给定的属性是以某些值开始的元素

$("img[title^='img']")

6.5 [attribute$=value] 匹配给定的属性是以某些值结尾的元素

$("img[title$='img']")

6.6 [attribute*=value] 匹配给定的属性是以包含某些值的元素

$("img[title*='img']")

6.7 [selector1][selector2][selectorN] 复合属性选择器,需要同时满足多个条件时使用

$("img[class][title='img'][alt*='alt']")

7.子元素选择器

7.1 :first-child 匹配第一个子元素

$("ul li:first-child")

与:first不同的是,':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素

7.2 :last-child 匹配最后一个子元素

$("ul li:last-child")

与:last不同的是,':last' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素

7.3 :first-of-type 选择所有相同的元素名称的第一个兄弟元素。

<div><span>span1</span><span>span2</span></div>

$("span:first-of-type") 将选择span1

7.4 :last-of-type 选择所有相同的元素名称的最后一个兄弟元素。

<div><span>span1</span><span>span2</span></div>

$("span:last-of-type") 将选择span2

7.5 :nth-child(index) 匹配其父元素下的第N个子或奇偶元素,index从1开始,':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素

$("li:nth-child(2)")

$("li:nth-child(3n+1)")

$("li:nth-child(even)")

7.6 :nth-last-child(index) 匹配其父元素下的第N个子或奇偶元素,从最后一个元素开始计数.index从1开始,':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素,

$("li:nth-last-child(2)")

$("li:nth-last-child(3n)")

7.7 :nth-last-of-type(n|even|odd|formula) 选择的所有他们的父级元素的第n个子元素,计数从最后一个元素到第一个。

$("ul li:nth-last-of-type(2)");

7.8 :nth-of-type(n|even|odd|formula) 选择同属于一个父元素之下,并且标签名相同的子元素中的第n个。

$("span:nth-of-type(2)");

7.9 :only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配

$("ul li:only-child")

7.10 :nth-last-of-type 选择所有没有兄弟元素,且具有相同的元素名称的元素。

$("button:only-of-type")

8.表单选择器

8.1 :input 匹配所有input,textarea,select,button元素

$(":input")

8.2 :text 匹配所有的单行文本

$("input:text")

8.3 :passWord匹配所有密码框

$("input:password")

8.4 :radio 匹配所有单选按钮

$("input:radio")

8.5 :checkbox 匹配所有的复选框

$("input:checkbox")

8.6 :submit 匹配所有提交按钮

$("input:submit")

8.7 :image 匹配所有图像域

$("input:image")

8.8 :reset 匹配所有重置按钮

$("input:reset")

8.9 :button 匹配所有的按钮

$("input:button")

8.10 :file 匹配所有文件狱

$("input:file")

8.11 :hidden 匹配所有不可见元素,或者type为hidden的元素

$(":hidden")

9.表单对象属性选择器

9.1 :enabled 匹配所有可用元素

$("input:enabled")

9.2 :disabled 匹配所有不可用元素

$("input:disabled")

9.3 :checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)

$("input:checked")

9.4 :selected 匹配所有选中的option元素

$("select option:selected")

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
© 2005- 王朝网络 版权所有