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实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
表格 隔行换色升级版
Nov 07 Javascript
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
js 绑定键盘鼠标事件示例代码
Feb 12 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
微信小程序-可移动菜单的实现过程详解
Jun 24 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
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
php代码架构的八点注意事项
2016/01/25 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
javascript 读取图片文件的大小
2009/06/25 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
javascript模拟命名空间
2015/04/17 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
Python制作简单的网页爬虫
2015/11/22 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
python实现汉诺塔算法
2021/03/01 Python
Python实现元素等待代码实例
2019/11/11 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
国外软件测试工程师面试题
2016/12/09 面试题
幼儿园健康教育方案
2014/06/14 职场文书
优秀家长自荐材料
2014/08/26 职场文书
车间质检员岗位职责
2015/04/08 职场文书
MYSQL如何查看操作日志详解
2022/05/30 MySQL