关于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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 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中spl_autoload_register函数的用法总结
2013/11/07 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
python 5个顶级异步框架推荐
2020/09/09 Python
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
What is view? why do we have view?
2012/06/22 面试题
心得体会怎么写
2013/12/30 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
安全宣传标语
2014/06/10 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
租房协议书范例
2014/10/14 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
php去除数组中为0的元素的实例分析
2021/11/17 PHP
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis