用回调“链接”动画事件。

假设你想让一个段落在点击后消失。您还希望随后从DOM中删除该元素。你可能认为你可以简单地链接这些方法:

$("p").click(function(e) {
  $(this).fadeOut("slow").remove();
});

在这个例子中，.remove()将在. fadeout()完成之前被调用，破坏渐变效果，只是让元素立即消失。相反，当你想在完成前一个命令后才触发一个命令时，使用回调函数:

$("p").click(function(e){
  $(this).fadeOut("slow", function(){
    $(this).remove();
  });
});

. fadeout()的第二个参数是一个匿名函数，它将在. fadeout()动画完成后运行。这使得逐渐褪色，并随后删除元素。

如果你多次bind()同一个事件，它将多次触发。为了安全起见，我通常总是unbind('click').bind('click')

当使用$。ajax函数对服务器的ajax请求，你应该避免使用完整的事件来处理响应数据。无论请求是否成功，它都会触发。

用成功代替完成。

请参阅文档中的Ajax事件。

避免滥用文件准备。 保持文档仅为初始化代码准备。 始终在文档外部提取函数，以便它们可以被重用。

我在doc ready语句中看到了数百行代码。丑陋，不可读，不可能维护。

将id而不是jQuery对象传递给函数:

myFunc = function(id) { // wrong!
    var selector = $("#" + id);
    selector.doStuff();
}

myFunc("someId");

传递一个包装集要灵活得多:

myFunc = function(elements) {
    elements.doStuff();
}

myFunc($("#someId")); // or myFunc($(".someClass")); etc.

不要使用裸类选择器，像这样:

$('.button').click(function() { /* do something */ });

这将检查每一个元素，看它是否有一个“button”类。

相反，你可以帮助它，比如:

$('span.button').click(function() { /* do something */ });
$('#userform .button').click(function() { /* do something */ });

这是我去年从Rebecca Murphy的博客中学到的

更新:这个答案是2年前给出的，不适合当前版本的jQuery。 其中一个评论包括一个测试来证明这一点。 还有一个更新的测试版本，其中包含了回答这个问题时的jQuery版本。