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调用WebService的实现代码
Jun 19 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
BootStrap3中模态对话框的使用
Jan 06 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 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的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
php上传图片类及用法示例
2016/05/11 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
Python创建文件和追加文件内容实例
2014/10/21 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
python django生成迁移文件的实例
2019/08/31 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
如何写一个自定义标签
2012/12/28 面试题
办公室文秘岗位职责
2013/11/15 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
党的群众路线调研报告
2014/11/03 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫