JavaScript與jQuery中文檔就緒函數(shù)的區(qū)別
1、文檔就緒函數(shù)
JavaScript 的文檔就緒函數(shù):
<script>
? ? window.onload = function() {
? ? ? ? alert("歡迎!")
? ? }
</script>jQuery 中的文檔就緒函數(shù):
// 寫(xiě)法1
<script>
? ? $(document).ready(function() {
? ? ? ? alert("歡迎!")
? ? })
</script>
// 寫(xiě)法2
<script>
? ? $(function() {
? ? ? ? alert("歡迎!")
? ? })
</script>執(zhí)行以上的代碼,我們可以得知,JavaScript 的window.onload=function(){// 執(zhí)行代碼} 和 jQuery 的文檔就緒函數(shù) $(document).ready(function(){// 執(zhí)行函數(shù)}) 是等同的運(yùn)行效果。但是二者也有不同,下面就對(duì)其區(qū)別與大家分享一下。
2、window.onload 與 $(document).ready()的區(qū)別
| window.onload | $(document).ready() | |
| 執(zhí)行時(shí)機(jī) | 必須等網(wǎng)頁(yè)中所有內(nèi)容加載完后(包括圖片)才能執(zhí)行 | 網(wǎng)頁(yè)中所有DOM結(jié)構(gòu)繪制完后就執(zhí)行 |
| 函數(shù)編寫(xiě)個(gè)數(shù) | 不能編寫(xiě)多個(gè),例如: window.onload=function(){}; window.onload=function(){}; 此時(shí)第二個(gè)覆蓋第一個(gè) | 能同時(shí)編寫(xiě)多個(gè),例如: $(document).ready(function(){}); $(document).ready(function(){}); 兩個(gè)函數(shù)都執(zhí)行 |
| 簡(jiǎn)化寫(xiě)法 | 無(wú) | $() |
對(duì)二者區(qū)別的簡(jiǎn)單說(shuō)明如下:
- (1)在執(zhí)行時(shí)機(jī)上,
window.onload表示頁(yè)面所有內(nèi)容全部加載完成后執(zhí)行,$(document).ready() 表示頁(yè)面所有 DOM 元素加載完成后執(zhí)行。例如,有一個(gè)圖片標(biāo)<img src="aa.jpg"/>,JavaScript 的 window.onload 要等 aa.jpg 整個(gè)圖片加載完后才能執(zhí)行注冊(cè)事件中的函數(shù),但是 jQuery 的文檔就緒函數(shù)要等<img></img>標(biāo)簽對(duì)加載完成就可以執(zhí)行了,也就是只需要解析到此處的頁(yè)面控件是一個(gè)圖片標(biāo)簽對(duì)即可,不用等圖片顯示完。 - (2)函數(shù)編寫(xiě)個(gè)數(shù)主要體現(xiàn)為是覆蓋還是追加。下面通過(guò)一個(gè)簡(jiǎn)單實(shí)例來(lái)對(duì)比。
先寫(xiě)一個(gè)JavaScript 程序,里面有 window.onload 注冊(cè)事件,分別打印不同的數(shù)據(jù)
代碼如下:
<script>
? ? window.onload = function() {
? ? ? ? alert("aa")
? ? };
? ? window.onload = function() {
? ? ? ? alert("bb")
? ? };
</script>執(zhí)行結(jié)果如下:

我們發(fā)現(xiàn),代碼執(zhí)行后,首先彈出bb提示框,并未彈出 aa 提示框,說(shuō)明 JavaScript 的 window.onload 不能編寫(xiě)多個(gè)函數(shù),如果編寫(xiě)多個(gè)函數(shù),后寫(xiě)的會(huì)覆蓋前面的。
現(xiàn)在我們用jQuery編寫(xiě)同樣的程序,代碼如下:
<script>
? ? $(document).ready(function() {
? ? ? ? alert("aa")
? ? });
? ? $(document).ready(function() {
? ? ? ? alert("bb")
? ? });
</script>執(zhí)行結(jié)果如下:

根據(jù)執(zhí)行結(jié)果可以看到,代碼通過(guò)使用 jQuery 的文檔就緒函數(shù)打印了兩組數(shù)據(jù),程序先打印了第一條數(shù)據(jù) aa,接著又打印了第二條數(shù)據(jù) bb,說(shuō)明jQuery的文檔就緒函數(shù)可以有多個(gè)。如果有多個(gè)文檔就緒函數(shù),那么執(zhí)行順序就是從第一條數(shù)據(jù)開(kāi)始,逐條進(jìn)行打印,不會(huì)像 window.onload 那樣出現(xiàn)覆蓋情況。
(3)簡(jiǎn)化寫(xiě)法屬于語(yǔ)法規(guī)范。window.onload 沒(méi)有簡(jiǎn)寫(xiě)形式;$(document).ready(function(){// 執(zhí)行代碼})的簡(jiǎn)寫(xiě)形式為$(function(){// 執(zhí)行代碼}),在開(kāi)發(fā)中使用簡(jiǎn)寫(xiě)形式較多。
到此這篇關(guān)于JavaScript與jQuery中文檔就緒函數(shù)的區(qū)別的文章就介紹到這了,更多相關(guān)JavaScript與jQuery的文檔就緒函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實(shí)現(xiàn)將數(shù)組中所有元素連接成一個(gè)字符串的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)將數(shù)組中所有元素連接成一個(gè)字符串的方法,涉及javascript中采用join方法進(jìn)行數(shù)組轉(zhuǎn)化的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
微信小程序開(kāi)發(fā)之?dāng)?shù)據(jù)存儲(chǔ) 參數(shù)傳遞 數(shù)據(jù)緩存
本文主要介紹了微信小程序開(kāi)發(fā)之?dāng)?shù)據(jù)存儲(chǔ)、參數(shù)傳遞、數(shù)據(jù)緩存的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
JavaScript利用正則表達(dá)式來(lái)禁止鍵盤(pán)輸入數(shù)字
本文主要介紹了JavaScript利用正則表達(dá)式來(lái)禁止鍵盤(pán)輸入數(shù)字,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
javascript中cookie對(duì)象用法實(shí)例分析
這篇文章主要介紹了javascript中cookie對(duì)象用法,實(shí)例分析了javascript針對(duì)cookie對(duì)象的寫(xiě)入、讀取及刪除等操作的使用方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
javascript感應(yīng)鼠標(biāo)圖片透明度顯示的方法
這篇文章主要介紹了javascript感應(yīng)鼠標(biāo)圖片透明度顯示的方法,涉及javascript針對(duì)鼠標(biāo)事件及圖片透明度操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
JavaScript數(shù)據(jù)類型學(xué)習(xí)筆記分享
這篇文章主要為大家分享了JavaScript數(shù)據(jù)類型學(xué)習(xí)筆記,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09
JavaScript中的alert()函數(shù)使用技巧詳解
這篇文章主要介紹了JavaScript中的alert()函數(shù)使用技巧詳解,本文講解了普通彈出、帶換行的文本、使用制表符、使用變量、使用樣式等選擇,需要的朋友可以參考下2014-12-12

