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 - HTML的request类
Jan 09 Javascript
jquery动态加载select下拉框示例代码
Dec 10 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
javascript self对象使用详解
Oct 18 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
Vue代码分割懒加载的实现方法
Nov 23 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
发布Angular应用至生产环境的方法
Dec 10 Javascript
Webpack3+React16代码分割的实现
Mar 03 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提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
PHP 事务处理数据实现代码
2010/05/13 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
thinkPHP查询方式小结
2016/01/09 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
python实现中文转换url编码的方法
2016/06/14 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
pandas中ix的使用详细讲解
2020/03/09 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
美丽的现代设计家具:2Modern
2018/07/26 全球购物
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
销售人员自我评价怎么写
2013/09/19 职场文书
大学生旅游业创业计划书
2014/01/29 职场文书
学生自我评价范文
2014/02/02 职场文书
迟到检讨书500字
2014/02/05 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
高中英语教学反思范文
2016/03/02 职场文书
Java集成swagger文档组件
2021/06/28 Java/Android
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python