引入jquery.js后怎么写代码？$(document).ready()基础用法

技术指南 · 适用环境：标准 Web 页面 · 基础库支持：jQuery 1.x / 2.x / 3.x

图 0：jQuery 资源引入与 DOM Ready 执行流水线全景图

一、引入 jQuery 库的规范顺序与位置

在书写具体的交互脚本前，必须首先确保 jQuery 基础库文件已成功载入，且载入顺序符合浏览器的解析规则。在 HTML 规范中，浏览器执行 JavaScript 是单线程同步进行的，代码如果放在了库文件之前，全局变量 $ 尚未初始化，便会立即抛出未定义异常。

1. 引入文件的方式与路径

引入 jQuery 通常有两种途径：使用本地相对路径，或使用公共 CDN（内容分发网络）服务。无论采取哪一种方式，都要保证网络请求返回状态为 200 OK：

• 本地引入：将下载好的 jquery.min.js 放置在项目的脚本目录（如 js/vendor/jquery.min.js），使用相对路径引入。
• CDN 引入：直接使用官方或各大公共库加速节点（如 BootCDN、cdnjs），省去本地文件管理。

2. 脚本标签的排列规则

请牢记一条基本原则：自定义脚本标签必须位于 jQuery 库标签的下方。在实际工程中，最推荐的放置位置是 HTML 文档 </body> 结束标签的前方。这样做既不会阻塞上方正文内容的绘制，又能确保正文所有 DOM 标签均已被浏览器词法分析器处理完毕。

图 1：引入 jQuery 到编写首行交互代码的 4 个规范步骤

二、$(document).ready() 的基础语法与标准写法

当 jQuery 库成功引入后，浏览器全局环境中便被赋予了两个核心符号：window.jQuery 与它的常用缩写 window.$。此时即可书写 $(document).ready() 来开启业务编程。

1. 经典标准写法剖析

最标准且语义最明确的书写语法如下：

// 经典完整写法：监听 document 对象的 ready 事件
$(document).ready(function() {
    // 此时 HTML 页面中的所有标签均已生成对应的内存节点
    console.log("DOM 结构构建就绪，可以安全操作节点！");
});

这行语句内部包含三个要素：

1. $(document)：将原生的 DOM 顶层根对象 document 传递给 $ 函数，将其包装为一个 jQuery 原型对象。
2. .ready(...)：调用 jQuery 对象提供的 ready 方法，该方法专门用于监听文档的就绪状态。
3. function() { ... }：向其传递一个回调函数，浏览器 DOM 构建完成后会自动触发并执行该函数体内的指令。

2. 官方推荐的极致简写写法

由于 $(document).ready(...) 在日常项目中的调用频次极高，jQuery 官方设计了更紧凑的重载机制：直接向 $() 传入一个匿名函数。只要参数是函数类型，jQuery 内部会自动将其转发至 ready() 方法。

// 官方强烈推荐的简写方式（现代开发唯一通用形态）
$(function() {
    // 与 $(document).ready() 效果 100% 等价
    console.log("简写方式生效");
});

图 2：jQuery ready 语法的形态演进与防冲突闭包结构

3. 编写你的第一行 DOM 交互代码（完整可运行示例）

理解了包装语法后，所有的业务逻辑（修改文字、切换样式、监听点击等）都必须填充在花括号内部。以下是一个可以直接在本地浏览器中运行的完整 HTML 单文件范例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>jQuery ready 示例</title>
  <style>
    .active { color: #AD8060; font-weight: bold; }
    .panel { padding: 12px; background: #F2F6FA; border: 1px solid #CCDCE7; }
  </style>
</head>
<body>
  <div class="panel">
    <p id="status-text">等待初始化...</p>
    <button id="trigger-btn">点击更新状态</button>
  </div>

  <!-- 第一步：引入 jQuery 库 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

  <!-- 第二步：编写就绪交互脚本 -->
  <script>
    $(function() {
      // 1. 修改现有节点文本与样式
      $('#status-text').text('系统已就绪，等待用户操作').addClass('active');

      // 2. 为按钮绑定点击监听器
      $('#trigger-btn').on('click', function() {
        $('#status-text').text('按钮已被点击，操作响应成功！');
      });
    });
  </script>
</body>
</html>

三、运行原理：$(document).ready() 与 window.onload 的本质区别

初学者常常困惑：原生 JavaScript 已经有了 window.onload，为什么 jQuery 还要专门提供一个 ready()？二者到底有什么不同？

1. 触发时机的本质差异

浏览器的网页装载是一个由浅入深的流水线过程：

• DOM 树构建（DOM Ready）：浏览器解析 HTML 标签并将所有元素转换成内存节点树。这一步耗时极短，通常在几十毫秒内完成。一旦该阶段完成，$(document).ready() 便会立即触发执行。
• 全部资源装载（Window Onload）：在 DOM 树就绪后，浏览器还要依次向服务器请求页面引用的所有外部高清图片、视频、第三方外链 iframe、CSS 字体文件等。只有当最后一张图片完全下载解码完毕，window.onload 才会触发。

如果你的页面包含大量商品图片或背景图，在弱网环境下，window.onload 可能要等待 3 到 8 秒才能触发。如果把事件绑定逻辑写在 window.onload 中，用户进入页面后看到按钮并点击，此时由于脚本还没触发挂载，按钮将毫无反应，产生明显的“页面卡死”假象。而 $(document).ready() 在页面初现的第一时间即可响应点击，极大地优化了交互体验。

图 3：页面生命周期时序对比：$(document).ready() 与 window.onload

2. 多次绑定的覆盖性区别

在较大型的前端项目中，不同功能模块通常拆分在不同的 .js 文件中：

// 模块 A 的脚本（file_a.js）
$(document).ready(function() {
    console.log("模块 A 初始化完成");
});

// 模块 B 的脚本（file_b.js）
$(document).ready(function() {
    console.log("模块 B 初始化完成");
});

$(document).ready() 支持无限次并发声明，内部维护了一个事件观察者队列，所有注册的方法会严格按照声明顺序依次执行，各模块互不影响。而传统原生的 window.onload = fn 属于对象属性赋值，如果两个文件都使用了该赋值语法，后加载的文件会直接将前一个模块的初始化函数彻底覆盖，造成严重的功能丢失隐患。

四、进阶工程实践：防止 $ 符号被第三方库冲突覆盖

在企业级旧项目维护或 WordPress、Typecho 等内容管理系统中，页面往往不仅引入了 jQuery，还可能引入了 Prototype.js、MooTools 或第三方插件，这些库同样抢占了全局的 $ 变量。

其核心语法结构如下：

// 即便执行了 jQuery.noConflict() 释放了全局的 $
jQuery.noConflict();

// 外层使用原生全称 jQuery()，在回调函数内部注入局部 $ 变量
jQuery(function($) {
    // 在本函数作用域内部，依然可以自由自在地使用 $ 符号书写代码
    $('#panel').fadeIn();
    $('.item').css('background', '#F2F6FA');
});

// 在闭包外层，$ 变量安全归还给其他类库，绝无全局污染

利用 JavaScript 作用域链屏蔽机制，回调函数内部的参数名 $ 屏蔽了外部全局变量，既规避了库冲突崩溃，又让开发者无需改写成冗长的 jQuery('#panel')，是封装独立组件与插件时的标准防御姿态。

五、新手开发高频问题排查决策树

在实际编写代码时，开发者最常遇到几类由于对生命周期或加载顺序理解不深导致的异常。根据以下排查树可以快速自检并修复。

图 4：jQuery 异常排查决策树与上线前工程自检规范

1. 控制台报错：“Uncaught ReferenceError: $ is not defined”

这是出现频次最高的新手报错。遇到此错误无需查看具体业务逻辑，原因 100% 产生在库加载环节：

• 排查路径 A：打开浏览器开发者工具（按 F12）切换到 Network（网络）选项卡，刷新页面，查找 jquery.min.js。如果状态码为 404、500 或红字 Failed，说明引用的相对路径错误或 CDN 节点阻断，请核正路径。
• 排查路径 B：检查 HTML 源码中 <script> 标签的上下次序。如果写有业务逻辑的代码块出现在 jquery.js 之前，将导致脚本尝试读取尚未挂载的变量，必须将业务代码调整到 jQuery 之后。

2. 选择器没有命中目标（length 为 0）

在控制台打印 console.log($('.my-item').length) 如果返回 0，说明选择器没有查找到任何匹配节点。通常有两个原因：

• 原因一：脱离了 $(document).ready()，代码直接写在 <head> 中。此时浏览器尚未读到页面下方的 .my-item 标签，查找自然为空。
• 原因二：目标元素是通过 Ajax 请求异步拉取并动态插入页面的。在页面初始化 DOM 就绪的瞬间该元素尚不存在，因此初始执行的查询或事件监听无法挂在它身上。

六、核心用法总结与速查卡片

总结而言，在引入 jquery.js 后编写代码的核心准则就是“先引库、再就绪、后逻辑”。养成在 $(function() { ... }) 中书写业务代码的习惯，不仅能够保证 DOM 树安全可寻，还能有效利用函数作用域保护内部变量，使前端交互脚本健壮、高效且具备良好的可维护性。