jquery中的$(document).ready()類(lèi)似于javascript中的window.onload(),但是其中還是有很大區(qū)別的
1.jquery中的可以簡(jiǎn)化為$().ready(),$(function), 而js卻不行必須全部寫(xiě)完。
2.同時(shí)js的window.onload()只能有一個(gè),而jquery的$(document).ready()卻可以有多個(gè)。
3.最重要的一點(diǎn)是window.onload必須等到頁(yè)面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。
$(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行,不必等到加載完畢。
下面說(shuō)說(shuō)在項(xiàng)目中遇到的問(wèn)題
先上代碼,這個(gè)demo中我不用引入jquery包就可以使用類(lèi)似jquery的$(id)(我個(gè)人不建議使用),在這個(gè)demo中頁(yè)面會(huì)彈出"1",在此處完全沒(méi)有問(wèn)題。
<!DOCTYPE html><head> <title>JS</title> <script>function $(id){return document.getElementById(id)};window.onload = function(){ alert($("aaa").value);};</script></head> <body> <input id="aaa" value="1" /></body> </html>再上代碼,此處的問(wèn)題會(huì)報(bào)錯(cuò)"Cannot read property 'ready' of null",可以自己先想想為什么。。。
<!DOCTYPE html><head> <title>JS</title> <script src="js/jquery-2.1.1.min.js"></script><script>function $(id){return document.getElementById(id)};$(document).ready(function(){ //這是錯(cuò)誤的代碼案列$("#aaa").click(function(){ $("#aaa").hide();});});</script></head> <body> <a id="aaa" value="1" >aaaaaa</a></body> </html>問(wèn)題在與我們對(duì)"$"定義了一個(gè)函數(shù),同時(shí)又想使用jquery提供的"$",所以報(bào)錯(cuò)"Cannot read property 'ready' of null",問(wèn)題在于我們寫(xiě)的"$"影響了$(document)這塊,所以還是老老實(shí)實(shí)導(dǎo)包,別嫌麻煩,不然出現(xiàn)bug,要是在不熟悉的其中語(yǔ)法(代碼就一行,項(xiàng)目大的話還不容易發(fā)現(xiàn)。o(╥﹏╥)o),改bug就要更長(zhǎng)的時(shí)間,也是醉了。
總結(jié)
以上所述是小編給大家介紹的JS與jQuery中的文檔加載問(wèn)題,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)錯(cuò)新站長(zhǎng)站網(wǎng)站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選