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 相关文章推荐
php跨域调用json的例子
Nov 13 Javascript
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
jquery解析xml字符串简单示例
Apr 11 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
js模糊查询实例分享
Dec 26 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
three.js 入门案例详解
Jan 23 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
Vue中key的作用示例代码详解
Jun 10 Javascript
typescript配置alias的详细步骤
Aug 12 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
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
JavaScript EasyPager 分页函数
2011/05/25 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
一个基于flask的web应用诞生(1)
2017/04/11 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
python颜色随机生成器的实例代码
2020/01/10 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
python中实现词云图的示例
2020/12/19 Python
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
门卫岗位安全职责
2013/12/13 职场文书
营销总经理的岗位职责
2013/12/15 职场文书
领导证婚人证婚词
2014/01/13 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
公司员工检讨书
2014/02/08 职场文书
学生生病请假条范文
2014/02/16 职场文书
硕士生工作推荐信
2014/03/07 职场文书
婚礼司仪主持词
2014/03/14 职场文书
论文评语大全
2014/04/29 职场文书
写给导师的自荐信
2015/03/06 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技