jquery中的$(document).ready()方法和window.onload方法的區別

　　負責後臺的同事反饋過來一個問題，他添加的一個js效果在我作的模板上出不了效果。我過去看了他添加的js，代碼中有段window.onload方法，而模板中js也是用window.onload執行的，我猜測多是兩個方法有衝突。通過測試確實是兩者衝突，因而把其中一個改成$(document).ready()方法執行，因而問題解決。

　　可是對於window.onload和$(document).ready()兩者的異同，一直不是很清楚，今天查資料認真看了下，把它記錄在此。

　　window.onload和$(document).ready()主要有兩點區別：

　　一、執行時機
　　window.onload方法是在網頁中的全部的元素（包括元素的全部關聯文件）都徹底加載到瀏覽器以後才執行。而經過jQuery中 的$(document).ready()方法註冊的事件處理程序，只要在DOM徹底就緒時，就能夠調用了，好比一張圖片只要<img>標籤 完成，不用等這個圖片加載完成，就能夠設置圖片的寬高的屬性或樣式等。

　　——其實從兩者的英文字母能夠大概理解上面的話，onload即加載完成，ready即DOM準備就緒。

　　二、註冊事件　

　　$(document).ready()方法能夠屢次使用而註冊不一樣的事件處理程序，而window.onload一次只能保存對一個函數的引用，屢次綁定函數只會覆蓋前面的函數。

　　例如：

　　先看window.onload方法在一個頁面保存兩次對函數的引用

function one(){
    alert("one");
}
function two(){
    alert("two");
}
window.onload = two ;
window.onload = one ;

　　運行代碼後，彈出「one」，說明第一個函數的引用被第二個函數引用覆蓋。

 

　　再看看$(document).ready()方法註冊兩個事件處理程序　　

function one(){
    alert("one");
}
function two(){
    alert("two");
}
$(document).ready(function(){
    one();
});
$(document).ready(function(){
    two();
});

　　運行代碼，先彈出「one」，再彈出「two」，兩個事件處理程序按順序執行