关于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请求、后台数据、附完整demo)
Apr 03 jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
JQuery实现图片轮播效果
May 08 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jquery插件懒加载的示例
Oct 24 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多个版本的分析解释
2011/07/21 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
PHP强制转化的形式整理
2020/05/22 PHP
csdn 批量接受好友邀请
2009/02/19 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
python中的多重继承实例讲解
2014/09/28 Python
python实现扫描日志关键字的示例
2018/04/28 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
pycharm显示远程图片的实现
2019/11/04 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
运动会领导邀请函
2014/02/05 职场文书
意向书范文
2014/03/31 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫