关于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平滑滚动到顶部插件使用详解
May 08 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
jquery实现广告上下滚动效果
Mar 04 jQuery
jquery插件实现代码雨特效
Apr 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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
php操作mongoDB实例分析
2014/12/29 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
Python isinstance判断对象类型
2008/09/06 Python
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
工程招投标邀请书
2014/01/30 职场文书
总经理的岗位职责
2014/02/23 职场文书
元旦寄语大全
2014/04/10 职场文书
股权转让协议书
2014/04/12 职场文书
企业文化标语大全
2014/06/10 职场文书
关爱残疾人标语
2014/06/25 职场文书
财务检查整改报告
2014/11/06 职场文书
股权转让协议书
2014/12/07 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python
nginx 添加http_stub_status_module模块
2022/05/25 Servers
Golang实现可重入锁的示例代码
2022/05/25 Golang