• 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")。

     

     

  • 相关阅读:
    C# 如何保证对象线程内唯一:数据槽(CallContext)【转载】
    关于面试!(简历篇)
    以Windows服务方式运行ASP.NET Core程序【转载】
    .Net Core 项目在Windows服务中托管【转载】
    【转载】Ocelot网关的路由热更新
    Kafka的配置文件详细描述
    C#枚举中的位运算权限分配浅谈
    CSS 三角形
    Entity Framework 7 动态 DbContext 模型缓存 ModelCaching
    ASP.NET5 MVC6 利用Middleware 创建可访问HttpContext 的业务类工厂。(代替HttpContext.Current)
  • 原文地址:https://www.cnblogs.com/qduanlu/p/2961741.html
Copyright © 2020-2023  润新知