$(document).ready()和window.onload的區別

$(document).ready()和window.onload的區別

$(document).ready()和window.onload都是文檔就緒的方法,當頁面加載後執行參數中的函數。

前者爲jQuery方法，後者爲JavaScript方法。它們之間一共有三種區別：

區別1：簡寫和不可簡寫

jQuery中$(document).ready()能夠簡寫爲$()。

//$(document).ready() 能夠縮寫爲$()
$(function(){
    alert("111");
})

原生js中window.onload不可簡寫。

//沒法縮寫
window.onload = function(){
    alert("111");
}

區別2：個數的區別

在jQuery中 .ready()方法能夠寫多個。

$(function(){
    console.log("語句1");
})
            $(function(){
    console.log("語句2");
})

在控制檯輸出語句。兩個都輸出。

 

 

window.onload只能寫一個。

window.onload = function(){
    console.log("語句1");    //被覆蓋了 只輸出了語句2
};
window.onload = function(){
    console.log("語句2");
};

代碼自上而下運行 只輸出了一條

 

 

 區別3：執行時機不同

.ready()方法是網頁中全部DOM文檔結構回執完畢後即刻執行，可能與DOM元素關聯的內容（圖片，flash，視頻等）並無加載完就執行。

window.onload是必須等待網頁中全部內容加載完畢後(包括圖片，flash，視屏等才能執行)。

下面這個比較好像不是很嚴謹 沒法用代碼量來作區別 只能在它們之間作一下對比

window.onload = function(){
    alert("頁面全部元素加載完成");
}
$(function(){
    alert("頁面DOM結構加載完成");   
})

jQuery的.ready()方法先出來， 更早執行 提早把界面的效果實現

window.onload的方法後彈出

 

以上就是JavaScript和jQuery就緒方法的區別

若有錯誤請指正:D