关于JS与jQuery中的文档加载问题
更新时间：2017年08月22日 14:03:37 作者：whiteme
本文通过实例代码给大家讲解了js和jquery中的文档加载问题，感兴趣的的朋友一起看看吧
jquery中的$(document).ready()类似于javascript中的window.onload()，但是其中还是有很大区别的
1.jquery中的可以简化为$().ready()，$(function), 而js却不行必须全部写完。
2.同时js的window.onload()只能有一个，而jquery的$(document).ready()却可以有多个。
3.最重要的一点是window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是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就要更长的时间，也是醉了。
总结
以上所述是小编给大家介绍的JS与jQuery中的文档加载问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
Ionic项目中如何使用Native Camera？这篇文章主要介绍了Ionic项目中Native Camera的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
根据身份证号码编码规则对其进行有效性验证，具体实现如下，大家可以参考下2014-03-03
这篇文章主要介绍了微信小程序在ios下Echarts图表不能滑动的解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,下面我们来一起学习下吧2019-07-07
JS 事件冒泡 示例代码，大家可以参考下。2009-07-07
内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束，由于浏览器垃圾回收方法有bug，会产生内存泄露，下面与大家详细探讨下内存泄露的几种情况2013-05-05
这篇文章主要为大家详细介绍了解决js图片加载时出现404问题的方法，具有一定的参考价值，这方面有困惑的朋友可以参考一下2015-11-11
这篇文章主要介绍了JavaScript定义函数的三种实现方法的相关资料,希望通过本文大家能够掌握三种定义函数的方法，需要的朋友可以参考下2017-09-09
这篇文章主要介绍了js实现点击复制当前文本到剪贴板功能，兼容所有浏览器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要介绍了使用plupload自定义参数实现多文件上传的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
webpack 是一个模块打包器,这篇文章主要介绍了webpack5 常用插件使用问题小结,每次打包完都需要手动删除掉dist文件目录,使用CleanWebpackPlugin就可自动清除dist目录,感兴趣的朋友跟随小编一起看看吧2024-02-02
最新评论