DOM 是載入到瀏覽器中的文檔模型,以節(jié)點樹的形式來表現(xiàn)文檔,每個節(jié)點代表文檔的構(gòu)成部分
讓客戶滿意是我們工作的目標,不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴,公司提供的服務(wù)項目有:域名與空間、虛擬主機、營銷軟件、網(wǎng)站建設(shè)、耀州網(wǎng)站維護、網(wǎng)站推廣。
Document 接口表示任何在瀏覽器中載入的網(wǎng)頁,并作為網(wǎng)頁內(nèi)容的入口,也就是DOM 樹。DOM 樹包含了像 body 、table 這樣的元素,以及大量其他元素。它向網(wǎng)頁文檔本身提供了全局操作功能,能解決如何獲取頁面的 URL ,如何在文檔中創(chuàng)建一個新的元素這樣的問題。
這是Document的概念,依此判斷,$(document).on()是在DOM載入后執(zhí)行的
并非是頁面加載完后才執(zhí)行
這也是VUE、React等能夠使用虛擬DOm來渲染客戶端最后頁面呈現(xiàn)的不同樣式的原理之一;
數(shù)據(jù)加載完成執(zhí)行:
$(window).load(function(){
//要執(zhí)行的方法體
});
進入頁就執(zhí)行,不論等數(shù)據(jù)是否加載完成
$(document).ready(function(){
})
這個還可以簡寫成
$(function(){
});
更多內(nèi)容,可以參考 ;
這里還有一個比較全面的分析:
iframe的內(nèi)容加載完成之后觸發(fā)方法如加載特定代碼:
判斷iframe是否加載完畢:
//創(chuàng)建ifame對象
var iframe = document.createElement("iframe");
//設(shè)置ifame對象src屬性
iframe.src = "xxx";
if (!/*@cc_on!@*/0) { //如果不是ie
iframe.onload = function(){ 加載
alert("Local iframe is now loaded.");
};
} else {
iframe.onreadystatechange = function(){
if (iframe.readyState == "complete"){ 完成狀態(tài)判斷
alert("Local iframe is now loaded.");
}
};
}
document.body.appendChild(iframe);
用以上方法判斷后就可以執(zhí)行相應(yīng)的代碼了
jQuery是一個快速、簡潔的JavaScript框架,是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫( 或JavaScript框架)。jQuery設(shè)計的宗旨是“write Less,Do More”,即倡導寫更少的代碼,做更多的事情。它封裝JavaScript常用的功能代碼,提供一種簡便的JavaScript設(shè)計模式,優(yōu)化HTML文檔操作、事件處理、動畫設(shè)計和Ajax交互。 jQuery的模塊可以分為:入口模塊、底層支持模塊和功能模塊。其核心特性可以總結(jié)為:具有獨特的鏈式語法和短小清晰的多功能接口;具有高效靈活的css選擇器,并且可對CSS選擇器進行擴展;擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
jquery加載頁面的方法,即:頁面加載完成就執(zhí)行,有如下幾種:
1、jQuery的$(document).ready
$(document).ready(function(){
$("#a").click(function(){
//adding your code here
});
});
就僅僅只需要加載所有的DOM結(jié)構(gòu),在瀏覽器把所有的HTML放入DOM tree之前就執(zhí)行js效果。包括在加載外部圖片和資源之前。
2、ready事件的簡寫方法
$(function(){
$("#a").click(function(){
//adding your code here
});
});
此方法就僅僅只需要加載所有的DOM結(jié)構(gòu),在瀏覽器把所有的HTML放入DOM tree之前就執(zhí)行js效果。包括在加載外部圖片和資源之前,是ready的簡寫方式
3、window的onload事件
window.onload = function(){
$("#a").click(function(){
//adding your code here
});
}
這段代碼會在整個頁面的document全部加載完成以后執(zhí)行。這種方式不僅要求頁面的DOM tree全部加載完成,而且要求所有的外部圖片和資源全部加載完成。如果外部資源,例如圖片需要很長時間來加載,那么這個js效果就會讓用戶感覺失效了。
親,js中的window.onload是等頁面加載完所有的元素,包括圖片等等資源要全部加載成功后才執(zhí)行,而jq的是加載完dom元素就可以執(zhí)行了,比如一個,js一定要加載好這張圖片,里面的js代碼才會執(zhí)行,而jq可以只加載這個標簽后里面的js代碼就可以執(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)下載完畢。