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

Answer 3

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

1. 加载外部JS文件阻止加载其他资源（如图像）
2. 因为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 - 将GUI对象连接到事件的最佳方法？