jQuery - $(document).ready是否必要？

Question

我正在阅读一篇关于在线教程，上面说如果<script></script>标签紧跟在</body>标签后面，那么就不需要使用$(document).ready，因为此时文档已经被加载。

Q1> 这是真的吗？

Q2>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script src="jquery.viewport.min.js"></script>

<script>
$(window).scroll(function() { // this line will track all mouse scroll event

});
</script>

$(window)是jQuery选择器吗？如果是的话，那么上述说法是正确的，因为我们不必在其中包含它。

$(document).ready(function() {

});

Q3> 为什么我们在这里使用 $link？为什么选择使用$link而不是 var link？

<script>
$(window).scroll(function() {
  $link = $('nav a[hash=#first]');
  $link.addClass('selected');
});
</script>

谢谢你

- q0987

Answer 1

这不正确。如果把它放在 body 后面就是正确的。你可以参考这个链接获得更多信息和方法 http://encosia.com/2010/08/18/dont-let-jquerys-document-ready-slow-you-down/

- Matt Williamson

---

谢谢您提供这个有用的链接。祝一切顺利。 - q0987

Answer 2

Q1. 是和否。也许在到达 </body> 后 jQuery 仍然会执行一些操作，但如果你只是想查找之前加载到 body 中的元素，它会起作用。

Q2. 它创建了一个指向 window 的 jQuery 对象。它不是一个 jQuery 选择器，$(document) 或 $(document.body) 也不是 - 在这些情况下，你正在向 jQuery 传递一个节点而不是选择器。

Q3. 它缓存了它。通过执行 $link = $('nav a[hash=#first]');，我们将结果缓存/分配给 $link，就好像我们两次执行了 $('nav a[hash=#first]')，那么 jQuery 就必须两次查找结果 - 如果所有调用都没有被缓存，这可能会变得非常耗费资源。你还应该使用 var $link = $('nav a[hash=#first]');，以确保 $link 不是全局定义的 - 因为这是不好的（由于变量冲突）。

作为一般惯例；任何使用 DOM 元素的东西都应该在文档准备好后进行（以确保它们已经加载并且 jQuery 准备好使用它们），任何不需要等待的东西都不应该（因为没有必要等待）。

- balupton

---

你好，balupton，我还有一个问题标记为 Q3。如果可以的话，能否帮忙看一下？谢谢 - q0987

Answer 3

Q1 有点正确。详细信息请参见api文档：

虽然JavaScript提供了load事件来执行页面渲染时的代码，但是该事件直到所有资产（如图像）完全接收后才会触发。...当使用依赖于CSS样式属性值的脚本时，重要的是引用外部样式表或嵌入样式元素，然后再引用脚本。

将代码插入在关闭body标签之前（或之后），并且不使用.ready()通常可以正常工作，因为当浏览器解析器到达body结尾时，dom已经足够完整，您可以开始使用选择器等。

Q2 "window"是浏览器公开的对象；它是DOM的一部分，但是没有必要以.ready(function() {})的方式引用它，因为正在加载的HTML不会以任何方式更改该对象以影响其.scroll事件。

- rekamso