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 相关文章推荐
用JavaScript调用WebService的示例
Apr 07 Javascript
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 Javascript
详解JavaScript作用域 闭包
Jul 29 Javascript
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
晶体管单管来复再生式收音机
2021/03/02 无线电
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
基于JQuery实现的Select级联
2014/01/27 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
vue实现搜索功能
2019/05/28 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
Django的models中on_delete参数详解
2019/07/16 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
正风肃纪剖析材料
2014/02/18 职场文书
岗位职责风险点
2014/03/12 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
安全先进个人材料
2014/12/29 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
python简单验证码识别的实现过程
2021/06/20 Python
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android