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 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 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 选项及相关信息函数库
2006/12/04 PHP
怎样才能成为PHP高手?学会“懒惰”的编程
2006/12/05 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
python抓取京东商城手机列表url实例代码
2013/12/18 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
python命令 -u参数用法解析
2019/10/24 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
电大物流学生的自我评价
2013/10/25 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
2014年中秋寄语
2014/08/11 职场文书
小学生学习保证书
2015/02/26 职场文书