jQuery DOM 操作

选中元素只是第一步，真正干活的是改它——换文字、改样式、加 class、增删元素。jQuery 把这些日常操作设计得异常简洁，是它最大的强项。本章把 DOM 操作全过一遍。

1. 取值 / 赋值：text、html、val

jQuery 最经典的设计：同一个方法名，带参数是赋值，不带参数是取值。三种方法对应三类内容——纯文本、HTML、表单值。

// 取值 / 赋值二合一:同一个方法,带参数是赋,不带参数是取
const t = $("#title").text();          // 取文本(纯文本,不含标签)
$("#title").text("新标题");              // 设文本(特殊字符自动转义)

const h = $(".box").html();            // 取 HTML(含标签)
$(".box").html("<b>新内容</b>");         // 设 HTML(标签会被解析)

const v = $("#name").val();            // 取输入框/选择框/文本域的值
$("#name").val("小明");                 // 设值

// 关键差异:取值只返回"第一个匹配元素"的值,赋值作用于"所有匹配元素"
console.log($("li").text());          // 把所有 <li> 的文本拼成字符串
$("li").text("都改成一样");             // 所有 <li> 文本都变
$("li").text(function (i, oldText) {  // 用回调,每个元素分别处理
  return i + ". " + oldText;
});

记住一个重要差异：取值只返回第一个匹配元素的值（因为只能返回一个），而赋值会作用于所有匹配元素（隐式迭代）。要对每个元素分别处理，用回调或 .each()。

2. 属性：attr、prop、data

这三个方法是新手最容易混淆的——它们看起来都"操作属性"，但语义完全不同。attr 操作 HTML 标签上写的特性，prop 操作 DOM 节点的实时状态，data 是 jQuery 自己的数据缓存。

// 属性:.attr() 取/设 HTML 特性(写在标签上的)
$("#pic").attr("src");                 // 取 src
$("#pic").attr("src", "/new.png");     // 设 src
$("#pic").attr({ src: "/new.png", alt: "图片" }); // 同时设多个

// .prop() 取/设 DOM 属性(节点的真实状态)
$("#agree").prop("checked");          // true / false(实时状态)
$("#agree").prop("checked", true);    // 勾选

// .data() 存取自定义数据(不写 HTML,存在内存里)
$("#box").data("uid", 12345);         // 设
$("#box").data("uid");                // 取 → 12345
$("#box").removeData("uid");          // 删

// 三者区别(高频面试题):
//  attr 操作 HTML 标签上写的特性,初值就固定了
//  prop 操作 DOM 节点的实时状态(checked/disselected 等)
//  data 是 jQuery 自己的数据缓存,不修改 DOM
// 例:checkbox 取消勾选后,
//   $("#cb").attr("checked")  → "checked"(还是初值)
//   $("#cb").prop("checked")  → false(实时状态,这是你要的)

最经典的坑：checkbox 取消勾选后，attr("checked") 还是返回初值 "checked"，而 prop("checked") 返回 false——后者才是你要的实时状态。凡是布尔属性（checked、disabled、selected），都用 prop。

3. 样式与类

jQuery 的 .css() 方法既能取样式也能设样式，单条用两个参数，多条用对象。类操作则有四个对应方法：增、删、切换、判断。

// 单条样式
$("#title").css("color");              // 取(只返回第一个的计算值)
$("#title").css("color", "red");       // 设

// 多条样式用对象
$("#title").css({
  color: "red",
  fontSize: "24px",      // 注意:CSS 的 font-size 在 JS 里写成驼峰 fontSize
  "background-color": "#eee",  // 也可以用引号包起来写连字符
});

// 值可以是函数(类似回调,支持动画基础)
$("li").css("font-size", function (i) {
  return (12 + i * 2) + "px";          // 每个 li 字号递增
});

// 类操作:增 / 删 / 切换 / 判断
$("#btn").addClass("primary large");    // 加多个 class,空格分隔
$("#btn").removeClass("old disabled");  // 删多个
$("#btn").toggleClass("active");        // 有就删,没有就加
$("#btn").hasClass("primary");          // 判断是否有某 class → true/false

注意 CSS 属性名的写法：JS 里推荐用驼峰（fontSize），但用引号包起来时连字符（font-size）也行。类操作推荐尽量用类，少用 .css——类更易维护、性能更好、能让 CSS 和 JS 解耦。

4. 创建与插入元素

动态往页面里加内容是 jQuery 的另一大强项。创建元素只要把 HTML 字符串塞进 $()，插入位置用一组语义清晰的方位方法。

// 创建新元素:把 HTML 字符串塞进 $()
const $li = $("<li>新的一项</li>");
const $div = $('<div class="note">提示</div>');

// 也可以创建空元素再设属性
const $img = $("<img />").attr({
  src: "/a.png",
  alt: "图片",
}).css("width", "100px");

// 插入到页面四种方位
$("#list").append($li);      // 作为 #list 的最后一个子
$("#list").prepend($li);     // 作为 #list 的第一个子
$("#list").before($li);      // 作为兄弟,插在 #list 前面
$("#list").after($li);       // 作为兄弟,插在 #list 后面

// 反向写法(把元素插到目标里)
$($li).appendTo("#list");    // 等价 .append
$($li).prependTo("#list");  // 等价 .prepend
$($li).insertBefore("#list");
$($li).insertAfter("#list");

// 包裹元素
$(".box").wrap("<div class='wrap'></div>");   // 每个外面套一层
$(".box").wrapAll("<div></div>");              // 所有共套一层
$(".box").unwrap();                            // 移除父元素

append、prepend、before、after 这四个方位词组合起来能完成任意位置的插入。注意正向写法（父元素接收）和反向写法（新元素主动）语义相同，选你顺手的即可。

5. 删除、复制、替换、遍历

除了加，还要会删、改、复制。jQuery 提供了完整的一套方法，配合 .each() 能对批量元素做处理。

// 删除元素
$("#old").remove();        // 元素本身 + 子元素 + 事件监听 全部移除
$("#old").detach();        // 同 remove,但保留事件监听(可重新插回)
$("#box").empty();         // 只清空子节点,元素本身保留
$("#box").unwrap();        // 移除父元素(自己变成上一级的子)

// 复制元素
$(".box").clone();              // 浅复制(不复制事件监听)
$(".box").clone(true);          // 深复制(连同事件监听一起复制)

// 替换元素
$("#old").replaceWith("<p>新内容</p>");
$("<p>新内容</p>").replaceAll("#old");   // 反向写法

// 遍历 + 修改(最经典用法)
$("li").each(function (i) {
  const $li = $(this);
  $li.text("第 " + (i + 1) + " 项");
});

remove 和 detach 的区别要记住：前者彻底删除（含事件监听），后者保留监听以便后续重新插入。clone(true) 同理——参数 true 表示深复制事件，做"复制一个带交互的卡片"时必加。

6. 实战：动态待办列表

把前面学的串起来——做一个最常见的待办事项列表：输入框 + 添加按钮 + 列表项 + 删除按钮。这正是 jQuery 的"黄金场景"。

<!-- 简单的待办列表 -->
<input id="new-todo" type="text" placeholder="输入待办..." />
<button id="add">添加</button>
<ul id="todos"></ul>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $(function () {
    // 添加
    $("#add").on("click", function () {
      const text = $("#new-todo").val().trim();
      if (!text) return;
      const $li = $(
        '<li>' +
          '<span class="text"></span>' +
          ' <button class="del">删除</button>' +
        '</li>'
      );
      $li.find(".text").text(text);   // 用 .text 自动转义,防 XSS
      $("#todos").append($li);
      $("#new-todo").val("").focus();
    });

    // 事件委托:后加的 li 也能删
    $("#todos").on("click", ".del", function () {
      $(this).closest("li").remove();
    });
  });
</script>

关键点：用 on("click", "li .del", fn) 做事件委托，后加的列表项也能删除；用 $("<li>") 动态创建元素并 appendTo 插入。这就是十年前 jQuery 写 SPA 的标准范式。

小结

DOM 操作是 jQuery 的高频战场：.text/.html/.val 取赋内容、.attr/.prop/.data 操作属性、.css/.addClass 改样式、.append/.remove/.clone 增删元素。把这十来个方法用熟，你就能用 jQuery 写出绝大多数页面交互。下一篇我们看 jQuery 的另一强项——动画效果。

← 上一篇 jQuery 事件

下一篇 jQuery 动画效果 →