jquery系列---jquery优化

1.优化使用id与标记选择器；
  访问dom元素最快速度是：id，其次是元素的标记(tag)，依次是类别（class）
  
2.使用jquery对象缓存；
所谓对象缓存就是，在使用jquery对象时，先尽量使用变量保存对象名，然后通过变量的方法相应操作
例如：
  $("#main").css("height","200px");
  $("#main").click(function(){});
  $("#main").attr("checked",true);
  优化后的代码是：
  var obj = $("#main");
  obj.css("height","200px");
  obj.click(function(){});
  obj.attr("checked",true);
  如果想让变量在其它函数中也能运用，可以如下定义：
  //全局变量
  window.objPub = {
  obj:$("#main");
  }
  在使用变量缓存jquery对象时，有如下两点需要注意：
  1).无论是局部还是全局变理，为避免与其它变量冲突，尽量这样命名 var $obj = $("#main");
  2).如果同一个dom对象有多个操作时，尽量采用链式的写法优化调用代码，例如：
    $obj.css("height","200px").click(function(){}).attr("","");


3.给选择器一个上下文；
  例如：$(expression,[context])
  []里表示是一范围，例如：
  <div class=".myclass">
  <div id="div0"></div>
  </div> 
  $("#div0",".myclass")的效率要高于$("#div0")
  
4.选择器中含有特殊的符号;
  在页面中，根据W3C标准，不能包含"#","(","["等不规范字符
  例如<div id="div1#"></div>
  错误写法：$("#div1#").html();
  正确写法：$("#div1\\#").html();得需要用"\\"进行转义


5.选择器中含有空格符；
  例如：$(".myclass :hide")表示为.myclass下的隐藏元素；
        $(".myclass:hide")表示为所隐藏元素的class为.myclass；


6.优化事件中的冒泡现象；
页面元素嵌套时，如果触发同一事件，可能会触发事件的冒泡现象，可以用stopPagation来阻止这一现象的发生；
target获取触发事件的元素


7.使用data方法缓存数据
1)返回存储的数据：
data("name");
2)设置数据：
 data("name","zhangsan");
3)移除缓存数据：
 removeData("name");
  例子：缓存json格式数据
  <p><b>数据状态</b></p>
  
  $("p").data("tmpData");//此处为空
  $("p").data("tmpData",{name:"zhangsan",age:"18",sex:"男"});
  $("p").data("tmpData").name;//zhangsan;
  $("p").data("tmpData").age;//18;
  
  缓存数据得及时清理，需特别注意
  
8.jquery库与其它库冲突
  1)jquery在其它库前导入
  直接使用jquery，例如jquery(function(){}); 将$的使用权转给其它库；
  2)jquery在其它库后导入
    使用jQuery.noConflict()即可；
    /*方法一*/
    jQuery.noConflict();
    jQuery(function(){
       jQuery("#div0").html();
    });
    
    /*方法二---自定义快捷方式*/
    var j = jQuery.noConflict();
    j(function(){
    j("#div0").html();
    });
    
    /*方法三---在jquery函数内使用$符*/
    jQuery.noConflict();
    jQuery(function($){
    $("#div0").html();
    })
    
9.选用子查询优化选择性能；
  <div id="div0">
  <ul class="myclass">
  <li class="li0"><span>测试元素一</span></li>
  <li class="li1">测试元素二</li>
  </ul>
  </div>
  
  一般写法$("#div0 .myclass .li0 span").hmtl();
          $("#div0 .myclass .li1").hmtl();
  如上写法效率较低，没缓存，不利于同级查询，每一次都是一个新的开销；
  
  var $obj = $("#div0");
  var $objc = $obj.find(".myclass");
  var $objli0 = $objc.find(".li0");
  var $spn = $objli0.find("span");
  var li0 = $spn.html();
  var objli1 = $objc.find(".li1");
  var li1 = $objli1.html();