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存在之后，此构造将在页面加载事件中执行该函数。

Answer 3

最佳做法是将所有SCRIPT元素放在HTML文档的底部（就在</body>标记之前。原因是：

加载外部JS文件会阻止加载其他资源（如图像）
由于JS代码是立即执行的，最好先解析页面的HTML代码，然后再执行JS代码

您可以在此处看到演示此做法的HTML5模板：http://vidasp.net/HTML5-template.html

Answer 4

很多人把它放在页面底部，以便其他代码可以先执行。对于文档就绪语法而言，这一点变得有点没有实际意义，等待其他内容加载到dom。所以，使用这种逻辑，从理论上说它可以随处可见。

Answer 5

脚本在页面底部最佳，以提供最快速的DOM渲染。只有在DOM准备就绪后才能执行以下习惯用法：

$(function() { /* ... your code goes here ... */ }

如果您有很多代码或多个页面之间共享的代码，您应该将其链接到一个单独的文件中，如果您需要优化下载速度，可以将其缩小。

Answer 6

我问了这个问题，虽然回来的方式不同。你可能想看看我得到的答案 - 他们非常...... 哲学：

JQuery - Best way of wiring GUI objects to events?

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

6 个答案: