关于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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery Plupload上传插件的使用
Apr 19 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
使用jQuery实现购物车
Oct 29 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文件上传主要代码讲解
2013/09/30 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
Django中几种重定向方法
2015/04/28 Python
python实现kMeans算法
2017/12/21 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
法院授权委托书格式
2014/09/28 职场文书
幼师中班个人总结
2015/02/12 职场文书
聘任证明怎么写
2015/03/02 职场文书
团日活动总结格式
2015/05/11 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
Go语言读取txt文档的操作方法
2022/01/22 Golang
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang
基于docker安装zabbix的详细教程
2022/06/05 Servers
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers