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

一、文檔就緒函數

1. JavaScript 的文檔就緒函數
   

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

2. jQuery 中的文檔就緒函數
   

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

執行以上的代碼，咱們能夠得知，JavaScript 的 window.onload=function(){// 執行代碼} 和 jQuery 的文檔就緒函數 $(document).ready(function(){// 執行函數}) 是等同的運行效果。可是兩者也有不一樣，下面本人就其區別與各位分享一下。

二、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(){// 執行代碼})，在開發中使用簡寫形式較多。