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

一、文檔就緒函數

  1. JavaScript 的文檔就緒函數
        window.onload = function() {
            alert("歡迎!")
        }" _ue_custom_node_="true">
  2. jQuery 中的文檔就緒函數
    // 寫法1
        $(document).ready(function() {
            alert("歡迎!")
        })" _ue_custom_node_="true">// 寫法2
        $(function() {
            alert("歡迎!")
        })" _ue_custom_node_="true">

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

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

  window.onload $(document).ready()
執行時機 必須等網頁中全部內容加載完後(包括圖片)才能執行 網頁中全部DOM結構繪製完後就執行
函數編寫個數

不能編寫多個,例如:ide

window.onload=function(){};函數

window.onload=function(){};3d

此時第二個覆蓋第一個blog

能同時編寫多個,例如:事件

$(document).ready(function(){});圖片

$(document).ready(function(){});ip

兩個函數都執行開發

簡化寫法 $()

對兩者區別的簡單說明以下:
(1)在執行時機上,window.onload 表示頁面全部內容所有加載完成後執行,$(document).ready() 表示頁面全部 DOM 元素加載完成後執行。例如,有一個圖片標籤bef4400cbc05de35bf684369d9db10ed.gif,JavaScript 的 window.onload 要等 aa.jpg 整個圖片加載完後才能執行註冊事件中的函數,可是 jQuery 的文檔就緒函數要等標籤對加載完成就能夠執行了,也就是隻須要解析到此處的頁面控件是一個圖片標籤對便可,不用等圖片顯示完。
(2)函數編寫個數主要體現爲是覆蓋仍是追加。下面經過一個簡單實例來對比。文檔

先寫一個JavaScript 程序,裏面有 window.onload 註冊事件,分別打印不一樣的數據,代碼以下:

    window.onload = function() {
        alert("aa")
    };
    window.onload = function() {
        alert("bb")
    };" _ue_custom_node_="true">

執行結果以下:

咱們發現,代碼執行後,首先彈出bb提示框,並未彈出 aa 提示框,說明 JavaScript 的 window.onload 不能編寫多個函數,若是編寫多個函數,後寫的會覆蓋前面的。

如今咱們用jQuery編寫一樣的程序,代碼以下:

    $(document).ready(function() {
        alert("aa")
    });    $(document).ready(function() {
        alert("bb")
    });" _ue_custom_node_="true">

執行結果以下:

根據執行結果能夠看到,代碼經過使用 jQuery 的文檔就緒函數打印了兩組數據,程序先打印了第一條數據 aa,接着又打印了第二條數據 bb,說明jQuery的文檔就緒函數能夠有多個。若是有多個文檔就緒函數,那麼執行順序就是從第一條數據開始,逐條進行打印,不會像 window.onload 那樣出現覆蓋狀況。(3)簡化寫法屬於語法規範。window.onload 沒有簡寫形式;$(document).ready(function(){// 執行代碼})的簡寫形式爲$(function(){// 執行代碼}),在開發中使用簡寫形式較多。

相關文章
相關標籤/搜索