jquery document ready（超详细）

什么是 jQuery Document Ready？

在网页开发中，我们常常需要在页面加载完成后执行一些 JavaScript 代码。比如，给按钮添加点击事件、隐藏某个元素、动态加载数据等等。但如果你直接把代码写在 HTML 文件的 <script> 标签里，不加任何判断，可能会遇到一个问题：代码执行时，页面上的元素还没加载完成，程序就会报错。

这就像是你去厨房做饭，还没把锅放在灶上，就急着倒油，结果油洒了一地。你想要的操作，必须等“锅到位”之后才能进行。

jQuery 提供了一个非常优雅的解决方案——$(document).ready()，它就是专门用来监听 DOM（文档对象模型）是否加载完成的。这个机制就是所谓的 jquery document ready。

简单来说，$(document).ready() 就像是一个“等待信号”：当浏览器把 HTML 页面完全解析完毕，所有标签都准备好后，这个函数才会触发执行你的代码。它确保了你的 JavaScript 能在安全的环境下操作 DOM 元素。

为什么需要使用 jquery document ready？

我们来举个例子。假设你的 HTML 代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>测试页面</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="myBtn">点击我</button>

  <script>
    // 直接在 script 标签中写代码
    $('#myBtn').click(function() {
      alert('按钮被点击了！');
    });
  </script>
</body>
</html>

这段代码看起来没问题，但实际运行时可能会出错。为什么？因为当浏览器解析到 <script> 标签时，<button> 元素还没被创建，#myBtn 还不存在，$('#myBtn') 返回的是 null，后续调用 .click() 就会报错。

解决方法就是使用 jquery document ready。

如何正确使用 jquery document ready？

jQuery 提供了两种写法，都等价，推荐使用第二种，更简洁：

写法一：完整写法

$(document).ready(function() {
  // 在这里写你的代码
  $('#myBtn').click(function() {
    alert('按钮被点击了！');
  });
});

写法二：简写形式（推荐）

$(function() {
  // 这里的代码会在 DOM 加载完成后执行
  $('#myBtn').click(function() {
    alert('按钮被点击了！');
  });
});

两种写法效果完全一样。$(function() { ... }) 是 $(document).ready(function() { ... }) 的语法糖，写起来更方便。

💡 小贴士：你可以在 $(function() { ... }) 里面写任何你想要在页面加载后运行的代码，比如初始化插件、绑定事件、操作 DOM 等等。

代码执行时机的比喻：网页加载的“时间线”

我们可以把网页加载过程想象成一场电影的拍摄过程：

第 1 镜头：HTML 结构搭建（就像搭房子的框架）
第 2 镜头：CSS 样式加载（给房子刷墙、铺地板）
第 3 镜头：JavaScript 脚本执行（演员登场，开始表演）

如果在第 1 镜头还没拍完时，你就让演员上台跳舞，那肯定会出错。同理，在 DOM 元素还没生成前，就试图操作它们，程序就会崩溃。

jquery document ready 就是那个“等所有镜头拍完”的信号。它只在所有 HTML 元素都构建完毕后才触发，确保你操作的是“真实存在的元素”。

实际应用场景举例

场景一：给按钮绑定点击事件

$(function() {
  // 等待 DOM 加载完成后再绑定事件
  $('#submitBtn').click(function() {
    alert('提交按钮已点击！');
    // 可以在这里发送 AJAX 请求或验证表单
  });
});

✅ 注释：#submitBtn 是按钮的 ID。只有在 DOM 完全加载后，$('#submitBtn') 才能正确找到该元素。

场景二：动态修改页面内容

$(function() {
  // 页面加载完成后，修改标题文字
  $('h1').text('欢迎访问我的网站！');
  
  // 或者隐藏某个元素
  $('#hiddenDiv').hide();
});

✅ 注释：text() 用于设置文本内容，hide() 用于隐藏元素。这些操作都依赖 DOM 已存在，因此必须放在 $(function() { ... }) 中。

场景三：初始化第三方插件

很多前端插件（如轮播图、日期选择器）需要在 DOM 准备好后才能初始化。

$(function() {
  // 初始化轮播图插件
  $('.carousel').carousel({
    interval: 3000,
    pause: 'hover'
  });

  // 初始化日期选择器
  $('#datePicker').datepicker();
});

✅ 注释：如果在 DOM 未加载前初始化，插件会找不到目标元素，导致“未定义”错误。

常见错误与注意事项

错误写法	问题描述	正确做法
直接在 `<script>` 中写操作代码	DOM 未加载，元素不存在	使用 `$(function() { ... })`
把 `$(function() { ... })` 写在 `<head>` 里但没放在 `</body>` 前	脚本执行时机不对	确保写在 `</body>` 之前或使用 `defer`
多个 `$(function() { ... })` 写法冲突	逻辑混乱	保持一个入口，合并逻辑即可

⚠️ 重要提醒：不要把 $(document).ready() 写在 <head> 中，除非你用了 defer 属性。否则，脚本会提前执行，导致 DOM 还没准备好。

与 window.onload 的区别

有些开发者会问：$(document).ready() 和 window.onload 有什么不同？

我们来对比一下：

特性	`$(document).ready()`	`window.onload`
触发时机	DOM 结构加载完成	所有资源（图片、CSS、JS）加载完成
执行速度	快（通常在几秒内）	慢（可能要等图片加载完）
使用场景	绑定事件、操作 DOM	页面完全加载后才执行的操作

📌 举个例子：你希望用户一打开页面就能点击按钮，用 $(document).ready() 就够了；但如果你要等图片都加载完才显示广告，那就应该用 window.onload。

高级技巧：多个 ready 回调如何处理？

你可以在一个页面里写多个 $(function() { ... })，它们会按顺序执行，不会冲突。

$(function() {
  console.log('第一个 ready 回调执行');
});

$(function() {
  console.log('第二个 ready 回调执行');
});

$(function() {
  console.log('第三个 ready 回调执行');
});

这在模块化开发中非常有用：你可以把不同功能的初始化代码分别放在不同的 ready 块里，便于维护。

总结与建议

jquery document ready 是 jQuery 开发中不可或缺的基础知识。它解决了“代码执行时机”的核心问题，让你可以安全地操作 DOM。

无论你是初学者还是中级开发者，掌握它都至关重要。记住：

不要直接在 <script> 中操作 DOM
所有 DOM 操作都应包裹在 $(function() { ... }) 中
用它来绑定事件、初始化插件、修改内容
它比 window.onload 更快，更适合大多数场景

当你能熟练使用 jquery document ready，你就迈出了构建动态网页的第一步。它不是“可有可无”的技巧，而是“必须掌握”的规范。

希望这篇文章能帮你彻底理解这个机制，让未来的代码不再因为“元素不存在”而报错。多写几次，多调试几次，你会发现，它其实很简单，也很强大。