jquery优化

选择器优化执行的速度

• 选择器 优先：id>元素>类
• 使用对象缓存：即使用变量来保存对象名，var $myDiv = $("#myDiv")；$myDiv.show();
• DOM元素查找可给上下文范围；$(exp,[context])；exp--被查询元素，context--范围
  • 　　var $obj = $("#myDiv")；$obj.$(".div000",".myClass")；在myClass这个类元素下查找div000元素；
  • 多层查询，使用子查询方式查找，如查询p元素

    <div id="box">
          <span></span>
          <div id="content">
              <p></p>
          </div>    
    </div>
    

    　　$parent = $("div #content");$child = $parent.find("p");

处理选择器中不规范元素标志；防止有些选择器命名含有特殊字符

　　在特殊字符前加入转义符\\；例如：查询"div#2#"的元素；$("div\\#2\\#").html();

data()方法缓存数据；

• 　　针对元素定义数据，在元素中存取数据，避免数据被循环引用而出现不必要的风险

 

循环操作DOM的优化：

• 一次性对DOM操作，而不是每次循环都操作DOM
• 例如：动态新增<li>

• $(function(){
  var arrList = ["list0","list1","list2"];
  var strList = "";
  $.each(arrList,function(index){
  strList = "<li>" + arrList[index] + "</li>"
  });
  $("ul").append(strList);
  })
  
  //而不是
  
  $.each(arrList,function(index){
  $("ul").append( "<li>" + arrList[index] + "</li>");
  });
  

 　　

jquery库和其他库冲突，$指向问题；

• jQuery.noConflict（）;转移$的使用权；转移后jquery使用本身jquery对象访问

　　

 

data()方法缓存数据，针对于元素定义数据

• data([name])；存储数据名称
• data(name,value)；
• data(name,{name1:value1,name2:value2});
• removeData(name);