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搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
原生js实现放大镜特效
Mar 08 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
vue抽出组件并传值实例
Jul 31 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
基于文本的搜索
2006/10/09 PHP
PHP脚本的10个技巧(3)
2006/10/09 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Python入门教程之运算符与控制流
2016/08/17 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
python3调用windows dos命令的例子
2019/08/14 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
运动会领导邀请函
2014/01/10 职场文书
医学生自我评价
2014/01/27 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
党员个人整改措施
2014/10/24 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
校园开放日新闻稿
2015/07/17 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
PyMongo 查询数据的实现
2021/06/28 Python
springcloud整合seata
2022/05/20 Java/Android