Javascript JQuery $function() 触发什么事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3908724/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What event does JQuery $function() fire on?
提问by Marcus Leon
We have a JQuery $(function()statement as:
我们有一个 JQuery$(function()语句：
<script type="text/javascript">
$(function(){
//Code..
})
</script>
Dumb question - when exactly is this function executed? Is it when the entire HTML page has been downloaded by the client?
愚蠢的问题 - 这个函数到底什么时候执行？是客户端下载了整个 HTML 页面吗？
What is benefit of using the wrapping your code within $(function()as opposed to just doing:
使用包装你的代码$(function()而不是仅仅这样做有什么好处：
<script type="text/javascript">
//Code..
</script>
采纳答案by Nrj
It is executed as soon as the DOM is parsed and is invoked in order of appearance if there are multiple appearances. At this point the document is however not displayed, its just parsed.
它在 DOM 解析后立即执行，如果有多个外观，则按外观顺序调用。然而此时文档并未显示，它只是被解析。
回答by Andy E
It fires when the document has been parsed and is ready, and is the equivalent of $(document).ready(function () { }).
当文档被解析并准备好时触发，相当于$(document).ready(function () { }).
The obvious benefit is that having your script tag before other elements on the page means that your script can interact with them even though they're not available at parse time. If you run your script before elements have been parsed and the document is not ready, they will not be available for interaction.
明显的好处是，在页面上的其他元素之前放置你的脚本标签意味着你的脚本可以与它们交互，即使它们在解析时不可用。如果您在元素被解析之前运行脚本并且文档尚未准备好，则它们将不可用于交互。
回答by spinon
When the document completes loading. It is the same as writing this:
当文档完成加载时。这和写这个一样：
$(document).ready(function(){});
EDIT: To answer your second question:
编辑：回答你的第二个问题：
If you don't wrap your code in the block above then it would fire as soon as it is encountered instead of after all the controls on the page have loaded. So if a block was at the top of a page and it referred to elements in the page those references would not work as the elements have not loaded yet.
如果您没有将代码包装在上面的块中，那么它会在遇到它时立即触发，而不是在页面上的所有控件都已加载之后。因此，如果一个块位于页面顶部并且它引用了页面中的元素，那么这些引用将不起作用，因为元素尚未加载。
But if you wrap in the block then you know that the page has loaded and all elements are available to now reference.
但是如果你在块中包装，那么你就知道页面已经加载并且所有元素现在都可以引用。
回答by Tgr
It fires after the the document has fully loaded, the DOM tree has been initialized, all CSS styles have been applied and all Javascript has been executed. It differs from the loadevent in that elements (other than CSS/JS) that load their content from other URLs, such as images or flash files, have not necessarily finished loading at this point. This is usually called the "domready" or "domloaded" event, and some modern browsers support it directly (e.g. Firefox has a DomContentLoaded event), and on others it can be simulated with various tricks, like using the deferattribute or placing a script at the very end of the body.
它在文档完全加载、DOM 树已初始化、所有 CSS 样式已应用且所有 Javascript 已执行后触发。它与load事件的不同之处在于，从其他 URL（例如图像或 Flash 文件）加载其内容的元素（CSS/JS 除外）此时不一定已完成加载。这通常称为“domready”或“domloaded”事件，一些现代浏览器直接支持它（例如 Firefox 有一个 DomContentLoaded 事件），而在其他浏览器中，它可以用各种技巧来模拟，比如使用defer属性或将脚本放在身体的尽头。
The advantage is that you can reliably interact with the document at this time; for example you can set an event handler on an element with a certain ID and be sure that it already exists in the DOM tree. On the other hand, it can run considerably earlier than the load event, if some external resource is slow to load. If your script is at the end of your HTML code, then there might be little difference in using or not using the domready event, but usually scripts are called from the headtag, and at that point no elements of the body are available yet.
好处是此时可以可靠地与文档进行交互；例如，您可以在具有特定 ID 的元素上设置事件处理程序，并确保它已存在于 DOM 树中。另一方面，如果某些外部资源加载缓慢，它可以比加载事件运行得更早。如果您的脚本位于 HTML 代码的末尾，那么使用或不使用 domready 事件可能没有什么区别，但通常脚本是从head标签调用的，此时还没有正文的元素可用。
