当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

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()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。