jQuery之$(document).ready()使用介绍
更新时间：2012年04月05日 23:03:37 作者：
学习jQuery的第一件事是：如果你想要一个事件运行在你的页面上，你必须在$(document).ready()里调用这个事件
学习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()里的代码就开始执行。这样用户在第一眼看见页面元素时，特效就可以运行了。
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()里的代码就开始执行。这样用户在第一眼看见页面元素时，特效就可以运行了。
您可能感兴趣的文章:
- jquery $(document).ready() 与window.onload的区别
- JQuery onload、ready概念介绍及使用方法
- jquery中的$(document).ready()使用小结
- Jquery中"$(document).ready(function(){ })"函数的使用详解
- jquery的$(document).ready()和onload的加载顺序
- jquery ready()的几种实现方法小结
- jquery中的$(document).ready()与window.onload的区别
- 用javascript实现jquery的document.ready功能的实现代码
- JQuery 引发两次$(document.ready)事件
- jQuery 的 ready()的纯js替代方法
相关文章
![jQuery 属性选择器element[herf*=''value'']使用示例](//img.jbzj.com/images/xgimg/bcimg0.png)
jQuery 属性选择器element[herf*=''value'']使用示例
一个针对jQuery属性选择器的小例子,增加对jQUery属性选择器的理解，感兴趣的朋友可以参考下2013-10-10
这篇文章主要介绍了基于jQuery实现的仿百度首页滑动选项卡效果代码,涉及jQuery响应鼠标事件实现页面元素动态变换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的2012-10-10
用相对简单的JavaScript代码，可以创建出能确定用户地理位置详细信息的Web应用，包括经纬度以及海拔等。一些Web应用甚至能通过监控用户位置随时间的移动来提供导航功能，其中还综合了GoogleMaps API这样的地图系统。2015-04-04
这篇文章主要为大家详细介绍了JQuery validate插件验证用户注册信息的具体代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
本文介绍一个利用Jquery和雅虎的YQL服务实现天气预报功能,需要的朋友可以参考下2014-02-02
下面小编就为大家带来一篇浅谈JQuery+ajax+jsonp 跨域访问。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
jQuery中serializeArray()与serialize()的区别实例分析
这篇文章主要介绍了jQuery中serializeArray()与serialize()的区别,结合实例形式分析了jQuery中serializeArray()与serialize()的具体功能、使用技巧与用法区别,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了jQuery+PHP实现微信转盘抽奖功能的方法,详细分析了抽奖程序界面设计、前台jQuery交互、后台概率算法等抽奖功能相关技巧,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了jQuery使用height()获取高度需要注意的地方,对于display:none或者隐藏的部分无法获取到其高度,这是使用jQuery的height方法需要注意的地方,需要的朋友可以参考下2014-12-12
![jQuery 属性选择器element[herf*=''value'']使用示例](http://img.jbzj.com/images/xgimg/bcimg0.png)
最新评论