jQuery 设置内容

jQuery - 设置内容和属性

学习如何使用 jQuery 强大的操作方法来动态修改 HTML 元素的内容和属性。

设置内容：text()、html() 和 val()

这三个方法允许你改变选定元素内部的内容或表单字段的值：

• text(content): 设置选定元素的文本内容。任何现有内容（包括 HTML 标记）都将被替换。content 字符串中的 HTML 标签将被视为字面文本。
• html(content): 设置选定元素的 HTML 内容。任何现有内容都将被替换。content 字符串中的 HTML 标签将被浏览器解析并渲染。
• val(value): 设置表单字段（如 <input>、<select> 和 <textarea>) 的值。

示例：使用各种方法设置内容：

// 假设 HTML 结构如下：
// <p id="para1">Original text.</p>
// <div id="div1">Original <em>HTML</em> content.</div>
// <input type="text" id="input1" value="Original value">

$("#btnSetText").click(function() {
  $("#para1").text("This is the new plain text.");
});

$("#btnSetHtml").click(function() {
  $("#div1").html("This is the **new HTML** content.");
});

$("#btnSetValue").click(function() {
  $("#input1").val("New input value");
});

实际用例：更新状态消息、动态加载文章内容、预填充表单字段。

text()、html() 和 val() 的回调函数

这三个方法都接受一个可选的回调函数来动态确定新的内容/值。此函数对每个选定的元素执行一次。

回调函数接收两个参数：

• index: 元素在匹配元素集中的索引位置（从 0 开始）。
• currentValue: 改变前元素的原始文本内容、HTML 内容或值。

函数应返回要为当前元素设置的新的字符串值。

示例：使用回调函数在原始内容前添加内容：

// 假设 HTML 结构如下：
// <p id="p1">First paragraph.</p>
// <p id="p2">Second paragraph.</p>
// <div id="d1">Some <i>HTML</i>.</div>

$("#btnModifyText").click(function() {
  $("#p1, #p2").text(function(index, originalText) {
    return `Paragraph ${index + 1} (Original: ${originalText}) - Updated!`;
  });
});

$("#btnModifyHtml").click(function() {
  $("#d1").html(function(index, originalHtml) {
    return `Original HTML: ${originalHtml} <br> **Updated!**`;
  });
});

设置属性：attr()

jQuery 的 attr() 方法用于设置或改变 HTML 属性的值。

语法：

• 设置单个属性：.attr(attributeName, value)
• 设置多个属性：.attr({ attribute1: value1, attribute2: value2, ... })

示例：改变链接的 href 和 title 属性：

// 假设 HTML 结构如下： <a id="myLink" href="/old-path" title="Old Title">Visit Us</a>

$("#btnUpdateLink").click(function() {
  $("#myLink").attr("href", "https://www.example.com");
});

$("#btnUpdateMultipleAttrs").click(function() {
  $("#myLink").attr({
    "href": "https://www.new-example.com",
    "title": "Visit our New Site!",
    "target": "_blank" // 添加一个新的属性
  });
});

属性 vs. DOM 属性：attr() vs. prop()

理解 HTML 属性（attribute）和 DOM 属性（property）之间的区别非常重要，特别是对于布尔属性或表单元素状态。

• 属性（Attributes）：由 HTML 标记定义（例如，<input type="checkbox" checked="checked">）。attr() 主要处理这些。
• DOM 属性（Properties）：属于 JavaScript 中的 DOM 对象（例如，复选框 input 元素的 checked DOM 属性）。prop() 方法处理这些。

最佳实践：

• 对布尔属性（如 checked、selected、disabled、readOnly）使用 prop()。用于获取它们的状态 (true/false) 或设置它们。
• 对其他属性（如 id、class、href、src、title、data-* 属性）使用 attr()，特别是需要获取 HTML 中定义的初始值时。

示例：设置复选框的 checked 状态：

// 假设 HTML 结构如下： <input type="checkbox" id="agreeCheckbox">

// 使用 prop() 的正确方法
$("#btnCheck").click(function() {
  $("#agreeCheckbox").prop("checked", true);
});

$("#btnUncheck").click(function() {
  $("#agreeCheckbox").prop("checked", false);
});

// 读取状态
if ($("#agreeCheckbox").prop("checked")) {
  console.log("Checkbox is checked");
} else {
  console.log("Checkbox is not checked");
}

// 对 checked 使用 attr() 可能无法一致地反映当前状态
// $("#agreeCheckbox").attr("checked", "checked"); // 对于状态变化不太可靠

attr() 的回调函数

与设置内容的方法类似，attr() 也接受一个回调函数来确定新的属性值。

回调函数接收两个参数：

• index: 元素在集合中的索引位置。
• currentValue: 属性的原始值。

它应返回新的属性值字符串。

示例：使用回调函数向现有 href 添加内容：

// 假设 HTML 结构如下： <a class="productLink" href="/products">...</a>

$("#btnAppendPath").click(function() {
  $(".productLink").attr("href", function(i, originalHref) {
    // 添加一个查询字符串，确保格式正确
    const separator = originalHref.includes('?') ? '&' : '?';
    return originalHref + separator + "source=campaign";
  });
});

jQuery HTML/CSS 参考手册

要获取所有用于操作 HTML 内容和属性的 jQuery 方法的完整概述，请访问官方的 jQuery 操作文档。