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 相关文章推荐
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
为超链接加上disabled后的故事
Dec 10 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
AngularJS Module方法详解
Dec 08 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 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
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
python中偏函数partial用法实例分析
2015/07/08 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
应聘医学检验人员自荐信
2013/09/27 职场文书
银行员工职业规划范文
2014/01/21 职场文书
市场专员岗位职责
2014/02/14 职场文书
4s店市场专员岗位职责
2014/04/09 职场文书
励志演讲稿大全
2014/08/21 职场文书
演讲稿开场白台词
2014/08/25 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
安全教育主题班会教案
2015/08/12 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
如何做好工作总结!
2019/04/10 职场文书
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js