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


Posted in jQuery onAugust 22, 2017

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 相关文章推荐
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 #jQuery
jQuery实现广告条滚动效果
Aug 22 #jQuery
基于jQuery的表单填充实例
Aug 22 #jQuery
使用jQuery实现简单的tab框实例
Aug 22 #jQuery
JQuery判断正整数整理小结
Aug 21 #jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 #jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 #jQuery
You might like
PHP远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
Python实现的选择排序算法示例
2017/11/29 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
什么是方法的重载
2013/06/24 面试题
建筑设计所实习生自我鉴定
2013/09/25 职场文书
承办会议欢迎词
2014/01/17 职场文书
打架检讨书100字
2014/01/19 职场文书
个人欠款担保书
2014/05/20 职场文书
事业单位考核材料
2014/05/21 职场文书
新书发布会策划方案
2014/06/09 职场文书
个人收入证明范本
2015/06/12 职场文书
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers