ready()函数用于在当前文档结构载入完毕后当即执行指定的函数。php
该函数的做用至关于window.onload事件。html
你能够屡次调用该函数，从而绑定多个函数，jQuery将在DOM文档结构加载完毕后按照绑定顺序当即执行这些函数。jquery
请注意：请不要在一个页面同时使用ready()函数和<body>元素的onload事件绑定函数，由于它们之间并不彻底兼容。若是你必须使用load，那么请不要使用jQuery的ready()和load()来为window或更多指定项(例如图片)添加load事件处理器。dom
该函数属于jQuery对象(实例)。函数
jQueryObject.ready( fn )
| 参数 | 描述 |
|---|---|
| fn | Function类型指定须要执行的函数。 |
ready()将为函数参数fn传递一个参数，这个参数就是jQuery标识符，你能够自定义该参数的名称，并将其用做jQuery的别名。spa
ready()函数的返回值为jQuery类型，返回当前jQuery对象自己。code
与window.onload事件相比，ready()具备较高的执行优先级。window.onload必须等到当前页面中包括图片在内的全部元素所有加载完毕后才会执行；ready()是等到HTML结构绘制完毕后就当即执行，没必要等到图片等全部资源加载完毕。htm
绝大多数时候，你均可以使用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 );
} );