1.執(zhí)行時(shí)間
window.onload必須等到頁(yè)面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行刊苍。
$(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行靖苇,不必等到加載完畢。
2.編寫(xiě)個(gè)數(shù)不同
window.onload不能同時(shí)編寫(xiě)多個(gè)班缰,如果有多個(gè)window.onload方法贤壁,只會(huì)執(zhí)行一個(gè)
$(document).ready()可以同時(shí)編寫(xiě)多個(gè),并且都可以得到執(zhí)行
3.簡(jiǎn)化寫(xiě)法
window.onload沒(méi)有簡(jiǎn)化寫(xiě)法
$(document).ready(function(){})可以簡(jiǎn)寫(xiě)成$(function(){});
開(kāi)發(fā)中埠忘,一般用到j(luò)avascript脾拆,都是采用jquery的模式,也就是大多數(shù)時(shí)候莹妒,第一行寫(xiě)的是:
$(document).ready(function(){
...
});
這個(gè)時(shí)候名船,不一定要等所有的js和圖片加載完畢,就可以執(zhí)行一些方法旨怠,不過(guò)有些時(shí)候渠驼,必須要等所有的元素都加載完畢,才可以執(zhí)行一些方法的時(shí)候鉴腻,比如說(shuō)迷扇,部分圖片或者什么其他方面還沒(méi)有加載好百揭,這個(gè)時(shí)候,點(diǎn)擊某些按鈕蜓席,會(huì)導(dǎo)致出現(xiàn)意外的情況器一,這個(gè)時(shí)候缀匕,就需要用到:
$(window).load(function() {
$("#btn-upload").click(function(){ //比如說(shuō):
uploadPhotos();
});
});
用$(window).load(function(){...})而不用body.onload()的幾個(gè)理由
首先它們都是在頁(yè)面所有元素(包括html標(biāo)簽以及引用到得所有圖片,Flash等媒體)加載完畢后執(zhí)行的,這是它們的共同點(diǎn).
不用body.Onload()理由1:
如果我們想同時(shí)加載多個(gè)函數(shù),我們必須這樣寫(xiě)
<body onload="fn1(),fn2()"></body>
看起來(lái)極其丑陋,如果用$(window).load()
我們可以這樣加載多個(gè)函數(shù):
$(window).load(function() {
alert("hello,我是jQuery!");
});
$(window).load(function() {
alert("hello,我也是jQuery");
});
不用body.Onload()理由2:
用body.Onload()不能夠做到j(luò)s和html完全分離,這是一個(gè)很?chē)?yán)重的問(wèn)題.
另外用$(window).load(function(){...}
)和body.onload()
都存在同樣一個(gè)問(wèn)題,因?yàn)殚_(kāi)始也說(shuō)到了,它們都需要等到頁(yè)面的所有內(nèi)容加載完畢才執(zhí)行,但是如果當(dāng)網(wǎng)速比較慢的時(shí)候,加載一個(gè)頁(yè)面往往需要較長(zhǎng)的時(shí)間(幾秒到十幾秒不等,甚至更長(zhǎng)...),所以我們經(jīng)常會(huì)遇到頁(yè)面還沒(méi)有完全加載完畢而用戶(hù)已經(jīng)在操作頁(yè)面了這種情況,這樣頁(yè)面表現(xiàn)出來(lái)的效果就跟我們預(yù)期的效果不一樣了,所以在這里我推薦使用$(document).ready(function(){})
,或簡(jiǎn)寫(xiě)為$(function(){})
笼痛,因?yàn)樗麜?huì)在頁(yè)面的dom元素加載完畢后就執(zhí)行,而無(wú)需等到圖片或其他媒體下載完畢.但是有時(shí)候確實(shí)我們有需要等到頁(yè)面的所有東西都加載完后再執(zhí)行我們想執(zhí)行的函數(shù),所以是該使用$(window).load(function(){...})
還是該使用$(function(){})
往往需要結(jié)合具體需要而作不同的選擇.
最后附上一段在所有DOM元素加載之前執(zhí)行的jQuery代碼
<script type="text/javascript">
(function() {
alert("DOM還沒(méi)加載哦!");
})(jQuery)
</script>
jquery的$(window).load和原生js的window.onload的使用方法:
$(window).load(function() {
//jquery代碼
});
window.onload=function(){
var obj=document.getElementById("TableA").getElementsByTagName("td");
if(!obj){return false}
for(var i=0;i<obj.length;i++){
obj[i].onfocus=function(){this.style.background="#ff0000"}
obj[i].onblur=function(){this.style.background="";}
}
}