當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

JQuery .ready()用法及代碼示例


用法 
.ready( handler ) => jQuery

說明：指定當 DOM 完全加載時要執行的函數。

  • 添加的版本：1.0.ready( handler )

    • handler
      類型：Function ()
      DOM 準備好後執行的函數。

.ready() 方法提供了一種在頁麵的文檔對象模型 (DOM) 變得可以安全操作時立即運行 JavaScript 代碼的方法。這通常是在用戶查看或與頁麵交互之前執行所需任務的好時機，例如添加事件處理程序和初始化插件。當通過連續調用此方法添加多個函數時，它們會在 DOM 準備好時按照添加順序運行。從 jQuery 3.0 開始，jQuery 確保在一個處理程序中發生的異常不會阻止隨後添加的處理程序執行。

大多數瀏覽器 provide similar functionality 以 DOMContentLoaded 事件的形式出現。但是，jQuery 的 .ready() 方法在一個重要且有用的方麵有所不同：如果 DOM 準備就緒並且瀏覽器在代碼調用 .ready( handler ) 之前觸發 DOMContentLoaded ，則函數 handler 仍將被執行。相反，在事件觸發後添加的 DOMContentLoaded 事件偵聽器永遠不會執行。

瀏覽器還在window 對象上提供load 事件。當此事件觸發時，它表示頁麵上的所有資源都已加載，包括圖像。可以使用 $( window ).on( "load", handler ) 在 jQuery 中觀看此事件。如果代碼依賴於加載的資源(例如，如果需要圖像的尺寸)，則應將代碼放置在 load 事件的處理程序中。

請注意，盡管 DOM 總是在頁麵完全加載之前準備好，但在 .ready() 處理程序期間執行的代碼中附加 load 事件偵聽器是 usually not safe。例如，可以使用 $.getScript() 等方法在頁麵加載很久之後動態加載腳本。盡管 .ready() 添加的處理程序將始終在動態加載的腳本中執行，但 window 的 load 事件已經發生並且這些偵聽器將永遠不會運行。

jQuery 提供了幾種方法來附加將在 DOM 準備好時運行的函數。以下所有語法都是等效的：

  • $( handler )
  • $( document ).ready( handler )
  • $( "document" ).ready( handler )
  • $( "img" ).ready( handler )
  • $().ready( handler )

從 jQuery 3.0 開始，隻推薦第一種語法；其他語法仍然有效，但已被棄用。這是因為選擇與 .ready() 方法的行為無關，該方法效率低下並且可能導致對該方法行為的錯誤假設。例如，第三種語法適用於 "document"，它什麽都不選擇。第四種語法等待文檔準備好，但暗示(錯誤地)它等待圖像準備好。

還有 $(document).on( "ready", handler ) ， deprecated as of jQuery 1.8 and removed in jQuery 3.0 。請注意，如果在附加此事件之前 DOM 已準備就緒，則處理程序 will not be executed 。

.ready() 方法通常與匿名函數一起使用：

$( document ).ready(function() {
  // Handler for .ready() called.
});

這相當於推薦的調用方式：

$(function() {
  // Handler for .ready() called.
});

給 jQuery 對象起別名

當$.noConflict() 用於避免命名空間衝突時，$ 快捷方式不再可用。但是，.ready() 處理程序傳遞了對調用該方法的jQuery 對象的引用。這允許處理程序使用 jQuery 對象，例如 $ ，而不知道其別名：

jq2 = jQuery.noConflict();
jq2(function( $ ) {
  // Code using $ as usual goes here; the actual jQuery object is jq2
});

例子：

加載 DOM 時顯示一條消息。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ready demo</title>
  <style>
  p {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  <script>
 
  $(function() {
    $( "p" ).text( "The DOM is now loaded and can be manipulated." );
  });
 
  </script>
 
</head>
<body>
 
<p>Not loaded yet.</p>
 
 
</body>
</html>

演示：

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 .ready()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。