1.选择器

$("#myId"); // 多少还是会逊色于...

document.getElementById("myId");

2.选择器

var $products = $("div.products"); // 慢

var $products = $(".products"); // 快

3.选择器

$("div.data .gonzalez"); // 丑陋

$(".data td.gonzalez"); // 优化后

4.选择器

$('.class');// 劣质的代码：因为需要遍历整个DOM来找到.clas

$('.class', '#class-container');// 高品代码：因为只需在指定容器范围内进行查找

5.选择器

$('div.container > *'); // 差

$('div.container').children(); // 棒

5.选择器

$('div.someclass :radio'); // 差

$('div.someclass input:radio'); // 棒

关于append,以后尽量用第三种方法

// 这样不好

var $myList = $("#list");

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

$myList.append("<li>"+i+"</li>");

}

// 这样好

var $myList = $("#list");

var list = "";

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

list += "<li>"+i+"</li>";

}

$myList.html(list);

// 但这样更好

var array = [];

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

array[i] = "<li>"+i+"</li>";

}

$myList.html(array.join(''));

6.做好缓存

糟糕的做法

jQuery('#top').find('p.classA');

jQuery('#top').find('p.classB');

更好的写法

var cached = jQuery('#top');

cached.find('p.classA');

cached.find('p.classB');

7.事件的委托处理

一般

$("td").on("click", function(){

$(this).toggleClass("click");

});

更好

$("table").on("click", "td", function(){

$(this).toggleClass("click");
});

借鉴文章：

http://web.jobbole.com/83277/

http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html