《锋利的jquery》之$(document).ready()

$(document).ready()与window.onload区别：

1. $(document).ready()可同时编写多个；window.onload只能编写一个，因为它是赋值一个方法，后面的会覆盖前面的
2. $(document).ready()在所有DOM绘制完就执行，window.onload要等整个页面及各种资源都加载完成之后才执行后面
赋值的 function 行为
3. $(document).ready() 有简写形式（推荐使用）$(function(){});

但是在jQuery3.0版本上，$(document).ready(）不一定比window.onload先执行。

//在$(document).ready()里面的代码会在所有DOM加载完毕后，页面内容（图片等）完全加载完之前被执行
//可以多次被使用,下面三个函数都会执行
$(document).ready(function(){
    alert("hello,karine meet jquery1!");
}); 
$(document).ready(function(){
    alert("hello,karine meet jquery2!");
}); 
$(function(){
    alert("hello,karine meet jquery3!");
});//缩写形式


//window.onload只能使用一次，若多个函数，则执行最后一个
window.onload = function(){
    alert("hello,karine and js1!");
}; //不显示,被覆盖
window.onload = function(){
    alert("hello,karine and js2!");
};   //显示

---

DOM文档加载的步骤为:

1.解析HTML结构。
2.加载外部脚本和样式表文件。
3.解析并执行脚本代码。
4.DOM树构建完成。//DOMContentLoaded
5.加载图片等外部文件。
6.页面加载完毕。//load

$(document).ready() 内部实现：

document.ready = function (callback) {
            ///兼容FF,Google
            if (document.addEventListener) {
                document.addEventListener('DOMContentLoaded', function () {
                    document.removeEventListener('DOMContentLoaded', arguments.callee, false);
                    callback();
                }, false)
            }
             //兼容IE
            else if (document.attachEvent) {
                document.attachEvent('onreadystatechange', function () {
                      if (document.readyState == "complete") {
                                document.detachEvent("onreadystatechange", arguments.callee);
                                callback();
                       }
                })
            }
            else if (document.lastChild == document.body) {
                callback();
            }
        }