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