当前位置：首页 > 资讯 > 技术文档

关于JS与jQuery中的文档加载问题

时间：2020-06-24 22:59 编辑：来源：阅读：
扫一扫，手机访问

摘要：关于JS与jQuery中的文档加载问题

jquery中的[code]$(document).ready()[/code]类似于javascript中的[code]window.onload()[/code]，但是其中还是有很大区别的 1.jquery中的可以简化为[code]$().ready()，$(function), [/code] 而js却不行必须全部写完。 2.同时js的[code]window.onload()[/code]只能有一个，而jquery的$[code](document).ready()[/code]却可以有多个。 3.最重要的一点是[code]window.onload[/code]必须等到页面内包括图片的所有元素加载完毕后才能执行。　　　　　　　[code]$(document).ready()[/code]是DOM结构绘制完毕后就执行，不必等到加载完毕。下面说说在项目中遇到的问题先上代码，这个demo中我不用引入jquery包就可以使用类似jquery的$(id)(我个人不建议使用)，在这个demo中页面会弹出"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>

再上代码，此处的问题会报错"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(){　　　　　　　　　　　　　　　　　　　　　　//这是错误的代码案列
$("#aaa").click(function(){
  $("#aaa").hide();
});
});
</script>
</head> 
<body> 
<a id="aaa" value="1" >aaaaaa</a>
</body> 
</html>

问题在与我们对"$"定义了一个函数，同时又想使用jquery提供的"$",所以报错"Cannot read property 'ready' of null",问题在于我们写的"$"影响了$(document)这块，所以还是老老实实导包，别嫌麻烦，不然出现bug,要是在不熟悉的其中语法(代码就一行，项目大的话还不容易发现。o(╥﹏╥)o)，改bug就要更长的时间，也是醉了。 [b]总结[/b] 以上所述是小编给大家介绍的JS与jQuery中的文档加载问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

上一篇：js实现鼠标滑过文字链接色彩变化的效果
下一篇：Mozilla 表达式 __noSuchMethod__

资讯排行榜
更多>>