一 优化选择器的执行速度
(1)优先使用ID与标记选择器
在jQuery中,访问DOM元素的最快方式是通过元素ID号,其次时通过元素的标记。再其次就是使用类别(.class)访问。
在访问页面元素时,要尽量避免出现下列的访问语法:
1)虽然访问DOM元素的最快方式是通过元素ID号,但应避免重复修饰,即用ID号修饰ID号,如
var eleName()=$(“#divTip #divShow”);
2)避免使用tag或class来修饰ID号,这样的话,代码先执行遍历,后进行匹配,错误代码如下:
var eleName()=$(“.Myclass #divShow”);
3)如果是通过元素的属性访问,应尽量使用tag修饰进行访问,正确代码如下:
var eleName()=$(“div[title=’tmp]”);
(2)使用jQuery对象缓存
对象缓存,就是在使用jQuery对象时,想尽量使用变量保存对象名,然后通过相应的方法操作,下面代码就是欠妥的:
$("#divTip").bind("click",function(){alert("hello");})
$("#divTip").css("width","200px");
优化后:
var objTmp=$("#divTip;")
objTmp.bind("click",function(){alert("hello");})
objTmp.css("width","200px");
如果想让定义的变量在其他函数中也能使用,可以将变量定义为全局性变量。
window.$objPub={
$objTmp:$("#divTip")
}
两点需要注意:
1)无论是局部还是全局性变量,为避免与其他变量名冲突,原则上尽量使用$符号进行命名
window.$objPub={
$objTmp:$("#divTip")
}
2)如果在同一个DOM对象中有多个对象的操作,应尽量采用链接式的写法优化调用代码
$objPub.$objTmp.bind("click",function(){alert("hello");}).css("width","200px");
(3)给选择器一个上下文
DOM元素的查找可以用$(expression,[context])方法,在指定的范围内查找某个DOM元素,优势在于缩小定位元素的范围,查找更快捷
expression为需要查找的字符串,可选项[context]为等待查找的DOM元素集,文档或jQuery对象
例如:
HTML:
<body>
<div class="MyCls0">
<div id="div0" class="MyCls" title="tmp0"></div>
</div>
<div class="MyCls1">
<div id="div1" class="MyCls" title="tmp1"></div>
</div>
</body>
JS:
<script type="text/javascript">
$(function(){
window.$objPub={
$objTmp0:$("#div0",".MyCls0"),
$objTmp1:$("#div1")
}
TestFun();
})
function TestFun(){
$objPub.$objTmp0.html("Tmp0");
$objPub.$objTmp1.html("Tmp1");
}
</script>
CSS:
body{
font-size: 13px;
}
.MyCls0{
border: solid 1px #666;
margin: 5px;
width: 200px;
}
.MyCls1{
border: solid 1px #ccc;
margin: 5px;
width: 200px;
}
.MyCls{
background-color: #eee;
padding: 5px;
}
页面效果:搜索范围更小的TMP0执行更快
二 处理选择器中的不规范元素标志
(1)选择器中含有特殊符号
根据W3C规定,元素中的属性不能包含类似于# ( [等不规范的特殊字符,但在自动生成的有些页面中,常常含有特殊字符。如果采用常规方法,通过选择器获取元素,会报错,对于下面代码:
<div id="div#2#" title="tmp1"></div>
<div id="div[3]" title="tmp2"></div>
<div id="div(4)" title="tmp3"></div>
这样获取会失败:
$("#div#2#").html("Tmp1");
$("#div[3]").html("Tmp2");
$("#div(4)").html("Tmp3");
应该在特殊字符前加上转义\\符号
$("#div\\#2\\#").html("Tmp1");
$("#div\\[3\\]").html("Tmp2");
$("#div\\(4\\)").html("Tmp3");
(2)选择器中含有空格符号
在编写通过选择器获取元素代码时,选择器中含有与不含有空格符,结果是不一样的。例如
HTML:
<body>
<div class="fram">
<div id="div0" class="MyCls">
<div id="div1" class="MyCls" style="display: none;">
</div>
</div>
</div>
<div id="div2" class="MyCls" style="display: none;"></div>
<div id="div3" class="MyCls" style="display: none;"></div>
<div id="divTip"></div>
</body>
JS:
<script type="text/javascript">
$(function(){
var $objTmp0=$(".MyCls :hidden");//选择器中有空格符
var $objTmp1=$(".MyCls:hidden");//选择器中没有空格符
var strTmp="'.MyCls :hidden'方式获取的元素个数是:";
strTmp+=$objTmp0.length;
strTmp+="<br><br>'.MyCls:hidden'方式获取的元素个数是:";
strTmp+=$objTmp1.length;
$("#divTip").append(strTmp);
})
</script>
结果:
$objTmp0保存的是类别为MyCls中的隐藏元素,个数为1,$objTmp1保存的是隐藏元素中类别为MyCls的元素,为3.
三 优化事件中的冒泡现象
通过target()方法可以获取触发事件的元素。如果是多个元素触发同一个事件,可以借助这个方法,获取这些元素的父级元素,并将事件绑定到父级元素,通过冒泡现象,扩展到其子级元素中,在某种程度上,比将事件绑定到每个子级元素执行效果更加优化。例如:
在表单中设置三个文本框,使每个文本框在获取焦点时改变原有的样式。
HTML:
<body>
<form id="form1">
<fieldset id="fram" style="width: 200px;">
<legend>输入信息</legend>
<div>姓名:<input id="Text1" type="text"></div>
<div>性别:<input id="Text2" type="text"></div>
<div>年龄:<input id="Text3" type="text"></div>
</fieldset>
</form>
</body>
JS:
<script type="text/javascript">
$(function(){
$("#fram").bind("click",function(e){
$objChild=$(e.target);//捕捉触发事件的元素
$objChild.addClass("txt");
})
})
</script>
CSS:
body{
font-size: 13px;
}
div{
line-height: 1.8em;
}
.txt{
border: #666 1px solid;
padding: 2px;
width: 80px;
margin-right: 3px;
}
结果显示:
姓名栏的样式已经改变
摘自《jQuery权威指南》