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 相关文章推荐
JQuery1.6 使用方法三
Nov 23 Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
webpack中的热刷新与热加载的区别
Apr 09 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
JavaScript实现随机点名程序
Mar 25 Javascript
vue实现简单加法计算器
Oct 22 Javascript
基于JavaScript实现简单的轮播图
Mar 03 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网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
js导出txt示例代码
2014/01/14 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
python使用心得之获得github代码库列表
2014/06/25 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
python 调试冷知识(小结)
2019/11/11 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
Python类成员继承重写的实现
2020/09/16 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
警察思想汇报
2014/01/04 职场文书
清扬洗发水广告词
2014/03/14 职场文书
规范化管理年活动总结
2014/08/29 职场文书
大学生求职自荐信
2015/03/24 职场文书
2016年春节慰问信息
2015/03/25 职场文书
五年级作文之想象作文
2019/10/30 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers
virtualenv隔离Python环境的问题解析
2022/06/21 Python