四 使用data()方法缓存数据
使用data()方法，可以针对元素定义数据，在元素中存取数据，从而避免数据被循环引用的风险。根据功能不同，有下列几种使用格式：
（1）根据元素中的名称定义或返回存储的数据
data[name]
可选参数name为字符型，表示存储数据的名称
（2）根据元素中的名称在元素上存储或设置数据
data(name,value)
name表示存储数据的名称，value表示将要被存储的数据
（3）除了定义和存储数据外，还可以移除元素中存放的数据
removeData(name)
简单实例：
<body> <p><b>数据状态</b></p> <div id="divTip"></div> </body>JS: <script type="text/javascript"> $(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")); }) </script>界面效果：五 使用子查询优化选择器性能
如果一个元素被众多别的元素所包含或嵌套在其中，如果直接用find（）方法查找操作性能比较低，我们可以先查找最外层元素，保存起来，再查找更进一层的元素，进行保存，最后，在最接近的外层中，使用find（）方法，查找需要的元素，示例：
功能描述：创建一个div标记，并在其中创建一个列表ul，列表中包含两行表项li，在其中的一个表项中设置span标记，通过子查询，获取span元素与另外一个表项中的内容并显示在页面中
<body> <div id="divFram"> <ul class="ulFram"> <li class="li0"><span>测试元素1</span></li> <li class="li1">测试元素2</li> </ul> </div> <div id="divTip"></div> </body>JS： <script type="text/javascript"> $(function(){ var $divF=$("#divFram"); var $ulF=$divF.find(".ulFram"); var $li0=$ulF.find(".li0"); var $spn=$li0.find("span");//在最近一层查找 var $li=$ulF.find(".li1"); var strTmp="最终数据："; strTmp+="<br>"+$spn.html(); strTmp+="<br>"+$li.html(); $("#divTip").append(strTmp); }) </script>界面效果：六 减少对DOM元素直接操作
我们知道，DOM元素操作的原理是：先在内存中创建DOM结构，然后，更新现有的DOM结构。如果直接对DOM进行操作，性能也是比较低的，为了减少对DOM元素直接操作次数，有必要在操作前完善大部分的DOM操作，最后通过一次直接操作，更新其DOM结构
示例：
功能描述：在页面中创建一个ul标记，然后通过代码，在列表中动态添加6个含有内容的表项，并将最终结果显示在页面中
<body> <ul id="ulFram"></ul> </body>JS： <script type="text/javascript"> $(function(){ //定义数组 var arrList=["list0","list1","list2","list3","list4","list5"]; var strList="";//初始化字符 $.each(arrList, function(index) { //遍历后累加数组元素 strList+="<li>"+arrList[index]+"<li>"; }) //一次性完成DOM元素的增加 $("#ulFram").append(strList); }) </script>界面效果：很多初学者往往采用下面的代码：
$.each(arrList, function(index) {
//遍历后累加数组元素
$("#ulFram").append("<li>"+arrList[index]+"<li>");
})
但是每遍历一次，都直接对DOM元素进行操作，效率很低
摘自《jQuery权威指南》