jquery.js（保姆级教程）

什么是 jquery.js？它为何在前端开发中占据一席之地？

在网页开发的世界里，JavaScript 是构建动态页面的基石，但原生 JavaScript 在操作 DOM（文档对象模型）时常常显得繁琐、冗长，尤其在处理浏览器兼容性问题时，开发者容易陷入“写一遍，改一遍”的困境。这时，jquery.js 就像一位贴心的助手，帮你把复杂的事情变得简单。

jquery.js 是一个轻量级的 JavaScript 库，由 John Resig 于 2006 年发布。它的核心目标是“写得更少，做得更多”（Write Less, Do More）。通过提供简洁的 API，它让开发者可以更轻松地操作 HTML 元素、处理事件、动画效果、AJAX 请求等任务，而无需关心底层的浏览器差异。

你可以把 jquery.js 想象成一个“万能工具箱”：当你需要拧一颗螺丝，不需要自己做螺丝刀，直接从箱子里拿出一个合适的工具，一拧就搞定。它屏蔽了底层的复杂性，让你专注于业务逻辑本身。

如何引入 jquery.js 并开始使用？

引入 jquery.js 非常简单。你可以通过 CDN（内容分发网络）快速加载，这样既节省本地资源，又保证了加载速度。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>使用 jquery.js 的第一步</title>
  <!-- 引入 jquery.js 的 CDN 链接 -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="myBtn">点击我</button>
  <script>
    // 当文档完全加载后，执行以下代码
    $(document).ready(function() {
      // 为按钮绑定点击事件
      $("#myBtn").click(function() {
        alert("按钮被点击了！");
      });
    });
  </script>
</body>
</html>

代码注释说明：

$(document).ready(...)：这是 jquery.js 的核心入口函数，确保页面 DOM 结构完全加载后再执行代码。避免出现“元素不存在”的错误。

$("#myBtn")：这是 jquery 的选择器语法，# 表示 ID 选择器，等价于 document.getElementById("myBtn")，但更简洁。

.click(...)：为元素绑定点击事件，无需手动调用 addEventListener。

通过这段代码，我们实现了“点击按钮弹出提示”的功能，仅用几行代码就完成了原本可能需要十几行原生 JavaScript 的任务。

选择器：jquery.js 的“眼睛”

在 jquery.js 中，选择器是所有操作的起点。它让你能精准定位页面上的元素，就像用望远镜锁定目标。

常见的选择器类型包括：

ID 选择器：#id，如 $("#myDiv") 选择 id 为 myDiv 的元素。
类选择器：.class，如 $(".highlight") 选择所有 class 为 highlight 的元素。
标签选择器：tag，如 $("p") 选择所有 <p> 标签。
属性选择器：[attr=value]，如 $("[type='button']") 选择 type 属性为 button 的元素。
组合选择器：selector1, selector2，如 $("#btn, .nav-item") 选择多个元素。

实际案例：批量操作多个元素

假设你有一个列表，希望点击任意一项时，该项变红，其他项恢复默认颜色。

<ul>
  <li class="item">苹果</li>
  <li class="item">香蕉</li>
  <li class="item">橙子</li>
</ul>

$(document).ready(function() {
  // 为所有 class 为 item 的元素绑定点击事件
  $(".item").click(function() {
    // 先移除所有项的红色样式
    $(".item").removeClass("active");
    // 再为当前点击项添加红色样式
    $(this).addClass("active");
  });
});

代码注释说明：

$(this)：在事件处理函数中，this 指向当前触发事件的 DOM 元素，jquery 将其包装成一个 jQuery 对象，方便链式调用。

.addClass("active")：为元素添加 CSS 类名，实现样式变化。

.removeClass("active")：移除类名，用于清除之前的状态。

这种写法简洁明了，避免了手动遍历元素的繁琐过程。

事件处理：让网页“活”起来

网页不只是静态内容的展示，它应该能响应用户的操作。jquery.js 提供了强大的事件绑定机制，让交互变得轻松。

除了 .click()，还有许多常用事件：

.dblclick()：双击
.hover()：鼠标悬停
.focus() / .blur()：聚焦/失去焦点
.submit()：表单提交
.change()：表单值改变

实用案例：表单输入实时验证

假设你有一个用户名输入框，希望在用户输入时，实时检查长度是否大于 3 个字符。

<input type="text" id="username" placeholder="请输入用户名" />
<div id="msg"></div>

$(document).ready(function() {
  // 监听输入框的输入事件
  $("#username").on("input", function() {
    const value = $(this).val(); // 获取输入框的值
    const msgDiv = $("#msg");

    if (value.length < 3) {
      msgDiv.text("用户名至少 3 个字符");
      msgDiv.css("color", "red"); // 设置文字颜色为红色
    } else {
      msgDiv.text("用户名长度符合要求");
      msgDiv.css("color", "green"); // 设置文字颜色为绿色
    }
  });
});

代码注释说明：

.on("input", ...)：绑定 input 事件，当用户输入时立即触发，比 keyup 更及时。

$(this).val()：获取当前输入框的值，等价于 element.value。

.css("color", "red")：动态修改元素的 CSS 样式，无需手动操作 class。

这种实时反馈机制极大提升了用户体验，是现代 Web 应用的标配。

操作 DOM：改变网页内容与结构

jquery.js 最强大的能力之一，就是对 DOM 的灵活操作。你可以轻松地添加、删除、替换元素，或者修改内容。

常用 DOM 操作方法

方法	作用	示例
`.html()`	获取或设置元素的 HTML 内容	`$("#content").html("<p>新内容</p>")`
`.text()`	获取或设置纯文本内容	`$("#title").text("新标题")`
`.append()`	在元素内部末尾添加内容	`$("#list").append("<li>新项目</li>")`
`.prepend()`	在元素内部开头添加内容	`$("#list").prepend("<li>第一项</li>")`
`.remove()`	删除元素	`$("#oldItem").remove()`
`.addClass()` / `.removeClass()`	添加或移除类名	`$("#btn").addClass("disabled")`

实际案例：动态生成评论列表

假设你要实现一个“发表评论”的功能，用户输入后，评论立刻显示在页面上。

<div id="comments">
  <h3>评论列表</h3>
  <ul id="commentList"></ul>
</div>
<input type="text" id="commentInput" placeholder="输入你的评论" />
<button id="submitBtn">发表</button>

$(document).ready(function() {
  // 点击发表按钮时
  $("#submitBtn").click(function() {
    const input = $("#commentInput");
    const content = input.val().trim(); // 去除首尾空格

    if (content === "") {
      alert("评论内容不能为空");
      return;
    }

    // 在评论列表中添加新评论
    $("#commentList").append(`
      <li class="comment">
        <strong>用户</strong>：${content}
        <small style="color: #999; margin-left: 10px;">${new Date().toLocaleString()}</small>
      </li>
    `);

    // 清空输入框
    input.val("");
  });
});

代码注释说明：

trim()：去除用户输入前后多余的空格，防止空输入被误提交。

`...`：模板字符串，支持变量插值，让动态内容拼接更清晰。

new Date().toLocaleString()：获取当前时间，用于显示评论时间。

这个例子展示了 jquery.js 如何让动态内容生成变得简单，无需手动创建 DOM 节点或操作文档碎片。

总结：jquery.js 的价值与未来

尽管近年来框架如 Vue 3.0、React 等在前端开发中愈发流行，但 jquery.js 依然具有不可替代的价值。它轻量、易学、兼容性好，特别适合中小型项目、快速原型开发或维护老旧系统。

尤其对于初学者而言，jquery.js 是理解 DOM 操作、事件处理和前端逻辑的绝佳起点。它用简洁的语法，降低了学习门槛，让你能更快地看到成果，建立信心。

而对中级开发者来说，掌握 jquery.js 能帮助你快速理解现代框架背后的原理——比如虚拟 DOM、响应式更新等，本质上都源于对 DOM 的高效操作。

在今天的 Web 生态中，jquery.js 依然活跃在许多项目中，它不是过时的技术，而是一块坚实的基石。无论你未来走向哪个方向，理解它，都是一段值得的投资。

如果你正在学习前端开发，不妨从引入 jquery.js 开始，写一个简单的交互页面，感受“一行代码改变世界”的乐趣。