异常教程

jquery document ready（长文解析）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在 Web 开发中，JavaScript 的执行时机是一个容易被忽视但至关重要的问题。想象你正在搭建一座桥梁：如果脚手架还未完全固定，就贸然开始焊接钢梁，很可能会导致结构不稳。类似地，JavaScript 代码如果在网页元素尚未加载完成时执行，就可能因找不到目标元素而引发错误。
jQuery document ready 正是为了解决这一问题而存在的核心机制。它如同一位经验丰富的施工监督员，确保所有“建材”（DOM 元素）就位后，才允许代码开始“施工”（操作元素）。本文将通过循序渐进的方式，结合案例与比喻，帮助开发者深入理解这一机制，并掌握其在实际项目中的应用技巧。

核心概念解析：为什么需要 document ready？

1. DOM 加载的“时间差”问题

网页加载的过程可以比喻为一场舞台剧的筹备：

  • 幕布升起前（页面加载开始），舞台（HTML 结构）正在搭建，演员（DOM 元素）逐步入场。
  • 如果 JavaScript 代码在幕布完全升起前（元素未加载完成）就尝试“指挥演员”（操作元素），可能导致“演员未到场”的尴尬局面。

例如，以下代码试图在页面加载过程中直接操作一个按钮：

// 假设 HTML 中存在 <button id="myBtn">Click Me</button>
document.getElementById("myBtn").addEventListener("click", function() {
  alert("Clicked!");
});

如果这段代码写在 HTML 的 <head> 区域，由于 <script> 标签加载早于 <body> 内容，此时 myBtn 元素尚未被浏览器解析，代码将因找不到元素而报错。

2. document ready 的核心作用

jQuery 的 $(document).ready() 方法通过监听浏览器的 DOMContentLoaded 事件，确保在 DOM 完全加载（但可能未加载图片等外部资源）后执行代码。其作用可总结为：
| 功能 | 类比 |
|------------------------|-----------------------------------|
| 确保元素存在 | 确认所有演员已到达舞台 |
| 避免代码执行的“时间差” | 防止施工队在脚手架未固定时开工 |

多种语法形式与选择建议

1. 标准写法与简写形式

jQuery 提供了两种等效的 document ready 语法：

// 标准写法  
$(document).ready(function() {  
  // 代码逻辑  
});  

// 简写形式  
$(function() {  
  // 代码逻辑  
});

简写形式更简洁，但可读性略低。建议在代码复杂度较高时使用标准写法，以明确代码意图。

2. 与原生 JavaScript 的对比

原生 JavaScript 可通过 DOMContentLoaded 事件实现类似功能：

document.addEventListener("DOMContentLoaded", function() {  
  // 代码逻辑  
});

两者的区别在于：

  • 兼容性：jQuery 的 ready 方法在旧版浏览器中表现更稳定，而原生方式需注意低版本浏览器支持。
  • 功能扩展：jQuery 的 ready 可与插件、链式调用结合，而原生方式需自行处理复杂逻辑。

实战案例：点击按钮弹窗

1. 基础案例

假设需要实现点击按钮后弹出提示框的功能。以下是完整代码示例：

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

  <script>  
    $(document).ready(function() {  
      $("#alertButton").click(function() {  
        alert("Hello from jQuery!");  
      });  
    });  
  </script>  
</body>  
</html>

关键点解析：

  • 通过 $(document).ready() 确保按钮元素已加载，避免 #alertButton 未定义的错误。
  • 使用 jQuery 的选择器 $("#alertButton") 和事件绑定方法 .click()，代码简洁易读。

2. 常见错误与调试技巧

错误场景：代码放置位置不当

如果将脚本直接放在 <head> 区域，且未使用 document ready，代码可能因元素未加载而失败：

<head>  
  <script>  
    // 错误示例：此时 <button> 元素尚未被解析  
    $("#alertButton").click(...);  
  </script>  
</head>

解决方案：

  • 将脚本移到 <body> 末尾，或始终使用 document ready。

调试工具：浏览器开发者工具

当代码报错时，可通过以下步骤排查：

  1. 在 Chrome 的开发者工具中打开“Console”标签。
  2. 检查是否存在类似 Uncaught TypeError: Cannot read properties of null 的报错。
  3. 确认代码是否在 document ready 内执行，或元素 ID 是否正确。

进阶技巧：优化与常见场景处理

1. 避免“重复嵌套”陷阱

多个 document ready 块可能导致代码冗余。可通过合并逻辑或使用函数复用：

// 避免方式：  
$(function() {  
  // 代码块1  
});  
$(function() {  
  // 代码块2  
});  

// 优化方式：  
$(function() {  
  // 合并代码块1和2  
  initializeComponents();  
  bindEvents();  
});

2. 处理动态加载的元素

如果通过 AJAX 或其他方式动态插入元素，直接绑定事件可能无效。此时需使用 事件委托：

$(document).ready(function() {  
  // 委托给父元素，确保新添加的 .dynamic-btn 也能触发事件  
  $("#parentContainer").on("click", ".dynamic-btn", function() {  
    alert("Dynamic button clicked!");  
  });  
});

原理：事件委托利用了事件冒泡机制，将事件监听器绑定到已存在的父元素上，从而覆盖未来新增的子元素。

性能优化与最佳实践

1. 避免在回调中执行耗时操作

document ready 的回调函数应在 DOM 加载后立即执行，但若在其中放置大量计算或网络请求，可能阻塞页面渲染。建议将耗时任务推迟到 load 事件（即所有资源加载完成后再执行）：

// 适用于轻量级初始化  
$(document).ready(function() {  
  // 初始化 UI 组件  
});  

// 适用于耗时操作  
$(window).on("load", function() {  
  // 加载外部数据或执行复杂计算  
});

2. 代码组织建议

  • 模块化：将功能拆分为独立函数，通过 document ready 调用： 
    function setupNavigation() {  
  // 菜单初始化代码  
}  
function bindFormEvents() {  
  // 表单事件绑定  
}  

$(function() {  
  setupNavigation();  
  bindFormEvents();  
});
  • 避免全局变量：通过闭包或立即执行函数（IIFE）减少命名冲突： 
    (function($) {  
  $(function() {  
    // 代码逻辑  
  });  
})(jQuery);

结论

jQuery document ready 是前端开发中解决 DOM 加载时序问题的核心工具。通过理解其背后的机制，开发者可以避免因“时间差”引发的常见错误，并通过合理组织代码提升项目可维护性。

从简单的按钮绑定到复杂的动态交互场景，这一机制始终扮演着“施工监督员”的角色，确保代码在正确时机执行。随着开发经验的积累，建议逐步探索原生 JavaScript 的替代方案，但 document ready 仍是快速上手和团队协作中的高效选择。

掌握这一知识点后，不妨尝试以下实践：

  1. 将现有项目中未使用 document ready 的代码进行改造。
  2. 使用事件委托实现一个动态加载表格的交互功能。
  3. 对比 jQuery 与原生 JavaScript 在 DOMContentLoaded 事件上的性能差异。

通过不断实践，你将更深刻地理解这一机制的价值，并在实际开发中游刃有余地运用它。

最新发布

查看更多文章