jQuery 设置

jQuery 的设置（修改）与"捕获"恰好相反：text()、html()、val()、attr() 传入参数时，就从"读取"变成"写入"，直接改写页面上元素的内容或属性。

本节沿用上节的 HTML：一个带加粗字的段落 <p id="p1">、一个输入框 <input id="ipt">、一个链接 <a id="a1">。

text() 设置文本

text(新内容) 会覆盖元素的全部文本，且传入的 HTML 标签会被当作普通文字：

$("#p1").text("新的<b>文本</b>");
// 效果：段落显示为：新的<b>文本</b>，标签不会被解析

安全提示：展示用户输入的内容时优先用 text()，可防止 XSS 注入。

html() 设置 HTML

html(新内容) 会解析传入的 HTML 标签并渲染：

$("#p1").html("新的<b>加粗文本</b>");
// 效果：段落显示为：新的加粗文本（"加粗"二字被加粗显示）

注意：html() 会把原内容整个替换掉，不只是追加。

text() 与 html() 写值对比

方法	写入内容	标签是否被解析	用途
text()	纯文本	否，原样显示	写入普通文字、用户输入
html()	HTML 字符串	是，渲染成元素	写入带格式内容、动态模板

val() 设置表单值

val(值) 给表单元素赋值，常用于表单重置或编辑回填：

$("#ipt").val("填写后的新值");
// 效果：输入框中显示：填写后的新值

适用对象：input、select、textarea；对 select 传入要选中的 option 的 value 即可改变下拉框选中项。

attr() 设置属性值

attr(属性名, 属性值) 修改单个属性；也可传入对象一次设置多个属性：

$("#a1").attr("href", "https://example.com/page1");          // 改一个
$("#a1").attr({ "href": "https://example.com/page2", "title": "示例页面" });
// 效果：链接地址先改为 page1，又连同 title 一起改为 page2

回调函数写法

四个方法都支持传入函数：function(index, 原值)，返回值作为新内容，便于批量加工：

$("li").text(function (i, oldText) {
    return (i + 1) + ". " + oldText; // 给每个 li 前加上序号
});
// 效果：三个 li 变成：1. 苹果 2. 香蕉 3. 橘子

小结

设置就是"写"：text()/html() 改内容、val() 改表单值、attr() 改属性，还能用回调函数按原值批量生成新值。捕获与设置配对使用，即可实现"读旧值→算新值→写回"的完整流程。