jQuery 是一个伟大的脚本库，由 John Resig 在 2006年1月的BarCamp NYC上释出第一个版本。你可以在 下载到最新版本，截止本文发布为止已更新到jQuery 2.1.4版。这里以jQuery1.8.3为例分析。
学习 jQuery 有许多途径，我们今天从 jQuery 的 ready 函数开始。本例中的代码都来自于 jQuery 脚本库。
如果你使用过 jQuery , 就必然使用过 ready 函数，它用来注册当页面准备好之后可以执行的函数。
问题来啦，我们的页面什么时候准备好了呢？
1. onload 事件
最基本的处理方式就是页面的 onload 事件，我们在处理这个事件的时候，可以有多种方式，即可以通过 HTML 方式，直接写在 body 元素的开始标记中，也可以使用事件注册的方式来使用，这又可以分为 DOM0 方式和 DOM2 方式。再考虑到浏览器的兼容性，使用 DOM2 方式写出来，如下所示。
if (document.addEventListener) { // A fallback to window.onload, that will always work window.addEventListener("load", jQuery.ready, false); // If IE event model is used } else { // A fallback to window.onload, that will always work window.attachEvent("onload", jQuery.ready); }
2. DOMContentLoaded 事件
不过 onload 事件要等到所有页面元素加载完成才会触发, 包括页面上的图片等等。如果网页上有大量的图片，效果可想而知，用户可能在没有看到图片的时候，就已经开始操作页面了，而这时我们的页面还没有初始化，事件还没有注册上，这岂不是太晚了！
除了大家熟知的 onload 事件之外， 与 DOM 中的 onload 事件相近的，我们还有 DOMContentLoaded 事件可以考虑， 基于标准的浏览器支持这个事件, 当所有 DOM 解析完以后会触发这个事件。
这样，对于基于标准的浏览器来说，我们还可以注册这个事件的处理。这样，我们可能更早地捕获到加载完成的事件。
if (document.addEventListener) { // Use the handy event callback document.addEventListener("DOMContentLoaded", DOMContentLoaded, false); // A fallback to window.onload, that will always work window.addEventListener("load", jQuery.ready, false); }
3. onreadystatechange 事件
不标准的浏览器怎么办呢？
如果浏览器存在 document.onreadystatechange 事件，当该事件触发时，如果 document.readyState=complete 的时候，可视为 DOM 树已经载入。
不过，这个事件不太可靠，比如当页面中存在图片的时候，可能反而在 onload 事件之后才能触发，换言之，它只能正确地执行于页面不包含二进制资源或非常少或者被缓存时作为一个备选吧。
if (document.addEventListener) { // Use the handy event callback document.addEventListener("DOMContentLoaded", DOMContentLoaded, false); // A fallback to window.onload, that will always work window.addEventListener("load", jQuery.ready, false); // If IE event model is used } else { // Ensure firing before onload, maybe late but safe also for iframes document.attachEvent("onreadystatechange", DOMContentLoaded); // A fallback to window.onload, that will always work window.attachEvent("onload", jQuery.ready); }
DOMContentLoaded 函数在做什么呢？最终还是要调用 jQuery.ready 函数。
DOMContentLoaded = function() { if ( document.addEventListener ) { document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false ); jQuery.ready(); } else if ( document.readyState === "complete" ) { // we're here because readyState === "complete" in oldIE // which is good enough for us to call the dom ready! document.detachEvent( "onreadystatechange", DOMContentLoaded ); jQuery.ready(); } }
4. doScroll 检测法
MSDN 关于 JScript 的一个方法有段不起眼的话，当页面 DOM 未加载完成时，调用 doScroll 方法时，会产生异常。那么我们反过来用，如果不异常，那么就是页面DOM加载完毕了！
Diego Perini 在 2007 年的时候，报告了一种检测 IE 是否加载完成的方式，使用 doScroll 方法调用。详细的说明见这里。
原理是对于 IE 在非 iframe 内时，只有不断地通过能否执行 doScroll 判断 DOM 是否加载完毕。在本例中每间隔 50 毫秒尝试去执行 doScroll，注意，由于页面没有加载完成的时候，调用 doScroll 会导致异常，所以使用了 try -catch 来捕获异常。
(function doScrollCheck() { if (!jQuery.isReady) { try { // Use the trick by Diego Perini // top.doScroll("left"); } catch (e) { return setTimeout(doScrollCheck, 50); } // and execute any waiting functions jQuery.ready(); } })();
5. document.readyState 状态
如果我们注册 ready 函数的时间点太晚了，页面已经加载完成之后，我们才注册自己的 ready 函数，那就用不着上面的层层检查了，直接看看当前页面的 readyState 就可以了，如果已经是 complete ，那就可以直接执行我们准备注册的 ready 函数了。不过 ChrisS 报告了一个很特别的错误情况，我们需要延迟一下执行。