js中window.onload 与 jquery中$(document.ready()) 测试
生活随笔
收集整理的這篇文章主要介紹了
js中window.onload 与 jquery中$(document.ready()) 测试
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
js中window.onload 與 jquery中$(document.ready())區(qū)別，驗證代碼如下(調(diào)換js代碼和Jquer代碼書寫順序測試，運行結(jié)果一樣，因此與代碼書寫位置沒關(guān)系)：
<html> <head> <script type='text/javascript' src='jquery-1.11.1.min.js'></script> <script type='text/javascript'>$(document).ready(function(){var myDate = new Date();var hours=myDate.getHours(); //獲取當(dāng)前小時數(shù)(0-23)var minutes=myDate.getMinutes(); //獲取當(dāng)前分鐘數(shù)(0-59)var seconds=myDate.getSeconds(); //獲取當(dāng)前秒數(shù)(0-59)var milliseconds=myDate.getMilliseconds(); //獲取當(dāng)前毫秒數(shù)(0-999)console.log("【$(document).ready()】當(dāng)前時間："+hours+"時"+minutes+"分"+seconds+"秒"+milliseconds+"毫秒");console.log("【$(document).ready()】先加載DOM結(jié)構(gòu),再執(zhí)行當(dāng)前JS,后加載大型圖片及內(nèi)容");});//***************window.οnlοad=function(){ var myDate = new Date();var hours=myDate.getHours(); //獲取當(dāng)前小時數(shù)(0-23)var minutes=myDate.getMinutes(); //獲取當(dāng)前分鐘數(shù)(0-59)var seconds=myDate.getSeconds(); //獲取當(dāng)前秒數(shù)(0-59)var milliseconds=myDate.getMilliseconds(); //獲取當(dāng)前毫秒數(shù)(0-999)console.log("【window.onload】當(dāng)前時間："+hours+"時"+minutes+"分"+seconds+"秒"+milliseconds+"毫秒");console.log("【window.onload】先加載DOM結(jié)構(gòu),后加載大型圖片及內(nèi)容,再執(zhí)行當(dāng)前JS");}//*************** </script> </head> <body><pre>說明：$(document).ready()是在DOM結(jié)構(gòu)載入完后執(zhí)行的，而window.onload是得在所有文件都加載完后執(zhí)行的；注意區(qū)別，一個是DOM加載完，一個是所有文件加載完。所謂DOM加載完，就是指DOM模型加載完，也就是指代碼加載完。兩者最大的區(qū)別，就是DOM加載完之后，不必再去等相應(yīng)的圖片加載完就可以執(zhí)行JS代碼了。</pre><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/></body> </html>
<html> <head> <script type='text/javascript' src='jquery-1.11.1.min.js'></script> <script type='text/javascript'>$(document).ready(function(){var myDate = new Date();var hours=myDate.getHours(); //獲取當(dāng)前小時數(shù)(0-23)var minutes=myDate.getMinutes(); //獲取當(dāng)前分鐘數(shù)(0-59)var seconds=myDate.getSeconds(); //獲取當(dāng)前秒數(shù)(0-59)var milliseconds=myDate.getMilliseconds(); //獲取當(dāng)前毫秒數(shù)(0-999)console.log("【$(document).ready()】當(dāng)前時間："+hours+"時"+minutes+"分"+seconds+"秒"+milliseconds+"毫秒");console.log("【$(document).ready()】先加載DOM結(jié)構(gòu),再執(zhí)行當(dāng)前JS,后加載大型圖片及內(nèi)容");});//***************window.οnlοad=function(){ var myDate = new Date();var hours=myDate.getHours(); //獲取當(dāng)前小時數(shù)(0-23)var minutes=myDate.getMinutes(); //獲取當(dāng)前分鐘數(shù)(0-59)var seconds=myDate.getSeconds(); //獲取當(dāng)前秒數(shù)(0-59)var milliseconds=myDate.getMilliseconds(); //獲取當(dāng)前毫秒數(shù)(0-999)console.log("【window.onload】當(dāng)前時間："+hours+"時"+minutes+"分"+seconds+"秒"+milliseconds+"毫秒");console.log("【window.onload】先加載DOM結(jié)構(gòu),后加載大型圖片及內(nèi)容,再執(zhí)行當(dāng)前JS");}//*************** </script> </head> <body><pre>說明：$(document).ready()是在DOM結(jié)構(gòu)載入完后執(zhí)行的，而window.onload是得在所有文件都加載完后執(zhí)行的；注意區(qū)別，一個是DOM加載完，一個是所有文件加載完。所謂DOM加載完，就是指DOM模型加載完，也就是指代碼加載完。兩者最大的區(qū)別，就是DOM加載完之后，不必再去等相應(yīng)的圖片加載完就可以執(zhí)行JS代碼了。</pre><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/><img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/></body> </html>
運行截圖：
總結(jié)：
$(document).ready()是在DOM結(jié)構(gòu)載入完后執(zhí)行的，而window.onload是得在所有文件都加載完后執(zhí)行的；
所謂DOM加載完，就是指DOM模型加載完，也就是指代碼加載完。兩者最大的區(qū)別，就是DOM加載完之后，不必再去等相應(yīng)的圖片加載完就可以執(zhí)行JS代碼了。
總結(jié)
以上是生活随笔為你收集整理的js中window.onload 与 jquery中$(document.ready()) 测试的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 宝马一辆多少钱啊？
- 下一篇： 楚乔传星儿后背彼岸花为什么会消失 与风云