JavaScript document.ready() 的用法

封面图 • 2026-01-08 • JavaScript

在 JavaScript 中，`document.ready()` 是 jQuery 提供的一个方法，用于在 HTML 文档完全加载（即 DOM 完全就绪）后执行代码。它确保在操作 DOM 元素之前，这些元素已经存在于页面中。

### 语法

```javascript
$(document).ready(function() {
    // 在这里写你的代码
});
```

或者更简洁的写法：

```javascript
$(function() {
    // 在这里写你的代码
});
```

---

### 作用

- 确保在 DOM 加载完成后再执行脚本。
- 避免在 DOM 元素还未加载时尝试访问它们而导致错误。

---

### 示例

```html
<!DOCTYPE html>
<html>
<head>
    <title>Document Ready Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<h1 id="myHeading">Hello, World!</h1>

</body>
</html>
```

在这个例子中，当页面加载完成后，`#myHeading` 元素会被找到，并将其文字颜色改为红色。

---

### 注意事项

- `document.ready()` 是 jQuery 的方法，不是原生 JavaScript 的方法。
- 如果你使用的是现代 JavaScript（如 ES6+），可以使用 `DOMContentLoaded` 事件来实现类似功能：

```javascript
document.addEventListener("DOMContentLoaded", function() {
    // 在这里写你的代码
});
```

---

### 总结

| 方法 | 描述 |
|------|------|
| `$(document).ready(...)` | jQuery 的方式，确保 DOM 完全加载 |
| `$(...)` | 简写形式，等同于 `$(document).ready(...)` |
| `DOMContentLoaded` | 原生 JavaScript 的方式，功能类似 |

如果你是用 jQuery 开发，推荐使用 `$(function() { ... })` 这种简洁写法。如果是纯 JS，建议使用 `DOMContentLoaded` 事件。