详细解释了jQuery中文档和窗口以及加载和就绪的区别

用过JavaScript的童鞋应该知道窗口对象和文档对象，应该听说过load事件和ready事件。小盘当然知道，他们认为自己很清楚。直到最近出了问题，他们才知道事情没那么简单。

首先，我们来谈谈窗口和文档。直观上，窗口代表浏览器窗口，而文档代表浏览器窗口中加载的dom元素。另外，文档是窗口的属性，窗口是顶层对象。

两者有什么区别？很容易理解有一个浏览器，里面加载的页面特别长，已经超过了一个屏幕。当然滚动条肯定会出现。这时，$(窗口)。高度()和$(文档)。高度()不相等，文档的高度必须大于窗口的高度，因为窗口总是那么大。见下图：

再说一遍load事件和ready事件(这里load和ready指的是jQuery事件，下同)。

先说负荷。load事件主要用于替换本机窗口。onload它只能在两种情况下使用：

在窗口对象上。例如$(窗口)。负载(fn)；

带有URL的元素(图像、脚本、框架、iframes)。例如$(“img”)。负载(fn)；

此外，任何元素都没有加载事件，例如：$(document)。负载(fn)；这是一种错误的写法，根本不会执行。

加载事件只能在页面完全加载时触发。所谓完全加载，就是不仅加载了dom结构，还加载了所有的链接引用。例如，页面上有大量图片，每个图片在完全加载之前都必须加载。

最重要的是，官方jQuery文档明确指出，加载事件的跨浏览器兼容性非常差(它不能一致地工作，也不能可靠地跨浏览器工作)。小菜测试后，谷歌浏览器只支持$(window)。负载(fn)；而Firefox支持$(窗口)。负载(fn)；和$(“img”)。负载(fn)；

因此，除非必要，否则强烈建议不要使用load事件。

最后，谈谈准备。ready事件可以添加到任何元素中，例如$(window)。就绪(fn)。$(文件)。就绪(fn)；$(“div”)。就绪(fn)；等等。

ready事件不需要完全加载页面，只能通过加载dom结构来触发。

可以同时注册多个就绪事件。当它们被执行时，它们按照注册的顺序被执行。请注意，即使注册了不同元素的就绪事件，它们也会按顺序执行。例如，以下代码：

复制代码如下： $(窗口)。ready(function(){ alert(' window ')；});$(文档)。ready(function(){ alert(' document ')；});$(“div”)。ready(function(){ alert(' div ')；});

根据常识，div应该先加载，所以先执行alert('div ')。然后报警('文档')；或警报(“窗口”)；但不幸的是，alert(' div ')；是最后一个被执行的。因此，无论就绪事件是否在同一个元素上注册，它们都按照注册的顺序执行。

最后，ready事件与window.onload(或body onload=" ")冲突。如果使用window.onload(或body onload=" ")，则不会执行ready事件。

经过这么多讨论，最终证明：$(文档)。就绪(fn)；兼容性和安全性是最好的。如果有这样的需求，尽量采用这种方法。