在Jquery里面,我們可以看到兩種寫法:$(function(){}) 和$(document).ready(function(){})
這兩個方法的效果都是一樣的,都是在dom文檔樹加載完之后執行一個函數(注意,這里面的文檔樹加載完不代表全部文件加載完)。
而window.onload是在dom文檔樹加載完和所有文件加載完之后執行一個函數。也就是說$(document).ready要比window.onload先執行。
那么Jquery里面$(document).ready函數的內部是怎么實現的呢?下面我們就來看看:
我們來為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(); } }
document.ready這個函數是實現了。我們再來驗證一下最上面所說的“ready要比onload先執行”:
window.onload = function () { alert('onload'); }; document.ready(function () { alert('ready'); });
執行這段代碼之后,你會看到瀏覽器里面會先彈出“ready”,在彈出onload。
這個大家還是親手試試吧!
現在ready和onload的區別講完了,后續會繼續更新新東西。
排版好像不是很好,大家有好排版的方法可以說一下。