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 相关文章推荐
javascript实现unicode和字符的互相转换
Jul 18 Javascript
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 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
windows xp下安装pear
2006/12/02 PHP
56.com视频采集接口程序(PHP)
2007/09/22 PHP
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
python实现在sqlite动态创建表的方法
2015/05/08 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
pytorch打印网络结构的实例
2019/08/19 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
财务会计专业求职信范文
2013/12/31 职场文书
给民警的表扬信
2014/01/08 职场文书
服务员自我评价
2014/01/25 职场文书
培训简讯范文
2015/07/20 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书