DOM Ready是指當(dāng)瀏覽器已經(jīng)加載完文檔對(duì)象模型(Document Object Model,簡(jiǎn)稱DOM)時(shí),就可以執(zhí)行JavaScript的代碼。因?yàn)樵陧?yè)面加載的過(guò)程中,網(wǎng)頁(yè)的每一個(gè)元素都需要加載,這一過(guò)程可能會(huì)很慢,而DOM Ready可以避免在加載完整個(gè)頁(yè)面后再執(zhí)行JavaScript代碼,從而提高了網(wǎng)站的交互效率。
$(document).ready(function() { //在DOM Ready時(shí)執(zhí)行的代碼 //例如綁定事件、添加樣式等 });
jQuery中的DOM Ready方法就是通過(guò)$(document).ready()來(lái)實(shí)現(xiàn)的。當(dāng)頁(yè)面的DOM結(jié)構(gòu)被完全加載時(shí),就會(huì)觸發(fā)這個(gè)方法中的函數(shù)。所以我們可以將所有需要在DOM Ready時(shí)要執(zhí)行的代碼放在$(document).ready()的回調(diào)函數(shù)中。
$(document).ready(function() { //綁定按鈕點(diǎn)擊事件 $("button").click(function(){ //改變文本顏色 $("p").css("color", "red"); }); });
需要注意的是,$(document).ready()方法只在頁(yè)面DOM結(jié)構(gòu)加載完畢后才會(huì)執(zhí)行回調(diào)函數(shù),但并不代表頁(yè)面中的圖片、視頻、音頻等資源已經(jīng)全部加載完畢。如果需要確保頁(yè)面中的所有資源加載完畢后再執(zhí)行相關(guān)代碼,可以使用jQuery的load()方法。
$(window).load(function() { //在頁(yè)面加載完畢后執(zhí)行的代碼 //例如設(shè)置動(dòng)畫(huà)效果、初始化特效等 });
總之,在編寫(xiě)JavaScript代碼時(shí),我們應(yīng)當(dāng)充分利用DOM Ready方法來(lái)提高網(wǎng)站的交互效率和用戶體驗(yàn)。