jQuery 添加属性

使用 jQuery 的 attr() 方法，可以为选择器匹配到的元素添加或更改 HTML 属性。运行这些示例前，请先在页面中加载 jQuery。需要更改表单控件当前的布尔状态时，请使用 .prop()；需要存储由 jQuery 管理的数据，而不是设置 HTML 属性时，请使用 .data()。

使用 .attr() 设置一个 HTML 属性

在 jQuery 集合上调用 .attr(name, value)。name 是要设置的 HTML 属性名，value 是要赋予该属性的值。所有匹配到的元素都会设置此属性。如果选择器没有匹配到任何元素，此调用不会产生效果。

下面是一个可运行的 Node.js 演示，它使用一个简单的替代集合，无需浏览器即可展示这些调用及其结果。在网页中加载 jQuery 后，也可以使用相同的 jQuery 调用；这个替代集合仅用于此独立演示。

运行此示例：

本节中的代码以及显示的标签或输出仍为英文。

const elements = {
  saveButton: { attributes: {}, properties: {}, data: {} },
  reportLink: { attributes: {}, properties: {}, data: {} },
  emailUpdates: { attributes: {}, properties: { checked: false }, data: {} }
};

function $(selector) {
  const element = elements[selector.slice(1)];
  return {
    attr(name, value) {
      if (typeof name === "object") Object.assign(element.attributes, name);
      else element.attributes[name] = value;
      return this;
    },
    prop(name, value) {
      element.properties[name] = value;
      return this;
    },
    data(name, value) {
      element.data[name] = value;
      return this;
    }
  };
}

$("#saveButton").attr("title", "Save your changes");
$("#reportLink").attr({
  href: "/reports/current",
  target: "_blank",
  rel: "noopener"
});
$("#emailUpdates").prop("checked", true);
$("#saveButton").attr("data-category", "books");
$("#saveButton").data("category", "featured");

console.log(JSON.stringify({
  title: elements.saveButton.attributes.title,
  link: elements.reportLink.attributes,
  checked: elements.emailUpdates.properties.checked,
  htmlData: elements.saveButton.attributes["data-category"],
  jqueryData: elements.saveButton.data.category
}, null, 2));

{
  "title": "Save your changes",
  "link": {
    "href": "/reports/current",
    "target": "_blank",
    "rel": "noopener"
  },
  "checked": true,
  "htmlData": "books",
  "jqueryData": "featured"
}

在实际页面中，可以对 $("#saveButton") 选出的 jQuery 集合调用 .attr("title", "Save your changes")。属性名是 title，第二个参数是要设置的值。所有匹配到的元素都会设置该属性。常见的字符串属性包括 title、href、src 和 aria-label。

使用 .attr() 设置多个属性

若要在一次调用中设置多个属性，请传入一个对象，其键为属性名，值为要赋予属性的内容。上面的示例为链接设置了多个属性，并在打开新标签页时包含 rel="noopener"。当这些属性需要一并设置时，可以使用这种对象形式；每个属性值都会赋给所有匹配到的链接。请根据页面内容选择合适的目标地址和链接文字。与 target="_blank" 配合时，rel 值很有用，因为它可以防止打开的页面获得 opener 引用。

使用 .prop() 修改当前布尔状态

checked 和 disabled 等 HTML 布尔属性描述元素的初始或默认状态。用户与页面交互后，当前状态可能会改变。要读取或修改当前 DOM 属性值，请使用 .prop()；用 .attr() 设置属性，并不能可靠地更改复选框当前是否选中。

示例使用 .prop("checked", true) 将 emailUpdates 复选框的当前状态设为选中。同样，可以使用 .prop("disabled", true) 立即禁用控件，或传入 false 将其启用。若需要设置 HTML 属性，例如元素的 title 或 href，请使用 .attr()；若要获取或设置 checked、disabled 等布尔属性当前的值，请使用 .prop()。

区分 HTML data-* 属性与 jQuery .data()

如果需要将值写入 HTML data-* 属性并保留在元素标记中，请使用 .attr("data-name", value)。示例中的 .attr("data-category", "books") 设置的就是这个 HTML 属性。

相比之下，.data("category", "featured") 会将值存储在 jQuery 的数据缓存中，适用于由脚本管理的状态，但这并不表示对应的 HTML 属性也已写入。如果标记或其他脚本需要读取更新后的 data-* 属性，请使用 .attr()；如果该值只需由 jQuery 管理，请使用 .data()。根据值需要在哪里使用来选择 API，有助于区分这两种方式。