什么是document.ready?
说document.ready之前，先要讲讲window.onload。我们知道如果在网页头部执行获取或改变dom结构的操作，必须要把相关操作函数放在window.onload当中。为什么需要这样操作呢？看看下面的例子：
<!DOCTYPE HTML>
<html lang="en">
<head>
<script>
var a=document.getElementById("demo");
alert(a);
</script>
</head>
<body>
<div id="demo">DEMO</div>
</body>
</html>
当我们访问alert(a)时，会弹出null，实际上，这是告诉我们对象没有找到，为什么呢？因为在这句代码执行的时候，后面的DOM结构并没有加载出来，所以我们用document.getElementById找不到这个对象。为了解决这个问题，我们用到了window.onload，onload这个方法是告诉浏览器，在整个HTML文档加载完毕之后执行相关代码，这样以来，就不会出现找不到对象了。
但是问题又来了，我们知道，现代的网页当中不可避免的有图片等其它一些富文本的元素，当网页当中有比较大的图片时候，可能网页的结构已经加载完毕了，但是图片还在下载，这样就导致我们window.onload当中的Javascript代码不能执行。为了能够让js代码在dom加载完之后马上执行，一般有两种方法，第一种是比较简单的，直接把Javascript代码放在HTML标签”“之前。另外一种方法就是用一种方法判断DOM结构已经加载完毕了。第一种方法很简单，就没有什么好说的。关于第二种方法，用过jQuery的都知道它提供一个document.ready()的方法用来监听DOM文档加载完毕的事件。今天的目的就是要实现jQuery的document.ready的方法：
<!DOCTYPE HTML>
<html lang="en">
<head>
<script>
var $=(function(){
var ready=function(callback){
if(document.addEventListener){
document.addEventListener("DOMContentLoaded",function(){
document.removeEventListener("DOMContentLoaded",arguments.callee,false);
callback();
},false);
}else if(document.attachEvent){
document.attachEvent("onreadystatechange",function(){
if ( document.readyState === "complete" ) {
document.detachEvent( "onreadystatechange", arguments.callee );
callback();
}
})
}
}
return {
ready:ready
}
})()
$.ready(function(){
alert(document.getElementById("demo").innerHTML);
})
</script>
</head>
<body>
<div id="demo">DEMO</div>
</body>
</html>
写好“$”这个对象之后，我们就可以通过它提供的方法ready来判断DOM加载完成，然后执行回调函数。主要的原理是通过addEventListener和attachEvent来监听DOM加载的事件，加载完成之后，执行回调函数。
注: addEventListener 支持IE9+(包括IE9)的浏览器，它接受三个参数，第一个为事件类型，第二个为事件处理函数，第三个一般为false。
attachEvent支持IE9之前IE5之后的浏览器，和addEventListener类似，但是只接受两个参数。其它的区别为addEventListener监听的事件类型不用带“on”，但是attachEvent监听的事件需要带”on”.