四 使用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权威指南》