JavaScript與jQuery中文檔就緒函數(shù)的區(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ù)})
是等同的運(yùn)行效果。但是二者也有不同,下面就對(duì)其區(qū)別與大家分享一下。
2、window.onload 與 $(document).ready()的區(qū)別
window.onload | $(document).ready() | |
執(zhí)行時(shí)機(jī) | 必須等網(wǎng)頁中所有內(nèi)容加載完后(包括圖片)才能執(zhí)行 | 網(wǎng)頁中所有DOM結(jié)構(gòu)繪制完后就執(zhí)行 |
函數(shù)編寫個(gè)數(shù) | 不能編寫多個(gè),例如: window.onload=function(){}; window.onload=function(){}; 此時(shí)第二個(gè)覆蓋第一個(gè) | 能同時(shí)編寫多個(gè),例如: $(document).ready(function(){}); $(document).ready(function(){}); 兩個(gè)函數(shù)都執(zhí)行 |
簡(jiǎn)化寫法 | 無 | $() |
對(duì)二者區(qū)別的簡(jiǎn)單說明如下:
- (1)在執(zhí)行時(shí)機(jī)上,
window.onload
表示頁面所有內(nèi)容全部加載完成后執(zhí)行,$(document).ready() 表示頁面所有 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í)行了,也就是只需要解析到此處的頁面控件是一個(gè)圖片標(biāo)簽對(duì)即可,不用等圖片顯示完。 - (2)函數(shù)編寫個(gè)數(shù)主要體現(xiàn)為是覆蓋還是追加。下面通過一個(gè)簡(jiǎn)單實(shí)例來對(duì)比。
先寫一個(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 提示框,說明 JavaScript 的 window.onload
不能編寫多個(gè)函數(shù),如果編寫多個(gè)函數(shù),后寫的會(huì)覆蓋前面的。
現(xiàn)在我們用jQuery編寫同樣的程序,代碼如下:
<script> ? ? $(document).ready(function() { ? ? ? ? alert("aa") ? ? }); ? ? $(document).ready(function() { ? ? ? ? alert("bb") ? ? }); </script>
執(zhí)行結(jié)果如下:
根據(jù)執(zhí)行結(jié)果可以看到,代碼通過使用 jQuery
的文檔就緒函數(shù)打印了兩組數(shù)據(jù),程序先打印了第一條數(shù)據(jù) aa,接著又打印了第二條數(shù)據(jù) bb,說明jQuery的文檔就緒函數(shù)可以有多個(gè)。如果有多個(gè)文檔就緒函數(shù),那么執(zhí)行順序就是從第一條數(shù)據(jù)開始,逐條進(jìn)行打印,不會(huì)像 window.onload 那樣出現(xiàn)覆蓋情況。
(3)簡(jiǎn)化寫法屬于語法規(guī)范。window.onload 沒有簡(jiǎn)寫形式;$(document).ready(function(){// 執(zhí)行代碼})
的簡(jiǎn)寫形式為$(function(){// 執(zhí)行代碼}),在開發(fā)中使用簡(jiǎn)寫形式較多。
到此這篇關(guān)于JavaScript與jQuery中文檔就緒函數(shù)的區(qū)別的文章就介紹到這了,更多相關(guān)JavaScript與jQuery的文檔就緒函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js變量值傳到php過程詳解 將php解析成數(shù)據(jù)
這篇文章主要介紹了js變量值傳到php過程詳解 將php解析成數(shù)據(jù),傳參數(shù)去后臺(tái),用ajax,或者原生js方式拼接url。明白原理,洞悉系統(tǒng)是先解析php,再執(zhí)行html代碼和js代碼。,需要的朋友可以參考下2019-06-06JavaScript中實(shí)現(xiàn)鍵值對(duì)應(yīng)的字典與哈希表結(jié)構(gòu)的示例
字典或者哈希表這樣的鍵值對(duì)應(yīng)結(jié)構(gòu)在其他很多語言中都有內(nèi)置,非常好用,這里我們來看一下JavaScript中實(shí)現(xiàn)鍵值對(duì)應(yīng)的字典與哈希表結(jié)構(gòu)的示例:2016-06-06Bootstrap學(xué)習(xí)筆記之css組件(3)
這篇文章主要為大家詳細(xì)介紹了bootstrap學(xué)習(xí)筆記中的css組件,感興趣的小伙伴們可以參考一下2016-06-06uniapp動(dòng)態(tài)修改元素節(jié)點(diǎn)樣式詳解
這篇文章主要介紹了uni-app動(dòng)如何態(tài)修改元素節(jié)點(diǎn)樣式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-08-08詳解webpack-dev-server使用http-proxy解決跨域問題
這篇文章主要介紹了詳解webpack-dev-server使用http-proxy解決跨域問題,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01分享JavaScript獲取網(wǎng)頁關(guān)閉與取消關(guān)閉的事件
這篇文章主要介紹了JavaScript獲取網(wǎng)頁關(guān)閉與取消關(guān)閉的事件,有需要的朋友可以參考一下2013-12-12js,jquery滾動(dòng)/跳轉(zhuǎn)頁面到指定位置的實(shí)現(xiàn)思路
這篇文章主要介紹了如何通過js或jquery滾動(dòng)/跳轉(zhuǎn)頁面到指定位置,需要的朋友可以參考下2014-06-06