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 打印内容方法小结
Nov 04 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
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
PHP连接access数据库
2008/03/27 PHP
PHP 读取文件的正确方法
2009/04/29 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
二级域名转向类
2006/11/09 Javascript
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
15 个 JavaScript Web UI 库
2010/05/19 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
Python操作列表的常用方法分享
2014/02/13 Python
python读取csv文件示例(python操作csv)
2014/03/11 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
战友聚会邀请函
2014/01/18 职场文书
安全横幅标语
2014/06/09 职场文书
先进班集体申报材料
2014/12/26 职场文书
2015年社区工作总结
2015/04/08 职场文书
社区服务活动感想
2015/08/11 职场文书
小学数学教师研修日志
2015/11/13 职场文书
python基础之停用词过滤详解
2021/04/21 Python
如何利用React实现图片识别App
2022/02/18 Javascript
使用python创建股票的时间序列可视化分析
2022/03/03 Python
Elasticsearch 索引操作和增删改查
2022/04/19 Python