第JavaScript與jQuery中文檔就緒函數(shù)的區(qū)別目錄1、文檔就緒函數(shù)2、window.onload與$(document).ready()的區(qū)別

1、文檔就緒函數(shù)

JavaScript的文檔就緒函數(shù)：

script

window.onload=function(){

alert("歡迎！")

}

/script

jQuery中的文檔就緒函數(shù)：

//寫法1

script

$(document).ready(function(){

alert("歡迎！")

})

/script

//寫法2

script

$(function(){

alert("歡迎！")

})

/script

執(zhí)行以上的代碼，我們可以得知，JavaScript的window.onload=function(){//執(zhí)行代碼}和jQuery的文檔就緒函數(shù)$(document).ready(function(){//執(zhí)行函數(shù)})是等同的運行效果。但是二者也有不同，下面就對其區(qū)別與大家分享一下。

2、window.onload與$(document).ready()的區(qū)別

window.onload$(document).ready()執(zhí)行時機必須等網(wǎng)頁中所有內(nèi)容加載完后（包括圖片）才能執(zhí)行網(wǎng)頁中所有DOM結構繪制完后就執(zhí)行函數(shù)編寫個數(shù)不能編寫多個，例如：

window.onload=function(){};

window.onload=function(){};

此時第二個覆蓋第一個

能同時編寫多個，例如：

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

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

兩個函數(shù)都執(zhí)行

簡化寫法無$()

對二者區(qū)別的簡單說明如下：

（1）在執(zhí)行時機上，window.onload表示頁面所有內(nèi)容全部加載完成后執(zhí)行，$(document).ready()表示頁面所有DOM元素加載完成后執(zhí)行。例如，有一個圖片標imgsrc=aa.jpg/，JavaScript的window.onload要等aa.jpg整個圖片加載完后才能執(zhí)行注冊事件中的函數(shù)，但是jQuery的文檔就緒函數(shù)要等img/img標簽對加載完成就可以執(zhí)行了，也就是只需要解析到此處的頁面控件是一個圖片標簽對即可，不用等圖片顯示完。（2）函數(shù)編寫個數(shù)主要體現(xiàn)為是覆蓋還是追加。下面通過一個簡單實例來對比。

先寫一個JavaScript程序，里面有window.onload注冊事件，分別打印不同的數(shù)據(jù)

代碼如下：

script

window.onload=function(){

alert("aa")

};

window.onload=function(){

alert("bb")

};

/script

執(zhí)行結果如下：

我們發(fā)現(xiàn)，代碼執(zhí)行后，首先彈出bb提示框，并未彈出aa提示框，說明JavaScript的window.onload不能編寫多個函數(shù)，如果編寫多個函數(shù)，后寫的會覆蓋前面的。

現(xiàn)在我們用jQuery編寫同樣的程序，代碼如下：

script

$(document).ready(function(){

alert("aa")

});

$(document).ready(function(){

alert("bb")

});

/script

執(zhí)行結果如下：

根據(jù)執(zhí)行結果可以看到，代碼通過使用jQuery的文檔就緒函數(shù)打印了兩組數(shù)據(jù)，程序先打印了第一條數(shù)據(jù)aa，接著又打印了第二條數(shù)據(jù)bb，說明jQuery的文檔就緒函數(shù)可以有多個。如果有多個文檔就緒函數(shù)，那么執(zhí)行順序就是從第一條數(shù)據(jù)開始，逐條進行打印，不會像window.onload那樣出現(xiàn)覆蓋情況。

（3）簡化寫法屬于語法規(guī)范。win