在哪里放置所有jQuery JavaScript代码？

Question

从文档中我发现了这个例子:

我们可以为任何元素设置动画,例如简单的图像:

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />

最初显示的元素,我们可以缓慢隐藏它:

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});

我记得5年前,你应该永远不要参考任何元素,直到它被定义.这条规则是否仍适用？所以我必须将所有代码放在我网页的页脚中？或者我可以将它放在一个单独的文件中并将其导入页脚？什么是最佳做法？

Answer 1

建议的方法是将所有初始化代码放入$(document).ready,如下所示:

$(document).ready(function() {
   $('#foobar').click(function(event) { alert("You Clicked Me!"); });
});

Answer 2

你是对的; 在DOM元素存在之前,您无法与其进行交互.

您有两种选择:

• 如您所建议的那样,将代码放在HTML下面.

• 将代码放在任何地方,但将其包装$(function() { ... }).
  在DOM存在之后,此构造将在页面加载事件中执行该函数.