Question

我们有一个JQuery $(function()语句：

<script type="text/javascript">
$(function(){
  //Code..
})
</script>

愚蠢的问题 - 这个功能到底是什么时候执行的？是在客户端下载整个HTML页面的时候吗？

在$(function()中使用包装代码的好处是什么，而不仅仅是：

<script type="text/javascript">
//Code..
</script>

Answer 1

在解析文档并准备就绪时触发，并且等同于$(document).ready(function () { })。

显而易见的好处是，在页面上的其他元素之前使用脚本标记意味着您的脚本可以与它们进行交互，即使它们在解析时不可用。如果在解析元素并且文档未准备好之前运行脚本，则它们将无法进行交互。

Answer 2

一旦解析了DOM就会执行它，并且如果有多个外观则按照外观的顺序调用它。此时，文档不会显示，只是解析了它。

Answer 3

文档完成加载后。这和写这个一样：

$(document).ready(function(){});

编辑：回答你的第二个问题：

如果你没有将你的代码包装在上面的块中，那么它会在遇到它时立即触发，而不是在页面上的所有控件都已加载之后触发。因此，如果一个块位于页面顶部并且它引用了页面中的元素，那么这些引用将无法正常运行，因为元素尚未加载。

但是如果你在块中包装，那么你就知道页面已经加载了，所有元素现在都可用了。

Answer 4

在文档完全加载，DOM树已初始化，所有CSS样式已应用并且所有Javascript都已执行后触发。它与load事件的不同之处在于，从其他URL（例如图像或Flash文件）加载其内容的元素（除CSS / JS之外）在此时未必完成加载。这通常被称为“domready”或“domloaded”事件，一些现代浏览器直接支持它（例如Firefox有一个DomContentLoaded事件），而在其他浏览器上它可以用各种技巧模拟，比如使用defer属性或者将剧本放在身体的最末端。

优点是您可以在此时可靠地与文档进行交互;例如，您可以在具有特定ID的元素上设置事件处理程序，并确保它已存在于DOM树中。另一方面，如果某些外部资源加载缓慢，它可以比load事件早运行。如果您的脚本位于HTML代码的末尾，那么使用或不使用domready事件可能没什么区别，但通常会从head标记调用脚本，此时没有正文的元素现在还可以。

JQuery $ function（）会触发什么事件？

4 个答案: