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插件化开发教程(五)
Feb 01 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
vue-cropper插件实现图片截取上传组件封装
May 27 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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
如何实现JS函数的重载
2006/09/22 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
Javascript中神奇的this
2016/01/20 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
收集的几个Python小技巧分享
2014/11/22 Python
Python操作CouchDB数据库简单示例
2015/03/10 Python
python获取各操作系统硬件信息的方法
2015/06/03 Python
pycharm远程调试openstack代码
2017/11/21 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
Python requests上传文件实现步骤
2020/09/15 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
软件测试面试题
2014/01/05 面试题
会计专业自我鉴定范文
2013/10/06 职场文书
专科毕业生求职简历的自我评价
2013/10/12 职场文书
社团文化节邀请函
2014/01/10 职场文书
经销商订货会主持词
2014/03/27 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
python之json文件转xml文件案例讲解
2021/08/07 Python
volatile保证可见性及重排序方法
2022/08/05 Java/Android