关于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之动画ajax事件(实例讲解)
Jul 18 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jQuery实现动态操作table行
Nov 23 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简单系统查询模块代码打包下载
2008/06/07 PHP
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
js 加载并解析XML字符串的代码
2009/12/13 Javascript
JQuery的一些小应用收集
2010/03/27 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
Python算法应用实战之栈详解
2017/02/04 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
深入理解Python中的super()方法
2017/11/20 Python
python实现拓扑排序的基本教程
2018/03/11 Python
python os用法总结
2018/06/08 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
十八大闭幕感言
2014/01/22 职场文书
交通安全寄语大全
2014/04/08 职场文书
2014年党支部承诺书
2014/05/30 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL