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向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
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
福利彩票幸运号码自动生成器
2006/10/09 PHP
php5 and xml示例
2006/11/22 PHP
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
python使用turtle库绘制树
2018/06/25 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
后勤部经理岗位职责
2014/02/23 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
爱情保证书
2015/01/17 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server