jquery选择器
1.
*:匹配所有元素。
#idName:匹配id值是idName的元素。
.className:匹配class值是idName的元素。
elementName:匹配元素名称是elementName的元素。
parent>child:子代选择器。
ancestor descendants:匹配所有属于ancestor元素的后代descendants元素。
prev+next:匹配紧随元素prev之后的同级元素next,两者拥有相同的父元素。选择一个。
prev~next:匹配任何在E元素之后的同级F元素,两者拥有相同的父元素。选择一个或者多个。
2.属性选择器
[att]:匹配含义属性是att的元素。
[att='val']:匹配属性是att,且值是val的元素。
[att!='val']:匹配属性是att,且值不是val的元素。
[att^=”val”]:匹配具有att属性、且值以val开头的E元素。
[att$='val']:匹配具有att属性、且值以val结尾的E元素。
[att*='val']:属性选择器。匹配属性是att,且值包含val的元素。
[att|='val']:匹配所有att属性具有多个空格分隔的值、其中一个值以“val”开始的E元素。
[att~='val']:匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素。
3.伪元素
css选择器包含伪元素选择器,但是jQuery选择器不包含伪元素选择器。
4.伪类
:checked:这个选择器对类型是checkbox和radio有效,在选中时触发。
:disabled:匹配所有被禁用的input元素。
:enabled :匹配所有启用的表单元素。
E:lang:向带有指定 lang 属性的元素E添加样式。(css2添加)
E:focus:匹配向拥有键盘输入焦点的元素添加样式。
E:empty:匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素。
E:first-child:匹配父元素中第一个E元素。(css2添加,IE7开始支持)。其中E前面没有其他兄弟元素,即E如果是父元素的第一个子元素那么有效,反之无效。
E:first-of-type:匹配同级兄弟元素中的第一个E元素,等同于:nth-of-type(1)。其中E前面可以有或没有其他兄弟元素。
E:last-child:匹配父元素中最后一个E元素,等同于:nth-last-child(1)。
E:last-of-type:匹配父元素下使用同种标签的最后一个子元素E,等同于:nth-last-of-type(1)。
E:nth-child(n):匹配父元素中的第n个子元素是E的元素,第一个编号为1。
E:nth-last-child(n):匹配父元素中的倒数第n个子元素是E的元素,第一个编号为1。
E:nth-of-type(n):与:nth-child()作用类似,但是仅匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n):与:nth-last-child() 作用类似,但是仅匹配父元素中的倒数第n个结构子元素E。
E:only-child:匹配属于父元素中唯一子元素的E,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)。
E:only-of-type:匹配属于同类型中唯一兄弟元素的E,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)。
E:root:匹配文档的根元素,对于HTML文档,就是HTML元素。
E:not(selector):匹配元素且不包括selector。
E:target:匹配相关URL指向的E元素。
5.以下的选择器是jQuery的扩展,不属于css选择器。因此不能利用浏览器的内置函数querySelectorAll()(querySelectorAll是浏览器内置的css选择符查询元素方法,比getElementsByTagName和getElementsByClassName效率要高很多。)。
:animated:匹配所有在滑动的元素。如果想提高性能,首先应该使用css选择器来选择元素,再利用.filter(":animated")。
实践:
<!DOCTYPE html>
<html>
<head>
<style>
div { background:yellow; border:1px solid #AAA; 80px; height:80px; margin:0 5px; float:left; }
.changeBg{
background:green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="move">1111</div>
<button id="change">change</button>
<script>
$(document).ready(function(){
function move(){
var moveFounction = arguments.callee;
$("#move").slideToggle("slow",moveFounction);
}
move();
$("#change").click(function(){
var time1 = new Date().getTime();
$("#move:animated").toggleClass("changeBg");//执行2毫秒
//$("#move").filter(":animated").toggleClass("changeBg");//执行1毫秒
console.log(new Date().getTime() - time1);
});
});
</script>
</body>
</html>
:button:匹配是按钮和类型是按钮的元素。等价于$("button,input[type='button']")。同样如果想提高性能,首先应该使用css选择器来选择元素,再利用.filter(":button")。
:checkbox:匹配类型是checkbox的元素。等价于$("[type='checkbox']")。最好用[type='checkbox']代替。
:password:匹配类型是password的元素。等价于$("[type='password']")。最好用[type='password']代替。
:radio:匹配类型是radio的元素。等价于$("[type='radio']")。最好用[type='radio']代替。
:reset:匹配类型是reset的元素。等价于$("[type='reset']")。最好用[type='reset']代替。
:submit:匹配类型是submit的元素。等价于$("[type='submit']")。最好用[type='submit']代替。
:text:匹配类型是text的元素。等价于$("[type='text']")。最好用[type='text']代替。
:file:匹配所有 type="file" 的 <input> 元素。最好用[type='file']代替。
:header:匹配h1~h6元素。同样如果想提高性能,首先应该使用css选择器来选择元素,再利用.filter(":header")。
:image:匹配所有类型是图片的input元素。最好用[type='image']代替。
:input:匹配所有input, textarea, select 和 button 元素。同样如果想提高性能,首先应该使用css选择器来选择元素,再利用.filter(":input")。
E:parent:这个与E:empty相反,匹配拥有子元素的E元素。同样如果想提高性能,首先应该使用css选择器来选择元素,再利用.filter(":parent")。
:selected:只对option元素有效。同样如果想提高性能,首先应该使用css选择器来选择元素,再利用.filter(":selected")。
:contains(text):匹配包含这个text的元素。
E:first:匹配集合中E第一个元素。同样如果想提高性能,首先应该使用css选择器来选择元素,再利用.filter(":first")。不同于:first-child和:first-of-type。
E:last:匹配集合中E最后一个元素。同样如果想提高性能,首先应该使用css选择器来选择元素,再利用.filter(":last")。不同于:last-child和:last-of-type。
E:eq(n):匹配集合E中第n个元素。编号从0开始,区别于nth-child。使用$("your-pure-css-selector").eq(index)
,可以提高性能。
E:lt(n):匹配集合E中编号小于n的元素。使用$("your-pure-css-selector").slice(0, index),可以提高性能。
E:gt(n):匹配集合E中编号大于n的元素。使用$("your-pure-css-selector").slice(index),可以提高性能。
E:even():匹配集合E中编号是奇数的元素。同样如果想提高性能,首先应该使用css选择器来选择元素,再利用.filter(":even")。
E:odd():匹配集合E中编号是偶数的元素。同样如果想提高性能,首先应该使用css选择器来选择元素,再利用.filter(":odd")。
E:has(F):匹配拥有一个或者多个后代元素F的元素E。使用$("your-pure-css-selector").has(selector/DOMElement),
可以提高性能。
:hidden:匹配所有没有占据DOM空间的元素(css中display设置为none、type是hidden类型、width和height显示设置为0、祖先元素被hidden)。同样如果想提高性能,首先应该使用css选择器来选择元素,再利用.filter(":hidden")。
:visible:匹配所有占据DOM空间(包括可见、visibility: hidden
和 opacity: 0,其中还包括使用滑动来隐藏元素期间也是占据空间的,只有直到滑动结束才不占据
)的元素。同样如果想提高性能,首先应该使用css选择器来选择元素,再利用.filter(":visible")。