1. 优化选择器的执行速度
- 优先使用ID与标记选择器
var eleName0=$(“#divTip”);
var eleName1=$(”div”);
var eleName2=$(”.myclass”);
ID选择器速度最快,但是应避免重复修饰:
var eleName0=$(“#divTip/.myclass/div #divShow”);//错误的修饰方式
如果通过元素的属性访问,应使用tag修饰 var eleName3=$(“div[title=’tmp’]”)
- 使用jQuery对象缓存
jQuery对象缓存,就是在使用jQuery对象时,先尽量使用变量保存对象名,然后通过变量名进行相应的方法操作。
$(“#divTip”).bind(“click”,function(){}) $(“#divTip”).css(“widht”:”20px”); 优化的代码如下: Var objTmp=$(“#divTip”); objTmp.bind(“click”,function(){}) objTmp.css(“widht”:”20px”);
定义全局变量:$符号命名,目的是用来避免与其他变量名冲突
window.$objPub={ $objTmp:$(“#divTip”) }
使用全局变量调用方式:$objPub. $objTmp.bind(“click”,function(){})
- 给选择器一个上下文
$(expression,[context]) 指定查找范围context效率低
例子:
$(function() { window.$objPub = { //在全局范围中,定义一个windows对象 $objTmp0: $("#div0", ".MyCls0"), $objTmp1: $("#div1") } TestFun(); }) function TestFun() { //自定义显示div内容的函数 $objPub.$objTmp0.html("Tmp0"); $objPub.$objTmp1.html("Tmp1"); } //HTML: <div class="MyCls0"> <div id="div0" class="MyCls" title="tmp0"></div> </div> <div class="MyCls1"> <div id="div1" class="MyCls" title="tmp1"></div> </div>
2. 处理选择器中的不规范元素标志
- 选择器含有特殊符号
<div id=”div#1[4]” class=”myclass”></div>
按$(”div#1[4]”)获取元素,不能成功获取,需要转义$(”div\\#1\\[4\\]”)
- 选择器中含有空格符号
3. 优化事件中的冒泡现象
4. 使用data()方法缓存数据
data()方法可以针对元素定义数据,在元素中存取数据。
- 取数据data([name])
- 设置数据 data(name,value)
- 移除数据 removeData(name)
在元素上存取移除数据
$(function() { $("p").data("tmpData"); //初始时 //显示初始化数据 $("#divTip").append($("p").data("tmpData") == null ? "初始时:null" : $("p").data("tmpData")); $("p").data("tmpData", "陶国荣") //设置 //显示设置后数据 $("#divTip").append("<br>赋值后:" + $("p").data("tmpData")); $("p").removeData("tmpData") //移除 //显示移除后数据 $("#divTip").append($("p").data("tmpData") == null ? "<br>移除时:null" : $("p").data("tmpData")); })
data()方法除了可以存储一般的数据外,还可以存储json格式的值:
$(function() { $("p").data("tmpData"); //初始时 //显示初始化数据 $("#divTip").append($("p").data("tmpData") == null ? "初始时:null" : $("p").data("tmpData")); $("p").data("tmpData", { name: "李建洲", sex: "女", score: "80" }); //设置 //显示设置后数据 $("#divTip").append("<br>赋值后:" + $("p").data("tmpData").name + "/" + $("p").data("tmpData").sex + "/" + $("p").data("tmpData").score); $("p").removeData("tmpData") //移除 //显示移除后数据 $("#divTip").append($("p").data("tmpData") == null ? "<br>移除时:null" : $("p").data("tmpData")); })
5. 解决jQuery库与其他库的冲突
6. 使用子查询优化选择器性能
例如:
$(function() { //var $divF = $("#divFrame");//保存最外层对象 //var $ulF = $divF.find(".ulFrame");//在外层对象中查找 //var $li0 = $ulF.find(".li0"); //var $spn = $li0.find("span");//在最近一层中查找 //var $li1 = $ulF.find(".li1"); $spn = $("div ul li span"); $li1 = $("div ul .li1"); var strTmp = "最终数据:" //初始化显示内容 strTmp += "<br>" + $spn.html(); //获取内容 strTmp += "<br>" + $li1.html(); //获取内容 $("#divTip").append(strTmp); //显示在页面中 })
$spn = $("div ul li span");$li1 = $("div ul .li1");可以获得同样的查询结果,但是它没有做缓存,性能较低。对于嵌套元素的查找,应尽量使用子查询访问元素。
7. 减少对DOM元素直接操作
DOM元素的操作原理:先在内存中创建DOM结构,然后更新现有的DOM结构。如果直接对DOM进行操作,效率低下。有必要在直接修改DOM前完善大部分DOM操作,最后通过一次直接操作,更新其DOM结构。
$(function() { //定义数组 var arrList = ["list0", "list1", "list2", "list3", "list4", "list5"]; var strList = ""; //初始化字符 $.each(arrList, function(index) { //遍历后累加数组元素 strList += ("<li>" + arrList[index] + "</li>"); }) //一次性完成DOM元素的增加 $("#ulFrame").append(strList); })
8. 正确区分DOM对象与jQuery对象
- DOM对象 :是指通过传统的Javascript方法获取的DOM元素对象,如:
var objDom=document.getElementById("#txtTmp");
var DomValue= objDom.value;
其中objDom保存的就是表单中的某个指定文本框对象,即DOM对象。变量DomValue获取了Id号为txtTmp的DOM对象的值。
- jQuery对象 :指的是通过jQuery语法包装原始的DOM对象后生成的新对象。只要是jQuery对象,就可以使用jQuery库中的所有方法与事件。
var $obj=$("#txtTmp");
var Domvalue=$obj.val();
变量$obj保存的就是表单中指定的文本框对象,由于被$()方法包装,该对象就是jQuery对象。DomValue变量保存通过jQuery中的val()方法获取的jQuery对象的值。
不能使用DOM对象调用jQuery对象的方法,例子:
var objDom=document.getElementById("#txtTmp");
var Domvalur=objDom.val();//这是错误的
同样,也不能使用jQuery对象调用DOM对象方法,例子:
var $obj=$("#txtTmp");
var DomValue=$obj.value;//这是错误的
- DOM对象与jQuery对象类型转换
Jquery对象转换为DOM对象:调用jQuery中提供的[index]与get(index)方法即可
DOM对象转换为jQuery对象:DOM对象通过jQuery方法$()进行包装即可
例子:
$(function() { //***** DOM对象转成jQuery对象 *****// //DOM对象 var objDom0 = document.getElementById("div0"); //转成jQuery对象 var $obj0 = $(objDom0); //调用jQuery中的方法设置其中的内容 $obj0.html("DOM对象转成jQuery对象后设置的内容"); //***** jQuery对象转成DOM对象 *****// //jQuery对象 var $obj1 = $("#div1"); //转成DOM对象 var objDom1 = $obj1.get(0); //调用JavaScript中的对象方法设置内容 objDom1.innerHTML = "jQuery对象转成DOM对象后设置的内容"; })