关于ready和load方法作用于不同情况下的比较
jQuery中有两个方法——ready和load。它们非常容易混淆。这里做一下区分：
jQuery中的ready特指“DOM”全部加载完毕，也就是说，只要DOM加载完毕了，这个事件自然被触发了。所谓“DOM”加载完毕指整个页面的标签部分全部加载完毕，至于说某些标签内部可能还存在着一系列事件未完成（譬如img标签可能加载远处一个很大的bmp图片尚未加载完毕等情况）则被忽略。因此对于单纯设置某些Html标签的事件或者属性的绑定而言，在ready方法中显然比load更为适合（因为load必须等到全部的标签都处于完成状态，包括img把图片全部加载完毕为止）。
这里不妨给出一个现成的示例代码（纯Html）：
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.8.3.js"></script> <script> $(function () { alert("DOM加载完毕"); }); </script> </head> <body onload="alert('Body加载完毕');"> <form id="form1" runat="server"> <div> <img src="http://lbvagrant.com/images/desktops/a-m/Bliss.bmp" /> </div> </form> </body> </html>
注意jQuery中的$(function……)就是静止等待知道整个DOM加载完毕之后触发事件。其等同于：
1）
$.ready(function () { alert("DOM加载完毕"); });
2）
$(document).ready(function () { alert("DOM加载完毕"); });
如果你运行这个页面（直接在IE或者其它页面中打开），你会发觉先弹出“DOM加载完毕”的消息框，然后可能直到BMP图片加载完毕之后才会弹出“Body”加载完毕的消息。这就是它们之间最大的差别。
顺便提及一句，如果这样进行比较：
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.8.3.js"></script> <script> $(function () { alert("DOM加载完毕"); }); $(window).ready(function () { alert("Window加载完毕"); }); </script> </head> <body onload="alert('Body加载完毕');"> <form id="form1" runat="server"> <div> <img src=……/> </div> </form> </body> </html>
运行顺序将是先弹出“DOM加载完毕”，之后才弹出“Window加载完毕”，最后弹出“Body加载完毕”。那是因为DOM的本质是document，是Window的一个属性对象。自然等到DOM加载完毕之后Window对象才表示初步构建完毕（window对象自身没有顶层对象了，其本身就是顶层对象）。而DOM初步加载完毕并不表示每一个元素都加载完毕，因此body中的那个js对话框是在最后才弹出。
关于深入理解DOM，你可以使用IE7以及以上的浏览器，或者FireFox等带有代码调试功能的浏览器；以IE为例——
随意打开一个Url（譬如“www.baidu.com”）。先按F12启用调试功能，切换到“网络”面板，点击“开始捕获“按钮，切换到“HTML”面板，随后在地址栏输入百度地址，回车。
如果你注意HTML，它会生成一个Html的TreeView，这个就是DOM（也就是document.ready）需要执行的内容，因此如果你要对一些Html标签进行设置属性等，直接可以在这个事件中去做，而不是等到document全部加在完毕了才去做；相反地，body的onload标签要到body中全部内容彻底加载完毕为止（证明就是你可以看“网络”，里边发现大量Image下载以及内部跳转等复杂信息）。
另外值得注意的是：
$(document).load是错误的，因为“load”并不是document对象的一个内置的方法；如果要人为为某个标签对象增加一个自定义事件，在jQuery中你只能使用bind方法增加一个自定义的事件，然后必须使用trigger去人为触发这个自定义事件。
