這篇文章主要介紹了JQuery中DOM加載與事件執行,實例分析了jQuery中DOM加載及事件執行的原理與實現方法,并補充說明了windows.onload方法和$(document).ready()方法的區別,需要的朋友可以參考下

本文實例講述了JQuery中DOM加載與事件執行原理。分享給大家供大家參考。具體分析如下：

JavaScript和HTML之間的交互是通過用戶和瀏覽器操作頁面時引發的事件來處理的。當文檔或者它的某些元素發生某些變化或操作時，瀏覽器會自動生成一個事件。例如當瀏覽器裝載完一個文檔后，會生成事件：當用戶單擊某個按鈕時，也會生成事件。雖然利用傳統的JavaScript事件能完成這些交互，但jQuery增加并擴展了基本的事件處理機制。jQuery不僅提供了更加優雅的事件處理語法，而且極大地增強了事件處理能力。

以瀏覽器裝載文檔為例，在頁面加載完畢后，瀏覽器會通過JavaScript為DOM元素添加事件。在常規的JavaScript代碼中，通常使用window.onload方法，而在jQuery中，使用的是$(document).ready()方法。$(document).ready()方法是事件模塊中最重要的一個函數，可以極大地提高Web應用程序的響應速度。jQuery就是用$(document).ready()方法來代替傳統JavaScript的window.onload方法的。通過使用該方法，可以在DOM載入就緒時就對其進行操縱并調用執行它所綁定的函數。在使用過程中，需要注意$(document).ready()方法和window.onload方法之間的細微區別。

執行時機

$(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代碼如下：

1. $(window).load(function(){  
2. // 編寫代碼  
3. }) 

等價于JavaScript中的以下代碼：

1. window.onload = function(){  
2. // 編寫代碼  
3. }) 

現在詳細講解下windows.onload方法和$(document).ready()方法的區別：

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

1. function one(){  
2. alert("one");  
3. }  
4. function two(){  
5. alert ("two");  
6. } 

當網頁加載完畢后，通過如下JavaScript代碼來分別調用one函數和two函數：

1. window.onload = one;  
2. window.onload = two; 

然而當運行代碼后，發現只彈出字符串“two”對話框。字符串“one”對話框不能被彈出的原因是JavaScript的onload事件一次只能保存對一個函數的引用，它會自動用后面的函數覆蓋前面的函數，因此不能在現有的行為上添加新的行為。

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

1. window.onload = function(){  
2. one();  
3. two();  
4. } 

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

1. function one(){  
2. alert("one");  
3. }  
4. function two(){  
5. alert("two");  
6. }  
7. $(document).ready(function(){  
8. one();  
9. })  
10. $(document).ready(function(){  
11. two();  
12. }); 

運行代碼后，會先彈出字符串“one”對話框，然后彈出字符串“two”對話框。

下面看看ready()與onload()的耗時：

jQuery的ready()耗時 : 498 ms

簡寫方式

上面我們ready函數寫成這樣：

1. $(document).ready(function(){  
2. // 編寫代碼  
3. }) 

也可以簡寫成這樣：

1. $(function(){  
2. // 編寫代碼  
3. }) 

另外，$(document)也可以簡寫為$()。當$()不帶參數時，默認參數就是“document”，因此可以簡寫為：

1. $().ready(function(){  
2. // 編寫代碼  
3. }) 

3種方式都是一樣的功能，讀者可以根據自己的喜好，選擇其中的一種。

希望本文所述對大家的jQuery程序設計有所幫助。