Jquery中"$(document).ready(function(){ })"函数的使用详解

在jQuery中，`$(document).ready(function(){ })` 是一个非常重要的函数，用于确保在DOM（文档对象模型）完全加载和解析完成后才执行其中的代码。这样可以避免在DOM元素还未完全加载时尝试访问或操作它们，从而导致的错误或问题。这个函数在jQuery 3.0之前被广泛使用，但从jQuery 3.0开始，推荐使用更简洁的 `$(function(){ })` 语法来达到相同的效果。

### 使用详解

#### 基本语法


$(document).ready(function(){
    // 在这里编写当DOM完全加载后需要执行的代码
});

或者使用更简洁的语法：


$(function(){
    // 当DOM完全加载后执行的代码
});

#### 工作原理

当浏览器加载HTML页面时，它会解析HTML并构建DOM树。`$(document).ready()` 函数会设置一个事件监听器，监听DOMContentLoaded事件。这个事件会在HTML文档被完全加载和解析完成后触发，但不需要等待样式表、图片和子框架的完成加载。一旦这个事件被触发，`$(document).ready()` 中的回调函数就会被执行。

#### 优点

1. **确保DOM完全加载**：在DOM完全加载后再执行脚本，可以避免因DOM元素未加载完成而导致的错误。

2. **提高页面加载速度**：脚本在DOM加载完成后立即执行，不需要等待其他资源（如图片、样式表）的加载。

3. **代码简洁**：使用jQuery的 `$(document).ready()` 或其简写形式可以使代码更加简洁易读。

#### 注意事项

- 尽量避免在 `$(document).ready()` 内部嵌套过多的 `$(document).ready()`，这可能会导致代码难以理解和维护。

- 如果页面中使用了多个库或框架，并且它们都有自己的DOM就绪事件处理方法，请确保不要产生冲突。

- 在现代Web开发中，原生的 `DOMContentLoaded` 事件也可以达到类似的效果，并且不依赖于任何外部库。

#### 示例


$(document).ready(function(){
    alert("DOM完全加载了！");
    // 这里可以安全地访问和操作DOM元素
});

// 或者使用简写形式
$(function(){
    alert("DOM也完全加载了，这是简写形式！");
});