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 相关文章推荐
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
select标记美化--JS式插件、后期加载
Apr 01 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
原生javascript实现连连看游戏
Jan 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中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
python用requests实现http请求代码实例
2019/10/31 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
详解rem 适配布局
2018/10/31 HTML / CSS
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
幼儿教师寄语集锦
2014/04/03 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
领导欢迎词范文
2015/01/26 职场文书
稽核岗位职责
2015/02/10 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
了解Redis常见应用场景
2021/06/23 Redis
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
python保存图片的四个常用方法
2022/02/28 Python
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫