Jquery中$(document).ready()是什么意思?和window.onload的區(qū)別? 還有其他什么寫法或者替代方法?
$(document).ready()的意思:在DOM加載完之后執(zhí)行一個(gè)函數(shù)(這里面的DOM加載完不代表全部文件加載完,例如圖片文件,雖然圖的src的地址加載好了,但是圖本身還沒到);
- 有時(shí)候
JavaScript寫在了最前面,要操作一個(gè)DOM,可是下面的DOM還未生成完畢,就會報(bào)錯(cuò),因?yàn)檎也坏?加$(document).ready()就是卡在 DOM加載完畢 ,剩余資源還未加載完成這段時(shí)間內(nèi),進(jìn)行所有其它事件綁定及運(yùn)行其它jQuery代碼;與
window.onload的區(qū)別:
- 1.執(zhí)行時(shí)間:
window.onload是在DOM加載完成 + DOM相關(guān)的文件下載完成 之后再執(zhí)行一個(gè)函數(shù)
$(document).ready()是在DOM加載完之后執(zhí)行一個(gè)函數(shù)
$(document).ready()要比window.onload先執(zhí)行;有時(shí)候頁面還沒有完全加載完畢而用戶已經(jīng)在操作頁面,在技術(shù)上很多情況下,只要DOM已完全加載好了,JS就可以運(yùn)行去操作DOM了,沒必要等到全部加載完成,所以用$(document).ready()來提前,但是當(dāng)使用的JS依賴 CSS 屬性值時(shí),或者需要在元素被加載之后才能使用時(shí)(例如,取得圖片的大小需要在圖片被加載完后才能知道),就需要將這樣的JS放到load事件中,以免因?yàn)樨潏D快而帶來麻煩。- 2.能夠添加的數(shù)量:
window.onload不能同時(shí)編寫多個(gè),因?yàn)槲也榭碬3C的時(shí)候,window.onload是一種原生的DOM的事件,決定了在window上只能添加一個(gè),后續(xù)的會覆蓋掉前面的。
$(document).ready()可以同時(shí)編寫多個(gè),我查看jQuery中文檔,他是這么介紹的.ready()方法只能被匹配當(dāng)前文檔的jQuery對象調(diào)用,也就是說他是jQuery的方法,本質(zhì)是一個(gè)函數(shù),就可以執(zhí)行多次。- 3.能否簡寫:
$(document).ready()可以簡寫
window.onload不能簡寫
下面是$(document).ready()的簡寫
$(document).ready(handler)
$(handler)
$().ready(handler) //這種被不推薦