平、优化采用器执行进度

1. 预利用ID选用器和符号采用器

  • 采取选取器时应该首选ID采取器($(“#id”)),其次是符号选拔器($(“div”)),最后又拔取class、属性等选用器。
  • 防止重复使用ID号修饰ID号,例如$(“#div1
    #div2”)。也避免下tag,class等修饰ID号,例如$(“.title #id”)。
  • 使用性质拔取器时,尽量利用标志进行修饰。例如$(div[title=’aa’])。

2. 应用jQuery对象缓存

  • 如若频繁操作同一个DOM元素,可以用这在全局变量中,防止再调用采纳器。
  • 缓存JQuery的变量命名规则尽量以$伊始。
  • 借使跟一个DOM对象开展多单操作,尽量使链式写法。

3. 吃选用器一个上下文

格式:$(expression,[context]),expression是接纳器说明式,context是接纳器查找的范围。这样会较在全局查找功用高有。

实例:

<script type="text/javascript">
        $( function() {
            window.$objPub = { //在全局范围中,定义一个windows对象
                $objTmp0: $( "#div0", ".MyCls0" ),
                $objTmp1: $( "#div1")
            }
            TestFun();
        })
        function TestFun() { //自定义显示div内容的函数
            $objPub.$objTmp0.html( "Tmp0").css("width" ,"100px");
            $objPub.$objTmp1.html( "Tmp1");
        }
    </script >

其次、处理选用器不专业元素

1. 取舍器属性中蕴含特殊符号:特殊字符前加加转义字符\\。

2.
选拔器中空格符
:包含空格时表示祖先元素以及后元素的涉及;不带有空格时表示一个拔取器中点滴种筛选标准的集合。

<script type="text/javascript">
        $( function() {
            var $objTmp0 = $(".MyCls :hidden" );//含有空格符,.MyCls子元素中的隐藏元素
            var $objTmp1 = $(".MyCls:hidden" );//没有空格符,.MyCls类名并且隐藏的元素
            var $objTest = $("#div\\[test\\]" );//选择器特殊符号
        })
    </script >

其三、解决jQuery库与外库$争执问题

动用jQuery.noConflict()转让$使用权,然后不得不采纳jQuery变量访问jQuery对象。

1.jQuery库早其他库导入

不要用jQuery.noConflict()方法。只要拔取jQuery方法时不要动$符号而是以jQuery符号就可了。

2.jQuery库后被外库导入

欲先下jQury.noConflict(),然后利用jQuery符号操作jQuery中之对象。如若还牵记以简单符号,有有限种形式

①打定义其他标志用作快速形式:

var j=jQuery.noConflict();
        j( function() {
            j( "#Button1").click(function () {
                获取对象
                var $objTmp = j("#txtName" );
                显示内容
                j( "#divTmp").html("J_" + $objTmp.val());
            })
        })

②每当jQuery方法中继续行使$符号。

jQuery.noConflict();
        jQuery( function($) {
            $( "#Button1").click(function () {
                //获取对象
                var $objTmp = $("#txtName" );
                //显示内容
                $( "#divTmp").html("J_" + $objTmp.val());
            })
        })

季、其他优化

  • 尽量减弱对DOM元素直接操作的次数。