# .ready()

所属分类：事件 > 文档加载 英文文档：.ready()

## .ready( handler )返回: jQuery

描述: 当DOM准备就绪时，指定一个函数来执行。

- #### 添加的版本: 1.0.ready( handler )

  - handler
    类型: Function()
    当DOM准备就绪时，执行的一个函数。

虽然JavaScript提供了`load`事件，当页面执呈现时用来执行这个事件，直到所有的东西，如图像已被完全接收前，此事件不会被触发。在大多数情况下，只要DOM结构已完全加载时，脚本就可以运行。传递处理函数给`.ready()`方法，能保证DOM准备好后就执行这个函数，因此，这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。当使用的脚本依赖 CSS 属性值时，需要特别注意，要保证外部的样式或内嵌的样式被加载完后，再调用脚本。

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

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

以下三个语法全部是等价的：

- `$(document).ready(handler)`
- `$().ready(handler)` (this is not recommended)
- `$(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()`方法通常用于一个匿名函数：

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

这等价于调用:

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

如果`.ready()`在DOM被初始化后被调用，新的处理函数通过将立即执行。

#### Aliasing the jQuery Namespace

当使用其他JavaScript库时，我们不妨调用`$.noConflict()`以避免命名空间中的混淆。当这个函数被调用，`$`快捷方式将不再可用，迫使我们每次将写`$`的时候,写`jQuery`代替 。然而，处理函数传递给`.ready()`方法可以带一个参数，这个参数就是全局的`jQuery`对象。这意味着我们可以重新命名上下文对象内的`.ready()`处理函数，而不影响其他代码：

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

## 例子:

#### 显示当DOM加载的信息。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
    <!DOCTYPE html><html><head>  <style>p { color:red; }</style>  <script src="https://code.jquery.com/jquery-latest.js"></script>  <script>  $(document).ready(function () {  $("p").text("The DOM is now loaded and can be manipulated.");});  </script> </head><body>  <p>Not loaded yet.</p> </body></html>

#### Demo: