jQuery.ready() 函数详解

ready()函数用于在当前文档结构载入完毕后立即执行指定的函数。

该函数的作用相当于window.onload事件。

你可以多次调用该函数，从而绑定多个函数，jQuery将在DOM文档结构加载完毕后按照绑定顺序立即执行这些函数。

请注意：请不要在一个页面同时使用ready()函数和<body>元素的onload事件绑定函数，因为它们之间并不完全兼容。如果你必须使用load，那么请不要使用jQuery的ready()和load()来为window或更多指定项(例如图片)添加load事件处理器。

该函数属于jQuery对象(实例)。

语法

jQueryObject.ready( fn )

参数

参数	描述
fn	Function类型指定需要执行的函数。

ready()将为函数参数fn传递一个参数，这个参数就是jQuery标识符，你可以自定义该参数的名称，并将其用作jQuery的别名。

返回值

ready()函数的返回值为jQuery类型，返回当前jQuery对象本身。

与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("你点击了按钮!");
    } );
} );

//Jquery中click事件必须放在$(document).ready(function(){})之中才起作用，由于在文档加载完毕之前，读取dom元素就是空，会报错。就没有效果。

// 形式三
$( 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 ); 
} );