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实现js打字效果示例分享
Jan 19 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
js创建对象的方法汇总
Jan 07 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
Layui 动态禁止select下拉的例子
Sep 03 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 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中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
php查询及多条件查询
2017/02/26 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
Python单体模式的几种常见实现方法详解
2017/07/28 Python
pycharm远程调试openstack代码
2017/11/21 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
python实现代码审查自动回复消息
2021/02/01 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
大学生职业规划书的范本
2014/02/18 职场文书
团日活动总结范文
2014/04/25 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
在Docker容器中部署SQL Server
2022/04/11 Servers