jquery选择器 选择器性能问题

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: hiddenopacity: 0,其中还包括使用滑动来隐藏元素期间也是占据空间的,只有直到滑动结束才不占据)的元素。同样如果想提高性能,首先应该使用css选择器来选择元素,再利用.filter(":visible")。

 

 

原文地址:https://www.cnblogs.com/qduanlu/p/2961741.html