3 回答

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超8個(gè)贊
在Jquery里面,我們可以看到兩種寫法:$(function(){}) 和$(document).ready(function(){})
這兩個(gè)方法的效果都是一樣的,都是在dom文檔樹加載完之后執(zhí)行一個(gè)函數(shù)(注意,這里面的文檔樹加載完不代表全部文件加載完)。
而window.onload是在dom文檔樹加載完和所有文件加載完之后執(zhí)行一個(gè)函數(shù)。也就是說(shuō)$(document).ready要比window.onload先執(zhí)行。
那么Jquery里面$(document).ready函數(shù)的內(nèi)部是怎么實(shí)現(xiàn)的呢?下面我們就來(lái)看看:
我們來(lái)為document添加一個(gè)ready函數(shù):
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('onreadytstatechange', function () {
if (document.readyState == "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
callback();
}
})
}
else if (document.lastChild == document.body) {
callback();
}
}
document.ready這個(gè)函數(shù)是實(shí)現(xiàn)了。我們?cè)賮?lái)驗(yàn)證一下最上面所說(shuō)的“ready要比onload先執(zhí)行”:
window.onload = function () {
alert('onload');
};
document.ready(function () {
alert('ready');
});
執(zhí)行這段代碼之后,你會(huì)看到瀏覽器里面會(huì)先彈出“ready”,在彈出onload。

TA貢獻(xiàn)1765條經(jīng)驗(yàn) 獲得超5個(gè)贊
$(document).ready(...) 和 window.onload 事件雖然具有類似的效果,但是,它們?cè)谟|發(fā)操作的時(shí)間上存在著微妙的差異。
window.onload
當(dāng)一個(gè)文檔完全下載到瀏覽器中時(shí),會(huì)觸發(fā) window.onload 事件。這意味著頁(yè)面上的全部元素對(duì) javascript 而言都是可以訪問(wèn)的,這種情況對(duì)編寫功能性的代碼非常有利,因?yàn)闊o(wú)需考慮加載的次序。
$(document).ready()
通過(guò) $(document).ready() 注冊(cè)的事件處理程序,則會(huì)在 DOM 完全就緒并可以使用時(shí)調(diào)用。雖然這也意味著所有元素對(duì)腳本而言都是可以訪問(wèn)的,但是,缺不意味著所有
- 3 回答
- 0 關(guān)注
- 1051 瀏覽
添加回答
舉報(bào)