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 相关文章推荐
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
通过一段代码简单说js中的this的使用
Jul 23 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
对javascript继承的理解
Oct 11 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
浅谈Vue.js
Mar 02 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
javascript递归函数定义和用法示例分析
Jul 22 Javascript
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
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动态创建Flash动画
2006/10/09 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
php之curl设置超时实例
2014/11/03 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
php实现socket推送技术的示例
2017/12/20 PHP
js 文件引入实现代码
2010/04/23 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
javascript实现拖放效果
2015/12/16 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python strip lstrip rstrip使用方法
2008/09/06 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
python删除字符串中指定字符的方法
2018/08/13 Python
详解Python3定时器任务代码
2019/09/23 Python
关于Python-faker的函数效果一览
2019/11/28 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
汉语言文学毕业生求职信
2013/10/01 职场文书
竞选班长演讲稿
2013/12/30 职场文书
村庄环境整治方案
2014/05/15 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
西湖英语导游词
2015/02/06 职场文书
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
一条慢SQL语句引发的改造之路
2022/03/16 MySQL
Python循环之while无限迭代
2022/04/30 Python