关于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弹幕效果
May 06 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
JQuery animate动画应用示例
May 14 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jQuery实现视频展示效果
May 30 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开启安全模式后禁用的函数集合
2011/06/26 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
判断访客终端类型集锦
2015/06/05 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
babel基本使用详解
2017/02/17 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
Python实现比较两个列表(list)范围
2015/06/12 Python
python list元素为tuple时的排序方法
2018/04/18 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
往来会计岗位职责
2013/12/19 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
商业用房租赁协议书
2014/10/13 职场文书
特岗教师个人总结
2015/02/10 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
图文详解Nginx版本平滑升级方案
2021/09/15 Servers
openstack云计算keystone组件工作介绍
2022/04/20 Servers