jQuery 里面的文档就绪用法

在

jQuery里面，我们可以看到两种写法:

$(function(){}) 和

$(document).ready(function(){})，

这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数,

（注意，这里面的

ready 是

DOM树加载完成，不是

onload的页面资源加载完成的）。

document.ready方法

原生js本身并没有提供 document.ready方法

//document是一个DOM对象，这个对象本身没有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();            }        }//还有一种方法是：(function () {    var ie = !!(window.attachEvent && !window.opera);    var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);    var fn = [];    var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); };    var d = document;    d.ready = function (f) {      if (!ie && !wk && d.addEventListener)        return d.addEventListener('DOMContentLoaded', f, false);      if (fn.push(f) > 1) return;      if (ie)        (function () {          try { d.documentElement.doScroll('left'); run(); }          catch (err) { setTimeout(arguments.callee, 0); }        })();      else if (wk)        var t = setInterval(function () {          if (/^(loaded|complete)$/.test(d.readyState))            clearInterval(t), run();        }, 0);    };    })();//实际使用的时候，上面两种方法选一个即可使用 document.ready( function(){} );//结论是原生js本身并没有提供 document.ready方法

window.onload 在没定义方法之前，它只是一个值为null的属性

//控制台打印一下window,看看onload是什么东东window//other...onlanguagechange:nullonload:nullonloadeddata:null//other...//可以看到window的onload属性的值是null//window.onload = function() {//code...}//在使用的时候：先使用函数表达式的方式给它定义函数，很容易犯错的是 将它当作函数直接使用。

document.ready 和 window.onload 的区别是：

上面定义的document.ready方法在DOM树加载完成后就会执行，而window.onload是在页面资源（比如图片和媒体资源，它们的加载速度远慢于DOM的加载速度）加载完成之后才执行。也就是说$(document).ready要比window.onload先执行。

验证一下 ready 要比 onload 先执行：

window.onload = function () {            alert('onload');        };        document.ready(function () {            alert('ready');        });

执行这段代码之后，你会看到浏览器里面会先弹出

ready,在弹出

onload。