jQuery中$(function() {});问题详解


Posted in Javascript onAugust 10, 2015

$(document).ready() 里的代码是在页面内容都加载完才执行的,如果把代码直接写到script标签里,当页面加载完这个script标签就会执行里边的代码了,此时如果你标签里执行的代码调用了当前还没加载过来的代码或者dom,那么就会报错,当然如果你把script标签放到页面最后面那么就没问题了,此时和ready效果一样。

$(document).ready(function(){})可以简写成$(function(){});

点击段落后,此段落隐藏:

<html>
<head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("p").click(function(){
  $(this).hide();
 });
});
</script>
</head>

<body>
 <p>If you click on me, I will disappear.</p>
</body>
</html>

如果把$(document).ready(function() {});去掉后,无法隐藏段落:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 $("p").click(function(){
  $(this).hide();
 });
</script>
</head>

<body>
 <p>If you click on me, I will disappear.</p>
</body>
</html>

但是把script放到页面最后的话,就可恢复隐藏效果:

<html>
<head>
</head>

<body>
 <p>If you click on me, I will disappear.</p>
</body>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
 $("p").click(function(){
   $(this).hide();
 });
</script>
</html>

总结:

$(document).ready 里的代码是在页面内容都加载完才执行的,你直接写到script标签里,当页面加载完这个script标签就会执行里边的代码了,如果你标签里执行的代码调用了当前还没加载过来的代码或者dom,那么就会报错,
当然如果你把script标签当到页面最后面那么就没问题了和ready差不多的效果

Javascript 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐base.js
Dec 23 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
JavaScript实现经典排序算法之插入排序
Dec 28 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 #Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 #Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 #Javascript
javascript实现连续赋值
Aug 10 #Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 #Javascript
js中的内部属性与delete操作符介绍
Aug 10 #Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 #Javascript
You might like
我的群发邮件程序
2006/10/09 PHP
php输出表格的实现代码(修正版)
2010/12/29 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
JavaScript 乱码问题
2009/08/06 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
采用call方式实现js继承
2014/05/20 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
python命令行工具Click快速掌握
2019/07/04 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
django框架两个使用模板实例
2019/12/11 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
写给保洁员表扬信
2014/01/08 职场文书
直接有效的自我评价
2014/01/11 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
三八妇女节主持词
2015/07/04 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
关于EntityWrapper的in用法
2022/03/22 Java/Android
Springboot中如何自动转JSON输出
2022/06/16 Java/Android