JavaScript與jQuery中檔案就緒函數的區別

2022-03-20 10:00:13

1、檔案就緒函數

JavaScript 的檔案就緒函數：

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

jQuery 中的檔案就緒函數：

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

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

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

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

	window.onload	$(document).ready()
執行時機	必須等網頁中所有內容載入完後（包括圖片）才能執行	網頁中所有DOM結構繪製完後就執行
函數編寫個數	不能編寫多個，例如： window.onload=function(){}; window.onload=function(){}; 此時第二個覆蓋第一個	能同時編寫多個，例如： $(document).ready(function(){})； $(document).ready(function(){})；兩個函數都執行
簡化寫法	無	$()

對二者區別的簡單說明如下：

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

先寫一個JavaScript 程式，裡面有 window.onload 註冊事件，分別列印不同的資料

程式碼如下：

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

執行結果如下：

我們發現，程式碼執行後，首先彈出bb提示框，並未彈出 aa 提示框，說明 JavaScript 的 window.onload 不能編寫多個函數，如果編寫多個函數，後寫的會覆蓋前面的。

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

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

執行結果如下：

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

到此這篇關於JavaScript與jQuery中檔案就緒函數的區別的文章就介紹到這了,更多相關JavaScript與jQuery的檔案就緒函數內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

JavaScript與jQuery中檔案就緒函數的區別

目錄

1、檔案就緒函數

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

熱門文章