翻譯自：http://stackoverflow.com/questions/1229259/jquery-pitfalls-to-avoid
1. 將相同的選擇器賦值給局部變量或使用鏈式寫法。
l Bad：
$('#button').click(function() {
$('#label').method();
$('#label').method2();
$('#label').css('background-color', 'red');
});
l Good：
$('#button').click(function() {
var$label = $('#label');
$label.method();
$label.method2();
$label.css('background-color', 'red');
});
l Better：
$('#button').click(function() {
$("#label").method().method2().css("background-color", "red");
});
2. 使用上下文提高查詢速度。
l Bad：
//默認情況下將搜索全部文檔對象下class 爲myClass的元素。
$(‘.myClass’);
l Good：
var ct = $('#myContainer');
//將從myContainer子元素下搜索class 爲myClass的元素
$('.myClass', ct);
3. 儘量使用命名的function，便於代碼的複用。
l Bad：
//Avoid
$('#div').click( function(){
//do something
});
l Good：
//Do do
function divClickFn (){
//do something
}
$('#div').click( divClickFn );
4. 建議：
- l 避免濫用documentready
- l 僅在代碼初始化中使用documentready
- l 將documentready中的方法提取到外部，以便代碼重用。
5. 在使用$.ajax的使用進行使用success替代complete
6. 擁有回調的動畫事件的鏈式寫法：
l Bad：此寫法remove()方法將在fadeOut()方法完成之前調用，破換掉淡出動畫。
$("p").click(function(e) {
$(this).fadeOut("slow").remove();
});
l Good：
$("p").click(function(e){
$(this).fadeOut("slow", function(){
$(this).remove();
});
});
7. 儘量少用插件，便於維護和升級。
8. 當不確定是否已綁定事件情況下可以使用：unbind(‘click’).bind(‘click’)
9. 建議：
- l 儘量考慮使用選擇器替代循環查找
- l 使用Firebug之類工具調試
10. 避免上下文中標識符混淆：
l Bad：目的是兩次使用被點擊對象進行處理。
$( "#first_element").click( function( event)
{
$(this).method( ); //referring to first_element
$(".listOfElements").each( function()
{
$(this).someMethod( ); // here 'this' is not referring first_elementanymore.
})
});
l Good：
$( "#first_element").click( function( event)
{
$(this).method( ); //referring to first_element
var $that = this;
$(".listOfElements").each( function()
{
$that.someMethod( ); // here 'that' is referring to first_elementstill.
})
});
11. 使用find檢索加快搜索：
l Bad：
$("#form.text").this();
$("#form.int").that();
$("#form.choice").method();
l Good：
$("#form")
.find(".text").this().end()
.find(".int").that().end()
.find(".choice").method();
12. 儘量在.each()中緩存$(this)，如下：
$(selector).each(function () {
var eachOf_X_loop = $(this);
})
13. 事件拷貝：使用如下方式將不會拷貝原有的綁定事件，可以通過clone(true)來拷貝事件。
$("selector").html($("another-selector").html());
14. 使用暫存創建的html元素來替代過多直接使用的.html(),.append(),.prepend()等。
l Bad：
var $parent = $('#parent');
var iterations = 10;
for (var i = 0; i < iterations; i++){
var $div = $('<div class="foo-' + i+ '" />');
$parent.append($div);
}
l Good：
var $parent = $('#parent');
var iterations = 10;
var html = '';
for (var i = 0; i < iterations; i++){
html += '<divclass="foo-' + i + '"></div>';
}
$parent.append(html);
以下翻譯自http://stackoverflow.com/tags/jquery/info的BestPractices and Commonly Made Mistakes
15. 使用jquery一定要有$(document).ready
16. 若使用的$符號與其他框架衝突，可使用$.noConflict();或給jQuery起別稱。
17. 儘可能的暫存你檢索的對象以及使用鏈式寫法。
18. 變量命名轉換，在JQuery中使用以$開始區分變量與標準對象。如：var $this = $(this);
19. 獲取DOM對象的屬性及方法:
l Bad：
$('img').click(function() {
$(this).attr('src'); //Bad!
});
l Good：
$('img').click(function() {
this.src; //Much, much better
});
20. 更易讀更簡潔的創建元素形式：
$('<p>', {
text: 'Thisis a ' + variable,
"class": 'blue slider',
title: variable,
id: variable + i
}).appendTo(obj);