关于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实现百度登录框的动态切换效果
Apr 21 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
html中两种获取标签内的值的方法
Jun 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
长波有什么东西
2021/03/01 无线电
PHPMailer安装方法及简单实例
2008/11/25 PHP
php HandlerSocket的使用
2011/05/02 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
jQuery each()方法的使用方法
2010/03/18 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
详解python中的文件与目录操作
2017/07/11 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
python中while和for的区别总结
2019/06/28 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
HTML5进度条特效
2014/12/18 HTML / CSS
大一自我鉴定范文
2013/10/04 职场文书
个人实用的自我评价范文
2013/11/23 职场文书
党员培训思想汇报
2014/01/07 职场文书
关于旷工的检讨书
2014/02/02 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
党员年度个人总结
2015/02/14 职场文书
小平小道观后感
2015/06/09 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
MySQL中的隐藏列的具体查看
2021/09/04 MySQL