jQuery文档就绪事件怎么写

# jQuery文档就绪事件怎么写

在jQuery开发中，**文档就绪事件（Document Ready）**是确保DOM完全加载后再执行JavaScript代码的关键机制。本文将介绍三种常用写法及其应用场景。

## 1. 标准写法：$(document).ready()

```javascript
$(document).ready(function() {
  // DOM加载完成后执行的代码
  console.log("文档已就绪！");
});

特点： - 最经典的写法 - 明确表达意图 - 支持在同一个页面多次使用（按声明顺序执行）

2. 简写形式：$()

$(function() {
  // 简写形式的就绪事件
  $("button").click(function() {
    alert("按钮被点击！");
  });
});

优势： - 代码更简洁 - 功能与标准写法完全一致 - 推荐在简单项目中使用

3. 箭头函数写法（ES6+）

$(() => {
  // 使用箭头函数
  $("#menu").hide();
});

适用场景： - 现代JavaScript项目 - 需要保持this指向时 - 需要与其他ES6+特性配合使用时

注意事项

1. 与window.onload的区别：

   • ready事件：DOM树加载完毕即触发（不等待图片等资源）
   • onload事件：所有资源加载完成后触发

2. 多次声明问题：

   $(function() { console.log("第一个ready") });
   $(function() { console.log("第二个ready") });
   // 会按顺序输出
   

3. jQuery 3.x变更：

   • 修正了ready事件的异步处理机制
   • 即使ready在DOM加载后声明也会立即执行

最佳实践建议

• 简单项目推荐使用$(function(){})简写
• 团队开发建议统一代码风格
• 需要明确上下文时使用标准写法
• 现代项目可结合Promise或async/await使用

提示：在jQuery 3.0+中，$(document).ready()的回调函数变为异步执行，与原生DOMContentLoaded事件行为保持一致。 “`

（全文约450字，涵盖主要写法和实践建议）