JQuery $function() 触发什么事件？答案

【问题标题】：What event does JQuery $function() fire on?JQuery $function() 触发什么事件？
【发布时间】：2011-04-23 22:48:20
【问题描述】：

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

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

愚蠢的问题 - 这个函数究竟是什么时候执行的？是在客户端下载了整个 HTML 页面的时候吗？

在$(function() 中使用包装你的代码而不是仅仅这样做有什么好处：

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

【问题讨论】：

除非您关闭括号，否则我认为它不会每次都发生火灾。 jQuery 并没有消除对正确语法的需求！

标签： javascript jquery function

【解决方案1】：

当文档被解析并准备好时触发，相当于$(document).ready(function () { })。

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

【讨论】：

【解决方案2】：

它在 DOM 被解析后立即执行，如果有多个出现，则按出现的顺序调用。但此时文档并未显示，它只是被解析。

【讨论】：

我不确定正在解析但未显示的文档是否正确。我认为浏览器通常会在解析元素时显示它们。我弄错了吗？
@patrick dw：你不是。此外，您可以从$.ready 读取和操作样式和位置数据；此时浏览器已经计算出页面的布局。
此时可能会或可能不会绘制 UI - 这取决于浏览器。可以肯定的是，DOM 已经完全构建好了，但是 window 的 OnLoad 事件还没有触发，因为浏览器还在下载图片等外部资源。
在大多数浏览器中，UI 很可能在此时绘制。考虑我们放置在文档底部的脚本元素，这样它们就不会阻止呈现它们之前的元素。脚本完成执行后，将解析所述脚本之后的任何元素，但在此之前的元素应该已经渲染。 @patrick，@Nrj。
@Andy E - 这就是让我对这个答案中的陈述感到好奇的原因。正如您所指出的，将脚本放在文档末尾（但通常仍在<body> 内）的全部目的是它是对 javascript blocks 呈现这一事实的补救措施。如果在加载整个文档之前无论如何都没有显示，那将不是什么大问题。 :o)

【解决方案3】：

当文档完成加载时。和写这个是一样的：

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

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

如果您不将代码包装在上面的块中，那么它会在遇到它时立即触发，而不是在页面上的所有控件都加载后触发。因此，如果一个块位于页面顶部并且它引用页面中的元素，则这些引用将不起作用，因为元素尚未加载。

但是，如果您在块中进行换行，那么您就知道页面已加载并且所有元素现在都可供参考。

【讨论】：

它实际上发生在之前整个文档已经加载；只是当 DOM 准备好时。
@Votey 你是对的。我应该更清楚。在大多数情况下，这通常不是问题，但有时这是一个重要的区别。

【解决方案4】：

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

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

【讨论】：