关于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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jquery仿微信聊天界面
May 06 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jQuery实现日历效果
Sep 11 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
jquery实现图片放大镜效果
Dec 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中字符串和正则表达式详解
2014/10/23 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
toString()一个会自动调用的方法
2010/02/08 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
php跨域调用json的例子
2013/11/13 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
vue按需加载实例详解
2019/09/06 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
Python实现二维有序数组查找的方法
2016/04/27 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
python装饰器实例大详解
2017/10/25 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
关于反爬虫的一些简单总结
2017/12/13 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
Python实现多进程的四种方式
2019/02/22 Python
eclipse创建python项目步骤详解
2019/05/10 Python
Python hashlib模块加密过程解析
2019/11/05 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
python palywright库基本使用
2021/01/21 Python
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
毕业生求职自荐信怎么写
2014/01/08 职场文书
学习雷锋活动总结
2014/04/29 职场文书
爱护公共设施的标语
2014/06/24 职场文书
应聘教师求职信
2014/07/19 职场文书
2015年采购员工作总结
2015/04/27 职场文书
太行山上观后感
2015/06/05 职场文书
我去timi了,一起去timi是什么意思?
2022/04/13 杂记