jQuery.ready() 函數詳解

時間 2019-11-10

標籤 jquery.ready jquery ready 函數詳解欄目 JQuery 简体版

原文原文鏈接

jQuery.ready() 函數詳解

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