关于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 Validate 校验多个相同name的方法
May 18 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
JQuery复选框全选效果如何实现
May 08 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
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
Javascript base64编码实现代码
2011/12/02 Javascript
一个简单的js树形菜单
2011/12/09 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
javascript控制台详解
2015/06/25 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
Python中多线程及程序锁浅析
2015/01/21 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
python图形用户接口实例详解
2019/12/16 Python
Django使用rest_framework写出API
2020/05/21 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
为什么要使用servlet
2016/01/17 面试题
初一新生军训方案
2014/05/22 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
工程技术员岗位职责
2015/04/11 职场文书
教师节随笔
2015/08/15 职场文书
给校长的建议书范文
2015/09/14 职场文书
新手入门Mysql--概念
2021/06/18 MySQL