页面加载时触发ready()事件
ready()事件类似于onLoad()事件，但前者只要页面的DOM结构加载后便触发，而后者必须在页面全部元素加载成功才触发，ready()可以写多个，按顺序执行。此外，下列写法是相等的：
$(document).ready(function(){})等价于$(function(){});
如果处理函数绑定 给window对象，则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。
下面给出jQuery ready与window.onload的区别
|
window.load
|
$(document).ready()
|
|
|
执行时机
|
必须等待网页中所有的内容加载完毕后(包括图片)才能执行
|
网页中所有DOM结构绘制完毕后就执行，可以能DOM元素关联的内容并没有加载完
|
|
编写个数
|
不能同时编写多个
以下代码无法正确执行：
window.onload = function(){
alert("ancto");
};
window.onload = function(){
alert("www.ancto.net");
};
结果只输出第二个
|
能同时编写多个
以下代码正确执行：
$(document).ready(function(){
alert("Hello Aseoe");
});
$(document).ready(function(){
alert("Hello www.aseoe.com");
});
结果两次都输出
|
|
简化写法
|
无
|
$(function(){
// do something
});
|
Jquery代码如下
- $(window).load(function(){
- // 编写代码
- });
- //等价于JavaScript中的以下代码
- Window.onload = function(){
- // 编写代码
- }
与window.onload事件相比，ready()具有较高的执行优先级。window.onload必须等到当前页面中包括图片在内的所有元素全部加载完毕后才会执行；ready()是等到HTML结构绘制完毕后就立即执行，不必等到图片等所有资源加载完毕。
绝大多数时候，你都可以使用ready()来取代window.onload。不过，也有一些例外情况，比如使用:target选择器时，你就必须使用window.onload事件(因为它还要依赖文档结构之外的某些内容)。
示例&说明
ready()函数有以下三种等价的形式：
- function handler(){
- //这里是需要执行的代码
- }
- // 形式一
- $(document).ready( handler );
- // 形式二
- $( ).ready( handler ); // 不推荐该形式
- // 形式三
- $( handler );
以下面这段HTML代码为例：
- <input id="btn" type="button" value="点击" />
- <div id="message"></div>
以下jQuery示例代码用于演示ready()函数的具体用法：
- // 形式一
- $(document).ready( function(){
- // 为btn按钮绑定点击事件
- $("#btn").click( function(){
- alert("你点击了按钮!");
- } );
- } );
- // 形式三
- $( function(){
- $("#message").html( '<span style="color:green;">文档加载完毕!</span>' );
- } );
在多个JS库共存的情况下，变量$的控制权可能会交给其它的JS库，例如Prototype。此时，在全局作用域中我们只能使用变量jQuery。不过ready()函数会传入一个参数；jQuery，因此我们可以自定义参数名称，从而实现在函数内继续变量$来访问jQuery库(你也可以定为其他名称，然后用该参数变量来访问jQuery)。
- // 载入Prototype库文件
- // 载入jQuery库文件
- //让出对变量$的控制权
- jQuery.noConflict();
- // 基于Prototype进行DOM操作(变量$的控制权在Prototype手中)
- $("myDiv").setStyle( {color: "#ffffff"} );
- jQuery(document).ready( function( $ ){
- // 在函数内部，我们仍然可以使用变量$来访问jQuery
- $("#message").html( "当前jQuery版本是：" + $.fn.jquery );
- } );
- jQuery(document).ready( function( abc ){
- // 在函数内部，我们可以使用变量abc来访问jQuery
- abc("#message").html( "当前jQuery版本是：" + abc.fn.jquery );
- } );
本站欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果
转载请注明： 文章转载自：爱思资源网 http://www.aseoe.com/show-13-477-1.html
转载请注明： 文章转载自：爱思资源网 http://www.aseoe.com/show-13-477-1.html
