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