使用jQuery的一些建议

1、尽可能使用id选择器而不是类选择器

例如：

//html
<p id="chooseId">测试文本</p>
//jQuery
console.time("timer");
;i<;i++) {
    $("#chooseId").css("color","red");
}
console.timeEnd("timer");
//输出：timer: 59.244ms

//html
<p class="chooseClass">测试文本</p>
//jQuery
console.time("timer");
;i<;i++) {
    $(".chooseClass").css("color","red");
}
console.timeEnd("timer");
//输出：timer: 131.523ms

2、缓存jQuery查询

例如：

//jQuery
console.time("timer");
var $chooseId = $("#chooseId");
;i<;i++) {
    $chooseId.css("color","red");
}
console.timeEnd("timer");
//输出：timer: 33.429ms

//jQuery
console.time("timer");
var $chooseClass = $(".chooseClass");
;i<;i++) {
    $chooseClass.css("color","red");
}
console.timeEnd("timer");
//输出：timer: 33.750ms

3、尽量减少DOM操作的次数

例如：

//html
<div id="content"></div>
//jQuery
console.time("timer");
var $content = $("#content");
;i<;i++) {
    $content.append("<p>测试文本</p>");
}
console.timeEnd("timer");
//输出：timer: 381.649ms

//html
<div id="content"></div>
//jQuery
console.time("timer");
var $content = $("#content");
var items = "";
;i<;i++) {
    items += "<p>测试文本</p>";
}
$content.append(items);
console.timeEnd("timer");
//输出：timer: 56.195ms

//html
<div id="content"></div>
//jQuery
console.time("timer");
var $content = $("#content");
var items = "<div>";
;i<;i++) {
    items += "<p>测试文本</p>";
}
items += "</div>";
$content.append(items);
console.timeEnd("timer");
//输出：timer: 21.505ms

4、如果为同一个父元素下的多个子元素绑定了事件，尽量使用事件代理

例如：

//html
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
//jQuery
$("#list").on("click",function(e) {
    var clicked = $(e.target);
    clicked.css("color","red");
})