關(guān)于JS與jQuery中的文檔加載問題

更新時(shí)間：2017年08月22日 14:03:37 作者：whiteme

本文通過實(shí)例代碼給大家講解了js和jquery中的文檔加載問題，感興趣的的朋友一起看看吧

jquery中的$(document).ready()類似于javascript中的window.onload()，但是其中還是有很大區(qū)別的

1.jquery中的可以簡化為$().ready()，$(function), 而js卻不行必須全部寫完。

2.同時(shí)js的window.onload()只能有一個(gè)，而jquery的$(document).ready()卻可以有多個(gè)。

3.最重要的一點(diǎn)是window.onload必須等到頁面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。

　　　　　　　$(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到加載完畢。

下面說說在項(xiàng)目中遇到的問題

先上代碼，這個(gè)demo中我不用引入jquery包就可以使用類似jquery的$(id)(我個(gè)人不建議使用)，在這個(gè)demo中頁面會(huì)彈出"1"，在此處完全沒有問題。

<!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>

再上代碼，此處的問題會(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>

問題在與我們對"$"定義了一個(gè)函數(shù)，同時(shí)又想使用jquery提供的"$",所以報(bào)錯(cuò)"Cannot read property 'ready' of null",問題在于我們寫的"$"影響了$(document)這塊，所以還是老老實(shí)實(shí)導(dǎo)包，別嫌麻煩，不然出現(xiàn)bug,要是在不熟悉的其中語法(代碼就一行，項(xiàng)目大的話還不容易發(fā)現(xiàn)。o(╥﹏╥)o)，改bug就要更長的時(shí)間，也是醉了。

總結(jié)

以上所述是小編給大家介紹的JS與jQuery中的文檔加載問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: