关于JS与jQuery中的文档加载问题
程序员文章站
2022-09-08 21:00:57
jquery中的$(document).ready()类似于javascript中的window.onload(),但是其中还是有很大区别的
1.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中的文档加载问题,希望对大家有所帮助
推荐阅读
-
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
-
JS中‘hello’与new String(‘hello’)引出的问题详解
-
js中关于typeof与instanceof的区别讲解
-
JQuery中关于jquery.js与jquery.min.js的比较探讨
-
jQuery中ajax的使用与缓存问题的解决方法
-
解决用jquery load加载页面到div时,不执行页面js的问题
-
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
-
关于Node.js中的路径问题
-
模拟jQuery中的ready方法及实现按需加载css,js实例代码
-
easy-ui关于用jquery渲染的加载问题讲解