jquery $(document).ready()和onload的差別是什麼

區別：window.onload沒有簡化寫法，必須等到頁面內包含圖片的所有元素載入完畢後才能執行。而“$(document).ready()”可以簡寫成“$(function(){})”，它是DOM結構繪製完畢後就執行，不必等到載入完畢。

推薦教學：jquery影片教學

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

1.執行時間

window.onload必須等到頁內包含圖片的所有元素載入完畢後才能執行。 
$(document).ready()是DOM結構繪製完畢後才執行，不必等到載入完畢。

2.寫個數不同

window.onload不能同時寫多個，如果有多個window.onload方法，只會執行一個 

$(document).ready()可以同時寫多個，都可以得到執行

#3.簡化寫法

window.onload沒有簡化寫法 

$(document).ready(function(){})可以簡稱為$(function(){});

##說明：

#以瀏覽器載入文件為例，在頁面載入完畢後，瀏覽器會透過JavaScript為DOM元素新增事件。在常規的JavaScript程式碼中，通常使用window.onload方法，而在jQuery中，使用的是$(document).ready()方法。

$(document).ready()方法和window.onload方法有相似的功能，但是在執行時機上是有區別的。 window.onload方法是在網頁中所有的元素（包括元素的關聯檔）完全載入到瀏覽器後才執行，也就是JavaScript此時才可以存取網頁中的任何元素。而透過jQuery中的$(document).ready()方法註冊的事件處理程序，可以在DOM完全就緒時就可以被呼叫。此時，網頁的所有元素對jQuery而言都是可以存取的，但是，這並不意味著這些元素關聯的檔案都已經下載完畢。

舉一個例子，有一個大型的圖庫網站，為網頁中所有圖片添加某些行為，例如點擊圖片後讓它隱藏或顯示。如果使用window.onload方法來處理，那麼使用者必須等到每一幅圖片都載入完畢後，才可以進行操作。如果使用jQuery中的$(document).ready()方法來進行設置，只要DOM就緒時就可以操作了，不需要等待所有圖片下載完畢。很顯然，把網頁解析為DOM樹的速度比把網頁中的所有關聯文件載入完畢的速度快很多。

另外要注意一點，由於在$(document).ready()方法內註冊的事件，只要DOM就緒就會執行，因此可能此時元素的關聯檔未下載完。例如與圖片有關的HTML下載完畢，並且已經解析為DOM樹了，但很有可能圖片還未加載完畢，所以例如圖片的高度和寬度這樣的屬性此時不一定有效。要解決這個問題，可以使用JQuery中另一個關於頁面載入的方法－load()方法。 load()方法會在元素的onload事件中綁定一個處理函數。如果處理函數綁定給window對象，則會在所有內容（包括視窗、框架、物件和圖像等）載入完畢後觸發，如果處理函數綁定在元素上，則會在元素的內容載入完畢後觸發。 jQuery程式碼如下：

$(window).load(function () {
    //编写代码
})

等價與javaScript中的以下程式碼：

window.onload = function () {
    //编写代码
}

假設網頁中有兩個函數，JavaScript程式碼如下：

function one() {
    alert("one");
}
function two() {
    alert("two");
}

當網頁載入完畢後來，透過Javascript程式碼分別呼叫one函數和two函數：

window.onload = one;
window.onload = two;

然而當執行程式碼後，發現只彈出字串「two」對話框。

字串「one」對話方塊不能被彈出的原因是JavaScript的onload事件一次只能儲存在一個函數的引用，它會自動用後面的函數覆蓋前面的函數，因此不能在現有的行為上添加新的行為。

為了達到兩個函數順序觸發的效果，只能在創建一個新的JavaScript方法來實現，JavaScript程式碼如下：

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

雖然這樣寫的程式碼能解決某些問題，但還是不能滿足某些需求，例如有多個JavaScript文件，每個文件都需要用到window.onload方法，這種情況下用上面提到的方法編寫程式碼會非常麻煩。你可以參考Javascript共享onload事件，而jQuery的$(document).ready()方法能夠很好地處理這些情況，每次呼叫$(document).ready()方法都會在現有的行為上追加新的行為，這些行為函數會依照註冊的順序依序執行。例如如下jQuery程式碼：

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

執行程式碼後，會彈出字串「one」對話框，然後彈出字串「two」對話框

更多程式相關知識，請造訪：

程式教學！ ！

以上是jquery $(document).ready()和onload的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！