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 );
} );