12. jQuery DOM 增删改查

jQuery 增删改查 DOM，链式调用一气呵成。

核心五个：
1. .append() / .prepend()——末尾/开头加
2. .before() / .after()——前/后加
3. .remove() / .empty()——删自己/清空子元素
4. .clone()——克隆
5. .attr() / .prop()——读写属性

坑：attr 拿自定义属性、prop 拿布尔属性（checked）、链式调用会对所有选中元素生效。

12.1 互动演示（增删改查一把梭）

12.2 知识点讲解

1. 改内容：text / html / val

三个方法对应三种"读写内容"：text 只读纯文字（忽略标签）、html 可以读写 HTML 标签、val 读写表单输入框的值。不传参数是"读"，传参数是"写"。

// text：只改文字，标签会被当成纯文本
// 不传参=读，传参=写
$("div").text("新文字");
// html：可以写 HTML 标签
// 标签会真的渲染成加粗
$("div").html("<b>加粗文字</b>");
// val：读写表单输入框的值
// 不传参=读输入框内容
$("input").val("默认值");

如果你想在页面里插入一段带 HTML 标签的内容，用 html 而不是 text——因为 text 会把 <b> 当纯文字显示出来，不会真的加粗。

2. 改属性和类名：attr / prop / addClass / css

// attr：读/写普通属性（比如 src、href）
// 不传第二参=读，传了=写
$("img").attr("src", "1.jpg");
// prop：读写表单的布尔属性（checked、disabled）
// 推荐用这个而不是 attr
$("#checkbox").prop("checked", true);
// addClass / removeClass / toggleClass：操作类名
// 加一个类
$(".box").addClass("active");
// 删一个类
$(".box").removeClass("active");
// 有就删，没有就加
$(".box").toggleClass("active");
// css：改行内样式
// 改一个样式
$(".box").css("width", "200px");
// 改多个
$(".box").css({ width: "200px", background: "red" });

普通属性用 attr，表单布尔属性（checked/disabled）用 prop——因为 attr 读的是 HTML 标签上写的初始值，prop 读的是当前实时状态。

3. 加节点：四种插入位置别搞混

// 先创建一个新元素
// append：插入到 .box 内部的最后面
let $p = $("<p>新段落</p>");
// prepend：插入到 .box 内部的最前面
$(".box").append($p);
// after：插入到 .box 外面，作为下一个兄弟
$(".box").prepend($p);
// before：插入到 .box 外面，作为上一个兄弟
$(".box").after($p);
$(".box").before($p);

append/prepend 是"塞到盒子里面"，after/before 是"站在盒子外面"——位置别搞混。

4. 删节点：remove 和 empty 的区别

// 删除元素本身 + 它里面的所有子元素（全删光）
$(".item").remove();
// 只删里面的子元素，元素本身保留（清空）
$(".box").empty();

如果你想清空一个列表但保留列表本身，用 empty；如果你想连列表一起删了，用 remove。

5. jQuery 对象和原生 DOM 互转

这俩不是一回事！原生 DOM 对象（document.querySelector 出来的）只能调原生 API，jQuery 对象（$ 出来的）只能调 jQuery 方法。想混用？得先转：

// jQuery 对象 → 原生 DOM 元素
// 这是 jQuery 对象
let $div = $("div");
// 方式一：用下标取第 0 个（最常用）
let dom1 = $div[0];
// 方式二：用 get 方法
let dom2 = $div.get(0);
// 现在能调原生方法了
dom1.innerText = "原生修改";
// 原生 DOM → jQuery 对象
// 这是原生元素
let dom = document.querySelector("div");
// 用 $ 包一下就变成 jQuery 对象了
let $d = $(dom);
// 现在能调 jQuery 方法了
$d.text("jQuery 修改");

如果你直接调 $("div").innerText，会拿到 undefined——因为 jQuery 对象上没有 innerText。要先用 [0] 转成原生元素。

⑥ 实战：用在哪 / 常见坑 / 怎么解决

可能在什么地方用：

1. 商品列表渲染：拿到数据后批量 append 节点
2. 表单交互：点击按钮改文字、改样式
3. 动态加列表项、删除项。

常见的问题：

1. jQuery 对象和原生对象混用方法，报错 undefined
2. append 和 after 搞混，插错位置
3. prop 和 attr 用错，checkbox 状态不对
4. 想清空列表用了 remove 把容器也删了。

解决思路：

1. 记住 $ 出来的是 jQuery 集合，要用原生方法就 [0] 取出来
2. 插节点前想清楚是"内部"还是"外部"
3. 布尔属性用 prop
4. 清空用 empty，整个删用 remove。

12.3 课后作业（融入本节）

本页重点