欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery中DOM加載與事件執(zhí)行實例分析

 更新時間:2015年06月13日 10:02:30   作者:簡明現(xiàn)代魔法  
這篇文章主要介紹了JQuery中DOM加載與事件執(zhí)行,實例分析了jQuery中DOM加載及事件執(zhí)行的原理與實現(xiàn)方法,并補充說明了windows.onload方法和$(document).ready()方法的區(qū)別,需要的朋友可以參考下

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

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

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

執(zhí)行時機

$(document).ready()方法和window.onload方法有相似的功能,但是在執(zhí)行時機方面是有區(qū)別的。window.onload方法是在網(wǎng)頁中所有的元素(包括元素的所有關(guān)聯(lián)文件)完全加載到瀏覽器后才執(zhí)行,即JavaScript此時才可以訪問網(wǎng)頁中的任何元素。而通過jQuery中的$(document).ready()方法注冊的事件處理程序,在DOM完全就緒時就可以被調(diào)用。此時,網(wǎng)頁的所有元素對jQuery而言都是可以訪問的,但是,這并不意味著這些元素關(guān)聯(lián)的文件都已經(jīng)下載完畢。

舉一個例子,有一個大型的圖庫網(wǎng)站,為網(wǎng)頁中所有圖片添加某些行為,例如單擊圖片后讓它隱藏或顯示。如果使用window.onload方法來處理,那么用戶必須等劍每一幅圖片都加載完畢后,才可以進行操作。如果使用jQuery中的$(document).ready()方法來進行設(shè)置,只要DOM就緒就可以操作了,不需要等待所有圖片下載完畢。很顯然,把網(wǎng)頁解析為DOM樹的速度比把頁面中的所有關(guān)聯(lián)文件加載完畢的速度快很多。

另外,需要注意一點,由于在$(document).ready()方法內(nèi)注冊的事件,只要DOM就緒就會被執(zhí)行,因此可能此時元素的關(guān)聯(lián)文件末下載完。例如與圖片有關(guān)的HTML下載完畢,并且已經(jīng)解析為DOM樹了,但很有可能圖片還未加載完畢,所以例如圖片的高度和寬度這樣的屬性此時不一定有效。要解決這個問題,可以使用jQuery中另一個關(guān)于頁面加載的方法——load()方法。load()方法會在元素的onload事件中綁定一個處理函數(shù)。如果處理函數(shù)綁定給window對象,則會在所有內(nèi)容(包括窗口、框架、對象和圖像等)加載完畢后觸發(fā),如果處理函數(shù)綁定在元素上,則會在元素的內(nèi)容加載完畢后觸發(fā)。jQuery代碼如下:

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

等價于JavaScript中的以下代碼:

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

現(xiàn)在詳細講解下windows.onload方法和$(document).ready()方法的區(qū)別:

假設(shè)網(wǎng)頁中有兩個函數(shù),JavaScript代碼如下:

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

當網(wǎng)頁加載完畢后,通過如下JavaScript代碼來分別調(diào)用one函數(shù)和two函數(shù):

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

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

為了達到兩個函數(shù)順序觸發(fā)的效果,只能再創(chuàng)建一個新的JavaScript方法來實現(xiàn),Javascript代碼如下:

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

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

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

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

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

jQuery的ready()耗時 : 498 ms

簡寫方式

上面我們ready函數(shù)寫成這樣:

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

也可以簡寫成這樣:

$(function(){  
  // 編寫代碼  
})

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

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

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

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

相關(guān)文章

最新評論