.ready()

.ready( handler )返回类型:jQuery

描述:指定一个元素,当DOM完全载入时执行它。

.ready()方法提供了一种方法,一旦网页的文档对象模型(DOM)变成可安全操纵时,就运行JavaScript代码。这通常是一个好办法,实施需要在用户看到或者与网页交互之前执行的任务,例如添加事件处理函数,以及初始化插件。如果通过一系列对该方法的调用添加了多个函数,它们会在DOM就绪时运行,按它们添加的顺序运行。自从jQuery 3.0以来,jQuery确保了一个事件处理函数中发生异常不会阻止执行后续添加的处理函数。

大多数浏览器以DOMContentLoaded事件的形式提供了类似的功能。然而,jQuery的.ready()方法异于它们,在于一个重要而且有用的方法:如果DOM变成就绪,浏览器在代码调用.ready( handler )之前引发DOMContentLoaded事件,函数的handler将依然被执行。相较之下,在其它事件引发之后添加的DOMContentLoaded监听器永远不会被执行。

浏览器还在window对象上提供了load事件。当此事件引发时,它指示网页上所有的资产已经载入,包括图像。在jQuery中可以用$( window ).on( "load", handler )来观测此事件。万一代码依赖于已加载的资源(例如,如果需要图像的尺寸),此代码应该放在针对load事件的处理函数中。

请注意,虽然DOM始终在网页完全载入之前变成就绪,但是在.ready()处理函数中执行的代码中附加一个load事件侦听器通常不安全。例如,在网页已早已经加载完N长时间之后,可能动态载入脚本,譬如使用$.getScript()方法。虽然在动态加载脚本中通过.ready()添加的处理函数将始终被执行,但是windowload事件已经发生了,这些侦听器将不会运行。

jQuery提供了一些方法来附加将在DOM就绪时执行的函数。所有以下语法都是等同的:

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

自从jQuery 3.0以来,只有第一种语法是被推荐的;其它语法依然可用,但是已经被淘汰了。这是因为选区已经与.ready()方法的行为没有关系了,它是低效的,可能导致关于此方法的行为的错误的假设。例如,第三种语法对"document"起作用,它不选择任何东西。第四种语法等待文档就绪,但是(不正确地)隐含着它会等待图像就绪。

还有$(document).on( "ready", handler ),在jQuery 1.8中被淘汰了,在jQuery 3.0中被删除了。请注意,如果在附加此事件之前,DOM已经就绪了,此处理函数将不会被执行

.ready()方法通常与匿名函数一起使用:

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

它等同于调用的建议方式:

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

别名于jQuery对象

$.noConflict()用来避免命名空间冲突时,$简写阳不再可用了。然而,.ready()处理函数传入了一个对调用此方法的jQuery对象的引用。这允许处理函数使用一个jQuery对象,例如作为$,而不需要知道它的别名:

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

示例:

当DOM载入时显示消息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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-1.10.2.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>

演示: