document-ready vs body-ready vs window-ready事件答案

【问题标题】：document-ready v/s body-ready v/s window-ready eventdocument-ready vs body-ready vs window-ready事件
【发布时间】：2012-07-17 19:55:21
【问题描述】：

这三个事件有什么不同？

哪个在其他之前/之后加载？

   <body> 
        <script type='text/javascript'> 
            $(document).ready(function(){
                console.log('Document %s',+new Date());
            });
            $('body').ready(function(){
                console.log('Body %s',+new Date());
            });
            $(window).ready(function(){
                console.log('Window %s',+new Date());
            }); 
        </script>
        <div>hello world</div>
    </body>

奇怪的是，它们的触发顺序与我将它们放在代码上的顺序相同。对于当前示例。 document 先触发一个，windows 最后一个触发。

附言我读过window.onload vs <body onload=""/>， window.onload vs document.onload 和其他一些人。

【问题讨论】：

这些都做同样的事情，你对声明顺序运行的函数的观察是正确的。
document 版本中的任何特别之处，因为每个人都使用它。
其实我更喜欢简单的$(function() { ... }); 这也完全一样。它更短。

标签： javascript javascript-events event-handling jquery

【解决方案1】：

它们完全相同，实际上传递给$(...)的参数并不重要。

来自jQuery documentation about .ready：

.ready(处理程序)

handler - 在 DOM 准备好后执行的函数。

以下三种语法都是等价的：

$(document).ready(handler)

$().ready(handler)（不推荐）

$(handler)

.ready() 方法只能在匹配的 jQuery 对象上调用当前文档，所以选择器可以省略。

正如所见，$() 的参数 (selector) 被明确表示为可选（在执行 $(...).ready 时），因此我们可以安全地假设它与最终结果无关。

【讨论】：

也来自文档：“.ready() 方法只能在匹配当前文档的 jQuery 对象上调用，因此可以省略选择器。”
哦。我一直认为$(function() { ... }); 只是$(document).ready(function(){....}); 的快捷方式。感谢您的验证。我之前已经阅读了 jQuery 文档，但您以我能理解的方式解释了它
@Jashwant 这可能对您问题的另一部分有所帮助，执行顺序stackoverflow.com/questions/1148241/…