1、文檔就緒函數

JavaScript 的文檔就緒函數：

<script>
? ? window.onload = function() {
? ? ? ? alert("歡迎！")
? ? }
</script>

jQuery 中的文檔就緒函數：

// 寫法1
<script>
? ? $(document).ready(function() {
? ? ? ? alert("歡迎！")
? ? })
</script>

// 寫法2
<script>
? ? $(function() {
? ? ? ? alert("歡迎！")
? ? })
</script>

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

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

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

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

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

代碼如下：

<script>
? ? window.onload = function() {
? ? ? ? alert("aa")
? ? };
? ? window.onload = function() {
? ? ? ? alert("bb")
? ? };
</script>

執(zhí)行結果如下：

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

現在我們用jQuery編寫同樣的程序，代碼如下：

<script>
? ? $(document).ready(function() {
? ? ? ? alert("aa")
? ? });
? ? $(document).ready(function() {
? ? ? ? alert("bb")
? ? });
</script>

執(zhí)行結果如下：

根據執(zhí)行結果可以看到，代碼通過使用 jQuery 的文檔就緒函數打印了兩組數據，程序先打印了第一條數據 aa，接著又打印了第二條數據 bb，說明jQuery的文檔就緒函數可以有多個。如果有多個文檔就緒函數，那么執(zhí)行順序就是從第一條數據開始，逐條進行打印，不會像 window.onload 那樣出現覆蓋情況。
（3）簡化寫法屬于語法規(guī)范。window.onload 沒有簡寫形式；$(document).ready(function(){// 執(zhí)行代碼})的簡寫形式為$(function(){// 執(zhí)行代碼})，在開發(fā)中使用簡寫形式較多。

到此這篇關于JavaScript與jQuery中文檔就緒函數的區(qū)別的文章就介紹到這了,更多相關JavaScript與jQuery的文檔就緒函數內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論