jQuery.ready() 函數實例用法詳解

ready()函數用於在目前文件結構載入後立即執行指定的函數。

此函數的作用相當於window.onload事件。

你可以多次呼叫函數，從而綁定多個函數，jQuery會在DOM文檔結構載入完畢後按照綁定順序立即執行這些函數。

請注意：請不要在一個頁面同時使用ready()函數和元素的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程式碼為例：

以下jQuery範例程式碼用於示範ready()函數的具體用法：

// 形式一

$(document).ready ( function(){

    // 為btn按鈕綁定點選事件

    $("#btn").click( function(){

        alert("你點選了按鈕!");

    } );

} );

// 形式三

$( function(){

    $("#message").html( '文件載入完成!' );  

} );

在多個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 ); 

} );

以上是jQuery.ready() 函數實例用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！