JQuery中DOM加載與事件執(zhí)行實(shí)例分析
本文實(shí)例講述了JQuery中DOM加載與事件執(zhí)行原理。分享給大家供大家參考。具體分析如下:
JavaScript和HTML之間的交互是通過(guò)用戶和瀏覽器操作頁(yè)面時(shí)引發(fā)的事件來(lái)處理的。當(dāng)文檔或者它的某些元素發(fā)生某些變化或操作時(shí),瀏覽器會(huì)自動(dòng)生成一個(gè)事件。例如當(dāng)瀏覽器裝載完一個(gè)文檔后,會(huì)生成事件:當(dāng)用戶單擊某個(gè)按鈕時(shí),也會(huì)生成事件。雖然利用傳統(tǒng)的JavaScript事件能完成這些交互,但jQuery增加并擴(kuò)展了基本的事件處理機(jī)制。jQuery不僅提供了更加優(yōu)雅的事件處理語(yǔ)法,而且極大地增強(qiáng)了事件處理能力。
以瀏覽器裝載文檔為例,在頁(yè)面加載完畢后,瀏覽器會(huì)通過(guò)JavaScript為DOM元素添加事件。在常規(guī)的JavaScript代碼中,通常使用window.onload方法,而在jQuery中,使用的是$(document).ready()方法。$(document).ready()方法是事件模塊中最重要的一個(gè)函數(shù),可以極大地提高Web應(yīng)用程序的響應(yīng)速度。jQuery就是用$(document).ready()方法來(lái)代替?zhèn)鹘y(tǒng)JavaScript的window.onload方法的。通過(guò)使用該方法,可以在DOM載入就緒時(shí)就對(duì)其進(jìn)行操縱并調(diào)用執(zhí)行它所綁定的函數(shù)。在使用過(guò)程中,需要注意$(document).ready()方法和window.onload方法之間的細(xì)微區(qū)別。
執(zhí)行時(shí)機(jī)
$(document).ready()方法和window.onload方法有相似的功能,但是在執(zhí)行時(shí)機(jī)方面是有區(qū)別的。window.onload方法是在網(wǎng)頁(yè)中所有的元素(包括元素的所有關(guān)聯(lián)文件)完全加載到瀏覽器后才執(zhí)行,即JavaScript此時(shí)才可以訪問(wèn)網(wǎng)頁(yè)中的任何元素。而通過(guò)jQuery中的$(document).ready()方法注冊(cè)的事件處理程序,在DOM完全就緒時(shí)就可以被調(diào)用。此時(shí),網(wǎng)頁(yè)的所有元素對(duì)jQuery而言都是可以訪問(wèn)的,但是,這并不意味著這些元素關(guān)聯(lián)的文件都已經(jīng)下載完畢。
舉一個(gè)例子,有一個(gè)大型的圖庫(kù)網(wǎng)站,為網(wǎng)頁(yè)中所有圖片添加某些行為,例如單擊圖片后讓它隱藏或顯示。如果使用window.onload方法來(lái)處理,那么用戶必須等劍每一幅圖片都加載完畢后,才可以進(jìn)行操作。如果使用jQuery中的$(document).ready()方法來(lái)進(jìn)行設(shè)置,只要DOM就緒就可以操作了,不需要等待所有圖片下載完畢。很顯然,把網(wǎng)頁(yè)解析為DOM樹(shù)的速度比把頁(yè)面中的所有關(guān)聯(lián)文件加載完畢的速度快很多。
另外,需要注意一點(diǎn),由于在$(document).ready()方法內(nèi)注冊(cè)的事件,只要DOM就緒就會(huì)被執(zhí)行,因此可能此時(shí)元素的關(guān)聯(lián)文件末下載完。例如與圖片有關(guān)的HTML下載完畢,并且已經(jīng)解析為DOM樹(shù)了,但很有可能圖片還未加載完畢,所以例如圖片的高度和寬度這樣的屬性此時(shí)不一定有效。要解決這個(gè)問(wèn)題,可以使用jQuery中另一個(gè)關(guān)于頁(yè)面加載的方法——load()方法。load()方法會(huì)在元素的onload事件中綁定一個(gè)處理函數(shù)。如果處理函數(shù)綁定給window對(duì)象,則會(huì)在所有內(nèi)容(包括窗口、框架、對(duì)象和圖像等)加載完畢后觸發(fā),如果處理函數(shù)綁定在元素上,則會(huì)在元素的內(nèi)容加載完畢后觸發(fā)。jQuery代碼如下:
$(window).load(function(){ // 編寫(xiě)代碼 })
等價(jià)于JavaScript中的以下代碼:
window.onload = function(){ // 編寫(xiě)代碼 })
現(xiàn)在詳細(xì)講解下windows.onload方法和$(document).ready()方法的區(qū)別:
假設(shè)網(wǎng)頁(yè)中有兩個(gè)函數(shù),JavaScript代碼如下:
function one(){ alert("one"); } function two(){ alert ("two"); }
當(dāng)網(wǎng)頁(yè)加載完畢后,通過(guò)如下JavaScript代碼來(lái)分別調(diào)用one函數(shù)和two函數(shù):
window.onload = one; window.onload = two;
然而當(dāng)運(yùn)行代碼后,發(fā)現(xiàn)只彈出字符串“two”對(duì)話框。字符串“one”對(duì)話框不能被彈出的原因是JavaScript的onload事件一次只能保存對(duì)一個(gè)函數(shù)的引用,它會(huì)自動(dòng)用后面的函數(shù)覆蓋前面的函數(shù),因此不能在現(xiàn)有的行為上添加新的行為。
為了達(dá)到兩個(gè)函數(shù)順序觸發(fā)的效果,只能再創(chuàng)建一個(gè)新的JavaScript方法來(lái)實(shí)現(xiàn),Javascript代碼如下:
window.onload = function(){ one(); two(); }
雖然這樣編寫(xiě)代碼能解決某些問(wèn)題,但還是不能滿足某些需求,例如有多個(gè)JavaScript文件,每個(gè)文件都需要用到window.onload方法,這種情況下用上面提到的方法編寫(xiě)代碼會(huì)非常麻煩。而jQuery的$(document).ready()方法能夠很好地處理這些情況,每次調(diào)用$(document).ready()方法都會(huì)在現(xiàn)有的行為上追加新的行為,這些行為函數(shù)會(huì)根據(jù)注冊(cè)的順序依次執(zhí)行。例如如下jQuery代碼:
function one(){ alert("one"); } function two(){ alert("two"); } $(document).ready(function(){ one(); }) $(document).ready(function(){ two(); });
運(yùn)行代碼后,會(huì)先彈出字符串“one”對(duì)話框,然后彈出字符串“two”對(duì)話框。
下面看看ready()與onload()的耗時(shí):
jQuery的ready()耗時(shí) : 498 ms
簡(jiǎn)寫(xiě)方式
上面我們r(jià)eady函數(shù)寫(xiě)成這樣:
$(document).ready(function(){ // 編寫(xiě)代碼 })
也可以簡(jiǎn)寫(xiě)成這樣:
$(function(){ // 編寫(xiě)代碼 })
另外,$(document)也可以簡(jiǎn)寫(xiě)為$()。當(dāng)$()不帶參數(shù)時(shí),默認(rèn)參數(shù)就是“document”,因此可以簡(jiǎn)寫(xiě)為:
$().ready(function(){ // 編寫(xiě)代碼 })
3種方式都是一樣的功能,讀者可以根據(jù)自己的喜好,選擇其中的一種。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- JQuery實(shí)現(xiàn)當(dāng)鼠標(biāo)停留在某區(qū)域3秒后自動(dòng)執(zhí)行
- JQuery給元素綁定click事件多次執(zhí)行的解決方法
- jquery阻止后續(xù)事件只執(zhí)行第一個(gè)事件
- jQuery綁定事件不執(zhí)行但alert后可以正常執(zhí)行
- jquery $.ajax各個(gè)事件執(zhí)行順序
- jquery 事件執(zhí)行檢測(cè)代碼
- JQuery 給元素綁定click事件多次執(zhí)行的解決方法
- 淺析jquery如何判斷滾動(dòng)條滾到頁(yè)面底部并執(zhí)行事件
- Jquery on方法綁定事件后執(zhí)行多次的解決方法
- 淺談js在html中的加載執(zhí)行順序,多個(gè)jquery ready執(zhí)行順序
- 使用jQuery加載html頁(yè)面到指定的div實(shí)現(xiàn)方法
- Jquery在指定DIV加載HTML示例代碼
- jQuery實(shí)現(xiàn)在HTML文檔加載完畢后自動(dòng)執(zhí)行某個(gè)事件的方法
相關(guān)文章
js判斷復(fù)選框是否選中的方法示例【基于jQuery】
這篇文章主要介紹了js判斷復(fù)選框是否選中的方法,結(jié)合實(shí)例形式分析了基于jQuery實(shí)現(xiàn)的復(fù)選框選中判斷相關(guān)操作技巧,需要的朋友可以參考下2019-10-10jquery 動(dòng)態(tài)創(chuàng)建元素的方式介紹及應(yīng)用
動(dòng)態(tài)創(chuàng)建元素可以通過(guò)兩種方式1、Dom HTml2、JQuery函數(shù)創(chuàng)建3、頁(yè)面加載的時(shí)候最好在頁(yè)面加載完后執(zhí)行創(chuàng)建,感興趣的朋友可以了解下2013-04-04jQuery中closest()函數(shù)用法實(shí)例
這篇文章主要介紹了jQuery中closest()函數(shù)用法,實(shí)例分析了closest()函數(shù)的功能、定義及匹配元素的各種技巧,需要的朋友可以參考下2015-01-01EasyUI折疊表格層次顯示detailview詳解及實(shí)例
這篇文章主要介紹了EasyUI折疊表格層次顯示detailview詳解及實(shí)例,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2016-12-12Jquery利用mouseenter和mouseleave實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)彈出層且可以點(diǎn)擊
這篇文章主要介紹了Jquery利用mouseenter和mouseleave實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)彈出層且可以點(diǎn)擊。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02jQuery+Ajax實(shí)現(xiàn)限制查詢間隔的方法
這篇文章主要介紹了jQuery+Ajax實(shí)現(xiàn)限制查詢間隔的方法,涉及jQuery的ajax方法參數(shù)設(shè)置及asp.net后臺(tái)交互的相關(guān)技巧,需要的朋友可以參考下2016-06-06