关于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解析获取JSON数据
Apr 08 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 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
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
杏林同学录(七)
2006/10/09 PHP
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
Javascript学习笔记2 函数
2010/01/11 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
人力资源管理毕业生自荐信
2014/06/26 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
幼儿园辞职信
2015/05/13 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python