jQuery 性能优化技巧

原文地址：jQuery 性能优化技巧

博客地址：http://www.extlight.com

一、使用最新版本 jQuery 类库

# 推荐使用

$("#id") 

# 可以使用

$("p"),$("span") 

# 可以使用

$(".class") 

# 尽量避免

$("[attribute=value]")  

# 尽量避免

$(":hidden")

场景：修改某个按钮的文本和颜色

# 不好的写法

$("#btn").text("重置");

$("#btn").css("color","red");

# 优化的写法

var $btn = $("#btn");

$btn.text("重置").css("color","red");

场景：往 <ul> 中添加 <li> 菜单项

# 不好的写法

var $ul = $("#menu");

for(var i=0; i<6; i++) {

    $ul.append("<li>菜单"+i+"</li>")

}

# 优化的写法

var $ul = $("#menu");

var html = "";

for(var i=0; i<6; i++) {

    html += "<li>菜单"+i+"</li>";

}

$ul.append(html);

场景：给 <ul> 里的所有 <li> 绑定点击变色事件

# 不好的写法

$("ul li").on("click",function() {

   $(this).css("color","red");

});

# 优化的写法

$("ul li").on("click",function(e) {

   var $obj = $(e.target);

   $obj.css("color","red");

});

第四点的案例中，代码还可以进行优化

var $ul = $("#menu");

var arr = [];

for(var i=0; i<6; i++) {

   arr.push("<li>菜单"+i+"</li>");

}

$ul.append(arr.join("");

使用 data-* 属性来嵌入自定义数据。

<div id="user" data-age="26" data-gender="男">张三</div>



    var user = $("#user");

    var age = user.data("age");

    var gender = $("#user").data("gender");

第五点的案例中，可以如下优化

$("ul li").on("click",function(e) {

   var $obj = $(e.target);

   $obj.get(0).style.color = "red";

});

如有更多优化技巧，后续补充......