← 返回目录

12. jQuery DOM 增删改查

原生 JS 改 DOM 很啰嗦：要 document.querySelector、要写 for 循环批量改、要自己拼节点。jQuery 把这些全封装成了一个方法搞定一类操作：text 改文字、html 改 HTML、append 加节点、remove 删节点——不用手写循环，选一堆元素一键全改。

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

12.2 知识点讲解

① 改内容：text / html / val

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

// text：只改文字，标签会被当成纯文本
$("div").text("新文字"); // 不传参=读，传参=写

// html：可以写 HTML 标签
$("div").html("<b>加粗文字</b>"); // 标签会真的渲染成加粗

// val：读写表单输入框的值
$("input").val("默认值"); // 不传参=读输入框内容

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

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

// attr：读/写普通属性（比如 src、href）
$("img").attr("src", "1.jpg"); // 不传第二参=读，传了=写

// prop：读写表单的布尔属性（checked、disabled）
$("#checkbox").prop("checked", true); // 推荐用这个而不是 attr

// 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 读的是当前实时状态。

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

// 先创建一个新元素
let $p = $("<p>新段落</p>");

// append：插入到 .box 内部的最后面
$(".box").append($p);

// prepend：插入到 .box 内部的最前面
$(".box").prepend($p);

// after：插入到 .box 外面，作为下一个兄弟
$(".box").after($p);

// before：插入到 .box 外面，作为上一个兄弟
$(".box").before($p);

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

④ 删节点：remove 和 empty 的区别

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

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

⑤ jQuery 对象和原生 DOM 互转

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

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

// 原生 DOM → jQuery 对象
let dom = document.querySelector("div"); // 这是原生元素
let $d = $(dom); // 用 $ 包一下就变成 jQuery 对象了
$d.text("jQuery 修改"); // 现在能调 jQuery 方法了

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

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

可能在什么地方用：

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

常见的问题：

① jQuery 对象和原生对象混用方法，报错 undefined；② append 和 after 搞混，插错位置；③ prop 和 attr 用错，checkbox 状态不对；④ 想清空列表用了 remove 把容器也删了。

解决思路：

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

12.3 课后作业（融入本节）