jQuery之$(document).ready()使用介绍


Posted in Javascript onApril 05, 2012

学习jQuery的第一件事是:如果你想要一个事件运行在你的页面上,你必须在$(document).ready()里调用这个事件。所有包括在$(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载,并且在页面内容加载之前。
If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as theDOM is loaded and before the page contents are loaded.

$(document).ready(function() { 
// put all your jQuery goodness in here. 
});

有很多方法可以确保事件在页面上正常工作,$(document).ready()比其它方法要更有优势。首先,你不必在HTML上放置任何“ 行为性的”标记。另外,你可以将JavaScript/jQuery写入一个独立的js文件,这样既容易维护,又保证了js与页面内容的隔离。如果你在浏览网页时更加细心,你就会常常看见这种情况:当你将鼠标悬停在一个连接时,有时状态栏中会在显示“javascript:void()”这样的消息。这就是你把一个事件直接放在<a href>标签里所造成的。

在一些使用traditional JavaScript的页面,你会在<body>标签中看见“onload”属性。这会导致一个问题:它限定了在body上只能有一个函数事件。是的,因为它又往内容中添加的“行为性的”标签。如果你想解决这个问题,请参考Jeremy Keith的书:DOM Scripting,里面讲述了如何在一个单独的js文件里创建一个 “addLoadEvent” 函数,它允许多个函数可以在body里被加载。但是这种方法需要为本来很简单的问题编写相当数量的代码,另外,这种方法是在加载window时触发这些事件的,这不得不让我再一次想起 $(document).ready()的好处。

使用 $(document).ready(),你能让你的事件在window加载之前加载或触发。所有你写在这个方法里面的都准备在最早的时刻加载或触发。也就是说,一旦DOM在浏览器中注册后,$(document).ready()里的代码就开始执行。这样用户在第一眼看见页面元素时,特效就可以运行了。

Javascript 相关文章推荐
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
理解javascript正则表达式
Mar 08 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 Javascript
vue自定义树状结构图的实现方法
Oct 18 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 Javascript
javascript淡入淡出效果的实现思路
Mar 31 #Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 #Javascript
一个关于javascript匿名函数的问题分析
Mar 30 #Javascript
JavaScript 基础篇(一)
Mar 30 #Javascript
js确定对象类型方法
Mar 30 #Javascript
js 浏览器事件介绍
Mar 30 #Javascript
js中eval详解
Mar 30 #Javascript
You might like
PHP 中的一些经验积累
2006/10/09 PHP
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
TypeScript入门-接口
2017/03/30 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
详解vuex的简单使用
2018/03/12 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
python中引用与复制用法实例分析
2015/06/04 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
python基于http下载视频或音频
2018/06/20 Python
pandas的排序和排名的具体使用
2019/07/31 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
环保建议书
2014/03/12 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
村委会换届选举方案
2014/05/03 职场文书
施工安全承诺书
2014/05/22 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
工作检讨书怎么写
2015/01/23 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python
Redis性能监控的实现
2021/07/09 Redis
DE1103使用报告
2022/04/05 无线电