4. DOM 操作

这是什么：DOM（Document Object Model，文档对象模型） = 浏览器把网页结构变成的一棵对象树，标签、文本、属性都能当成节点来改。

为什么用：上一章我们能选中元素了，但改内容、换样式、插删节点仍要写一长串原生代码。jQuery 把这些增删改查都封装成短方法，页面能动的部分全靠它。

如何用：本章分内容、属性样式、元素三块来学，先用 .text() 读出一段文字，再试 .append() 追加和 .remove() 删除。

4.1 内容操作（text、html、val）

jQuery 提供了 3 个常用方法来获取或设置元素的内容。

方法	用途	说明
`.text()`	获取/设置元素的纯文本内容	会忽略 HTML 标签
`.html()`	获取/设置元素的 HTML 内容	会保留 HTML 标签
`.val()`	获取/设置表单元素的值（value）	适用于 `input`、`textarea`、`select` 等表单控件

获取内容

<div id="box">你好，<strong>jQuery</strong></div>
<input type="text" id="name" value="小青蛙" />

<script>
  $(function () {
    console.log($('#box').text()); // "你好，jQuery"（纯文本）
    console.log($('#box').html()); // "你好，<strong>jQuery</strong>"
    console.log($('#name').val());  // "小青蛙"
  });
</script>

设置内容

只需要在括号里传入值，就变成「设置」：

$('#box').text('Hello World');        // 设置纯文本
$('#box').html('Hello <b>World</b>'); // 设置 HTML
$('#name').val('青蛙编程网');           // 设置输入框的值

4.2 属性操作（attr、prop、removeAttr）

属性（Attribute）是 HTML 标签上的额外信息，比如 href、src、title、disabled 等。

方法	说明
`.attr()`	获取/设置 HTML 属性（attribute）
`.removeAttr()`	移除指定的 HTML 属性
`.prop()`	获取/设置 DOM 属性（property），主要用于布尔属性（如 `checked`、`disabled`、`selected`）

推荐做法：对于布尔类型属性（复选框选中、禁用状态等），优先使用 .prop()；其他属性用 .attr()。

示例：图片链接切换

<a id="link" href="https://jquery.com" target="_blank">jQuery 官网</a>
<img id="pic" src="https://images.pexels.com/photos/23408576/pexels-photo-23408576.jpeg?auto=compress&cs=tinysrgb&w=320" alt="青蛙照片" width="100" />

<script>
  $(function () {
    // 获取属性
    console.log($('#link').attr('href'));
    // 设置属性
    $('#pic').attr('alt', '青蛙特写');
    // 移除属性
    // $('#link').removeAttr('target');
  });
</script>

示例：复选框选中状态

<input type="checkbox" id="agree" /> 我同意

<script>
  $(function () {
    // 设置选中
    $('#agree').prop('checked', true);
    // 获取选中状态（true/false）
    console.log($('#agree').prop('checked'));
  });
</script>

4.3 CSS 样式操作（css、addClass、removeClass、toggleClass）

jQuery 提供了多种方式操作元素的样式。

方式 1：.css() —— 直接操作行内样式

.css() 可以获取单个样式，或设置一个/多个样式。

// 获取样式
console.log($('p').css('color'));

// 设置单个样式
$('p').css('color', 'red');

// 设置多个样式（传对象）
$('p').css({
  color: '#333',
  fontSize: '16px', // 注意：用驼峰命名（font-size → fontSize）
  backgroundColor: '#f5f5f5'
});

方式 2：class 操作（推荐，用于批量样式控制）

直接操作 class 更符合 CSS 设计思想，便于复用和维护。

方法	说明
`.addClass('className')`	给元素添加一个或多个 class
`.removeClass('className')`	移除一个或多个 class
`.toggleClass('className')`	切换 class（有就移除，没有就添加）
`.hasClass('className')`	判断元素是否包含某个 class，返回 true/false

示例：

<style>
  .highlight {
    background: yellow;
    font-weight: bold;
  }
  .red {
    color: red;
  }
</style>

<p id="text">这是一段文字</p>
<button id="toggle">切换高亮</button>

<script>
  $(function () {
    $('#text').addClass('red');
    $('#toggle').click(function () {
      $('#text').toggleClass('highlight');
    });
  });
</script>

推荐优先使用 addClass/removeClass/toggleClass，而不是频繁用 .css() 修改单个样式，这样更利于样式和逻辑分离。

4.4 元素操作（增、删、改、移）

除了修改内容，我们还可以动态地添加、删除、移动 DOM 元素。

4.4.1 添加元素

jQuery 提供了多种插入方式，按插入位置分为 内部插入 和 外部插入。

内部插入（在元素内部添加子元素）：

方法	说明
`.append(content)`	在元素的末尾添加内容（作为最后一个子元素）
`.prepend(content)`	在元素的开头添加内容（作为第一个子元素）
`.appendTo(target)`	把匹配的元素追加到目标元素内部末尾
`.prependTo(target)`	把匹配的元素前置到目标元素内部开头

外部插入（在元素外部添加兄弟元素）：

方法	说明
`.after(content)`	在元素的后面插入兄弟元素
`.before(content)`	在元素的前面插入兄弟元素
`.insertAfter(target)`	把元素插入到目标元素的后面
`.insertBefore(target)`	把元素插入到目标元素的前面

示例：append/prepend

<ul id="list">
  <li>香蕉</li>
  <li>苹果</li>
</ul>
<button id="addEnd">末尾添加</button>
<button id="addStart">开头添加</button>

<script>
  $(function () {
    $('#addEnd').click(function () {
      $('#list').append('<li>橙子</li>');
    });
    $('#addStart').click(function () {
      $('#list').prepend('<li>西瓜</li>');
    });
  });
</script>

append() 接收 HTML 字符串、DOM 元素、jQuery 对象都可以。

4.4.2 删除元素

方法	说明
`.remove()`	删除元素本身及其所有子元素（连同绑定的事件也会被移除）
`.empty()`	清空元素的所有子元素，但保留元素本身
`.detach()`	和 `.remove()` 类似，但保留绑定的事件和数据，适合临时移除后再插回去

示例：

<div id="container">
  <p id="p1">要删除我吗？</p>
  <p id="p2">只是清空内容</p>
</div>

<script>
  $(function () {
    $('#p1').remove(); // 删除 p1 整个元素
    $('#p2').empty();  // 只清空 p2 的内容，p2 标签还在
  });
</script>

4.4.3 替换和复制元素

方法	说明
`.replaceWith(content)`	用新内容替换匹配的元素
`.replaceAll(target)`	用匹配的元素替换目标元素（和 replaceWith 方向相反）
`.clone([withEvents])`	复制元素。`withEvents=true` 表示连同事件一起复制（默认 false）

// 用 <h3>标题</h3> 替换 #old
$('#old').replaceWith('<h3>标题</h3>');

// 复制 #btn，并追加到 body
$('#btn').clone(true).appendTo('body');

4.5 小结

本章学习了 jQuery 对 DOM 的常用操作：

内容：text()、html()、val()（读写分离，传参就是设置，不传参就是获取）
属性：attr()、prop()（布尔属性用 prop）
样式：优先用 addClass/removeClass/toggleClass 管理 class，复杂样式用 .css()
元素：append/prepend 内部添加，after/before 外部添加，remove/empty 删除

下一章，我们将学习 jQuery 的 事件处理，让页面真正能响应用户的操作。