妙味课堂LOGO

图片滚动效果

JQuery 性能优化指南

发表人 leo | 文章分类 JavaScript+JQuery | 发表日期 19-10-2009

标签:,

0

网上摘抄整理:

1. 尽可能用 ID 选择器
var $but = $(“#content .button”);

2. 就近选择多个元素
var $p = $(“#content p”);

3. 用一个标签名来限制 class (并且不要忘记加上就近的ID),尽可能不要使用 $(“.box”),可以是

$(“div.box”)、$(“#head .box”)、$(“#head ul.box”)
比如选择 class 名为 .on 的元素:
<ul id=”list”>
<li><p>JQuery</p></li>
</ul>
var $p_on = $(“#list p.on”);

4. 将 JQuery 对象缓存起来
var $but = $(“#content .button”);
$but.click(function() { alert(1); });

5. 掌握强大的链式操作
var $box = $(“#box”);
$box.click(function() {
 $(this).css(“border”, “3px dashed yellow”).fadeIn(“slow”);
});

6. 像这样绑定事件是低效的:
$(“#entryform input”).bind(“focus”, function(){
 $(this).addClass(“selected”);
}).bind(“blur”, function(){
 $(this).removeClass(“selected”);
});

我们需要在父级监听获取焦点和失去焦点的事件:
$(“#entryform”).bind(“focus”, function(e){
 var $cell = $(e.target); // e.target 触发事件的节点
 $cell.addClass(“selected”);
}).bind(“blur”, function(e){
 var $cell = $(e.target);
 $cell.removeClass(“selected”);
});

未完待续……

发表评论