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的tab切换 js原理
Apr 01 Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
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中的登陆login
2007/01/18 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
javascript for循环设法提高性能
2010/02/24 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
Javascript浅谈之this
2013/12/17 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
python自动化测试之连接几组测试包实例
2014/09/28 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
python怎么判断素数
2020/07/01 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
个人求职简历的自我评价范文
2013/10/09 职场文书
药品采购员岗位职责
2014/02/08 职场文书
师德师风演讲稿
2014/05/05 职场文书
大学生应聘求职信
2014/05/26 职场文书
电话客服工作职责
2014/07/27 职场文书
水电维修专业推荐信
2014/09/06 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
Golang获取List列表元素的四种方式
2022/04/20 Golang
排查Tomcat进程假死的问题
2022/05/06 Servers