JQuery $ function()会触发什么事件?

时间:2022-11-13 20:08:38

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>

4 个解决方案

#1


17  

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时立即执行,如果有多个外观则按外观顺序调用。此时,文档不会显示,只是解析它。

#2


30  

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.

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

#3


5  

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.

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

#4


3  

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 load event 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 defer attribute 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 head tag, and at that point no elements of the body are available yet.

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

#1


17  

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时立即执行,如果有多个外观则按外观顺序调用。此时,文档不会显示,只是解析它。

#2


30  

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.

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

#3


5  

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.

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

#4


3  

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 load event 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 defer attribute 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 head tag, and at that point no elements of the body are available yet.

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