返回值:jQueryready(handler)

在 DOM 被完全加载完时，指定将要被执行的函数。

虽然 JavaScript 提供了 load 事件，当页面被重绘时可以执行想要的操作，但是该事件直到所有的资源（例如，图片）被加载完后，才会被触发。大多数情况下，当 DOM 层次结构被完全构建之后，脚本就可以执行。.ready() 保证在 DOM 准备就绪之后，再执行传递给它的方法。因此，这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。当使用的脚本依赖 CSS 属性值时，需要特别注意，要保证外部的样式或内嵌的样式被加载完后，再调用脚本。

如果执行的代码需要在元素被加载之后才能使用时，（例如，取得图片的大小需要在图片被加载完后才能知道），就需要将这样的代码放到 load 事件中。

通常情况下，.ready() 方法和 <body onload=""> 是不兼容的。如果必须要使用 load 时，既不要使用 .ready() 方法，也不要使用 jQuery 的 .load() 方法向 window 或一些指定的元素（例如，图片）绑定 load 事件。

下面三种语法是等价的：

  • $(document).ready(handler)
  • $().ready(handler) (不建议使用这种方法)
  • $(handler)

还有一种用法是 $(document).bind("ready", handler)，该方法在从 jQuery 1.8 开始不再建议使用。这种用法的行为和 ready 方法类似，只有一点不同：如果 .ready() 方法已经被执行，再试图进行 .bind("ready") 的话，此时通过 .bind("ready") 绑定的函数是不会被立刻执行的，而是在使用上述三种方法之一进行绑定的函数执行完之后，才会执行通过这种方法绑定的 ready 事件处理。（换句话说，如果同时使用 .ready() 方法和 $(document).bind("ready", handler) 的话，那么始终会先执行 .ready()，再执行通过 bind 绑定的事件。）

由于 .ready() 方法只能被匹配当前文档的 jQuery 对象调用，因此选择符可能被省略。

传递给 .ready() 的函数通常是匿名函数： 

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

上面的代码和下面的代码是等价的：

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

如果 .ready() 在 DOM 被初始化后被调用，那么会立即调用传递给该方法的函数。

为 jQuery 名字空间指定别名

当使用其它的 JavaScript 库时，我们希望通过调用 $.noConflict() 来避免名字空间冲突。当调用 $.noConflict() 后，$ 符号将不再有效，在原先使用 $ 的地方，现在我们必须使用 jQuery 来代替。然而，传递给 .ready() 方法的函数可以带上一个参数，代表全局的 jQuery 对象。这意味着我们可以重命名 .ready() 事件的上下文对象，而不影响其它代码： 

jQuery(document).ready(function($) {
  // Code using $ as usual goes here.
});

示例:

当 DOM 加载完成后，显示一条信息。

<!DOCTYPE html>
<html>
<head>
<style>p { color:red; }</style>
<script src="jquery.min.js"></script>
</head>
<body>

<p>Not loaded yet.</p>

<script>

$(document).ready(function () {
  $("p").text("The DOM is now loaded and can be manipulated.");
});

</script>
</body>
</html>

演示: