建站
咨詢
售后
建站咨詢
新聞中心
這篇文章給大家分享的是有關(guān)jquery中$(document).ready()和onload有什么區(qū)別的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)公司制作網(wǎng)站網(wǎng)頁找三站合一網(wǎng)站制作公司,專注于網(wǎng)頁設(shè)計(jì),成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作,網(wǎng)站設(shè)計(jì),企業(yè)網(wǎng)站搭建,網(wǎng)站開發(fā),建網(wǎng)站業(yè)務(wù),680元做網(wǎng)站,已為數(shù)千家服務(wù),創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)將一如既往的為我們的客戶提供最優(yōu)質(zhì)的網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷推廣服務(wù)!
區(qū)別：window.onload沒有簡(jiǎn)化寫法，必須等到頁面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。而“$(document).ready()”可以簡(jiǎn)寫成“$(function(){})”，它是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到加載完畢。
jquery $(document).ready()和window.onload的區(qū)別
1.執(zhí)行時(shí)間
window.onload必須等到頁面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。
$(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到加載完畢。
2.編寫個(gè)數(shù)不同
window.onload不能同時(shí)編寫多個(gè)，如果有多個(gè)window.onload方法，只會(huì)執(zhí)行一個(gè)
$(document).ready()可以同時(shí)編寫多個(gè)，并且都可以得到執(zhí)行
3.簡(jiǎn)化寫法
window.onload沒有簡(jiǎn)化寫法
$(document).ready(function(){})可以簡(jiǎn)寫成$(function(){});
說明：
以瀏覽器裝載文檔為例，在頁面加載完畢后，瀏覽器會(huì)通過JavaScript為DOM元素添加事件。在常規(guī)的JavaScript代碼中，通常使用window.onload方法，而在jQuery中，使用的是$(document).ready()方法。
$(document).ready()方法和window.onload方法有相似的功能，但是在執(zhí)行時(shí)機(jī)方面是有區(qū)別的。window.onload方法是在網(wǎng)頁中所有的元素（包括元素的關(guān)聯(lián)文件）完全加載到瀏覽器后才執(zhí)行，即JavaScript此時(shí)才可以訪問網(wǎng)頁中的任何元素。而通過jQuery中的$(document).ready()方法注冊(cè)的事件處理程序，可以在DOM完全就緒時(shí)就可以被調(diào)用。此時(shí)，網(wǎng)頁的所有元素對(duì)jQuery而言都是可以訪問的，但是，這并不意味著這些元素關(guān)聯(lián)的文件都已經(jīng)下載完畢。
舉一個(gè)例子，有一個(gè)大型的圖庫網(wǎng)站，為網(wǎng)頁中所有圖片添加某些行為，例如單擊圖片后讓它隱藏或顯示。如果使用window.onload方法來處理，那么用戶必須等到每一幅圖片都加載完畢后，才可以進(jìn)行操作。如果使用jQuery中的$(document).ready()方法來進(jìn)行設(shè)置，只要DOM就緒時(shí)就可以操作了，不需要等待所有圖片下載完畢。很顯然，把網(wǎng)頁解析為DOM樹的速度比把網(wǎng)頁中的所有關(guān)聯(lián)文件加載完畢的速度快很多。
另外需要注意一點(diǎn)，由于在$(document).ready()方法內(nèi)注冊(cè)的事件，只要DOM就緒就會(huì)被執(zhí)行，因此可能此時(shí)元素的關(guān)聯(lián)文件未下載完。例如與圖片有關(guān)的HTML下載完畢，并且已經(jīng)解析為DOM樹了，但很有可能圖片還未加載完畢，所以例如圖片的高度和寬度這樣的屬性此時(shí)不一定有效。要解決這個(gè)問題，可以使用JQuery中另一個(gè)關(guān)于頁面加載的方法——load()方法。load()方法會(huì)在元素的onload事件中綁定一個(gè)處理函數(shù)。如果處理函數(shù)綁定給window對(duì)象，則會(huì)在所有內(nèi)容（包括窗口、框架、對(duì)象和圖像等）加載完畢后觸發(fā)，如果處理函數(shù)綁定在元素上，則會(huì)在元素的內(nèi)容加載完畢后觸發(fā)。jQuery代碼如下：
$(window).load(function () {
//編寫代碼
})等價(jià)與javaScript中的以下代碼：
window.onload = function () {
//編寫代碼
}假設(shè)網(wǎng)頁中有兩個(gè)函數(shù)，JavaScript代碼如下：
function one() {
alert("one");
}
function two() {
alert("two");
}當(dāng)網(wǎng)頁加載完畢后，通過Javascript代碼來分別調(diào)用one函數(shù)和two函數(shù)：
window.onload = one; window.onload = two;
然而當(dāng)運(yùn)行代碼后，發(fā)現(xiàn)只彈出字符串“two”對(duì)話框。
字符串“one”對(duì)話框不能被彈出的原因是JavaScript的onload事件一次只能保存在一個(gè)函數(shù)的引用，它會(huì)自動(dòng)用后面的函數(shù)覆蓋前面的函數(shù)，因此不能在現(xiàn)有的行為上添加新的行為。
為了達(dá)到兩個(gè)函數(shù)順序觸發(fā)的效果，只能在創(chuàng)建一個(gè)新的JavaScript方法來實(shí)現(xiàn)，JavaScript代碼如下：
window.onload = function () {
one();
two();
}雖然這樣編寫的代碼能解決某些問題，但還是不能滿足某些需求，例如有多個(gè)JavaScript文件，每個(gè)文件都需要用到window.onload方法，這種情況下用上面提到的方法編寫代碼會(huì)非常麻煩。你可以參考Javascript共享onload事件，而jQuery的$(document).ready()方法能夠很好地處理這些情況，每次調(diào)用$(document).ready()方法都會(huì)在現(xiàn)有的行為上追加新的行為，這些行為函數(shù)會(huì)根據(jù)注冊(cè)的順序依次執(zhí)行。例如如下jQuery代碼：
function one() {
alert("one");
}
function two() {
alert("two");
}
$(document).ready(function () {
one();
});
$(document).ready(function () {
two();
})運(yùn)行代碼后，會(huì)彈出字符串“one”對(duì)話框，然后彈出字符串“two”對(duì)話框
感謝各位的閱讀！關(guān)于jquery中$(document).ready()和onload有什么區(qū)別就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
分享名稱：jquery中$(document).ready()和onload有什么區(qū)別
當(dāng)前鏈接：http://fisionsoft.com.cn/article/jigcio.html
