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

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

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

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

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

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

在一个小项目中使用jQuery，只需几行普通的JavaScript就可以完成。

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

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

不理解事件绑定。JavaScript和jQuery的工作方式不同。

根据大众需求，一个例子:

jQuery:

$("#someLink").click(function(){//do something});

没有jQuery:

<a id="someLink" href="page.html" onClick="SomeClickFunction(this)">Link</a>
<script type="text/javascript">
SomeClickFunction(item){
    //do something
}
</script>

基本上JavaScript所需要的钩子不再是必要的。例如，使用内联标记(onClick等)，因为您可以简单地使用开发人员通常用于CSS目的的ID和类。

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

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

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

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

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

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

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

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

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

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

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

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

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