jQuery 选择器
选择器
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.3 prev + 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")