关于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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 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读取IMAP邮件
2006/10/09 PHP
浅谈PHP语法(1)
2006/10/09 PHP
开发大型 PHP 项目的方法
2007/01/02 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
js中日期的加减法
2015/05/06 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
jQuery设计思想
2017/03/07 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
python3生成随机数实例
2014/10/20 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
python字符串的index和find的区别详解
2020/06/20 Python
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
枚举与#define宏的区别
2014/04/30 面试题
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
人力资源管理毕业生自荐信
2013/11/21 职场文书
广告业务员岗位职责
2014/02/06 职场文书
心理健康课教学反思
2014/02/13 职场文书
2014年档案室工作总结
2014/12/01 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
女儿满月酒致辞
2015/07/29 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis