一、前言

在网页开发中，我们经常需要对页面上的文本内容进行操作，例如动态修改段落文字、读取用户输入框的内容、更新按钮文本等。jQuery 提供了简洁而强大的方法来处理这些常见的文本操作需求。

本文将带你全面了解 jQuery 中用于操作文本内容的三个核心方法：

✅ html() —— 获取或设置第一个匹配元素的 HTML 内容
✅ text() —— 获取所有匹配元素的文本内容并合并成一个字符串
✅ val() —— 获取或设置表单字段的当前值

并通过完整的代码示例帮助你快速上手并掌握 jQuery 文本操作的精髓。

二、jQuery 文本操作概述

方法名	用途	示例
`.html()`	获取/设置第一个匹配元素的 HTML 内容（含标签）	`$('div').html('<p>Hello</p>')`
`.text()`	获取所有匹配元素的纯文本内容（自动合并，自动解码）	`$('p').text()`
`.val()`	获取或设置表单控件的值（如 input、select、textarea）	`$('#username').val()`

三、`.html()` 方法详解

✅ 获取 HTML 内容

<div id="content"><p>这是一个段落。</p>
</div><script>
$(document).ready(function(){const htmlContent = $('#content').html();console.log(htmlContent); // 输出：<p>这是一个段落。</p>
});
</script>

✅ 设置 HTML 内容

$('#content').html('<h1>新的标题</h1>');

⚠️ 注意事项：

只作用于第一个匹配元素
会覆盖原有内容
可以插入任意 HTML 字符串（包括脚本）

四、`.text()` 方法详解

✅ 获取纯文本内容

<p>第一段</p>
<p>第二段</p><script>
const allText = $('p').text();
console.log(allText); // 输出："第一段第二段"
</script>

✅ 设置纯文本内容（自动转义 HTML）

$('#content').text('<strong>安全的文本内容</strong>');
// 输出为：<strong>安全的文本内容</strong> 而不是加粗文本

⚠️ 特点：

自动合并多个元素内容
自动解码 HTML 实体
不会执行 HTML 标签（更安全）

五、`.val()` 方法详解

✅ 获取表单元素的值

<input type="text" id="username" value="张三"><script>
const username = $('#username').val();
console.log(username); // 输出：张三
</script>

✅ 设置表单元素的值

$('#username').val('李四');

✅ 获取下拉菜单选中值

<select id="color"><option value="red">红色</option><option value="blue">蓝色</option>
</select><script>
const selectedColor = $('#color').val();
console.log(selectedColor); // 输出选中项的 value 值
</script>

✅ 获取复选框组的选中值（数组）

<input type="checkbox" name="fruit" value="apple"> 苹果
<input type="checkbox" name="fruit" value="banana"> 香蕉
<input type="checkbox" name="fruit" value="orange"> 橘子<script>
const selectedFruits = $('input[name="fruit"]:checked').map(function(){return $(this).val();
}).get();console.log(selectedFruits);
</script>

六、三者区别总结

方法	用途	是否包含 HTML	是否合并多个元素	是否自动转义 HTML	支持表单元素
`.html()`	获取/设置 HTML 内容	✅ 是	❌ 否（只作用于第一个）	❌ 否	❌ 否
`.text()`	获取/设置纯文本内容	❌ 否（自动转义）	✅ 是	✅ 是	❌ 否
`.val()`	获取/设置表单值	❌ 否	❌ 否	❌ 否	✅ 是

七、实际开发中的应用场景

✅ 场景1：动态更新提示信息

<div id="message"></div>
<button id="updateBtn">更新提示</button><script>
$('#updateBtn').click(function(){$('#message').text('您点击了按钮！');
});
</script>

✅ 场景2：富文本编辑器预览功能

<textarea id="editor"></textarea>
<div id="preview"></div>
<button id="previewBtn">预览</button><script>
$('#previewBtn').click(function(){$('#preview').html($('#editor').val());
});
</script>

✅ 场景3：验证输入框内容

<input type="text" id="email" placeholder="请输入邮箱">
<button id="checkBtn">验证</button>
<p id="errorMsg"></p><script>
$('#checkBtn').click(function(){const email = $('#email').val();if (!email.includes('@')) {$('#errorMsg').text('请输入有效的邮箱地址');} else {$('#errorMsg').text('');}
});
</script>

八、注意事项与最佳实践

场景	建议
插入 HTML 内容时	✅ 使用 `.html()`，注意 XSS 安全问题
显示纯文本内容时	✅ 使用 `.text()`，避免 HTML 注入
获取表单数据时	✅ 使用 `.val()`，兼容各种控件类型
多个元素统一赋值时	✅ 使用链式调用提升可读性
不要混用 `.html()` 和 `.val()`	✅ 表单控件请使用 `.val()`
动态拼接内容时	✅ 推荐使用模板引擎或函数参数形式