关于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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 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处理json时中文问题的解决方法
2011/04/12 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
python之列表推导式的用法
2019/11/29 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
洗发水广告词
2014/03/13 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
外联部演讲稿
2014/05/24 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
给下属加薪申请报告
2015/05/15 职场文书
李强感恩观后感
2015/06/17 职场文书
遗嘱格式范本
2015/08/07 职场文书
外出听课学习心得体会
2016/01/15 职场文书
mysql函数全面总结
2021/11/11 MySQL