jquery添加属性

使用 .attr() 方法添加属性

通过 jQuery 的 .attr() 方法可以动态添加或修改元素的属性。该方法接受两个参数：属性名和属性值。

$("#elementId").attr("data-custom", "value");

此代码为 ID 为 elementId 的元素添加 data-custom 属性，值为 "value"。若属性已存在，则会更新其值。

使用 .prop() 方法添加布尔属性

对于布尔属性（如 disabled、checked），推荐使用 .prop() 方法。与 .attr() 不同，.prop() 直接操作 DOM 属性而非 HTML 属性。

$("#checkbox").prop("disabled", true);

此代码将禁用 ID 为 checkbox 的复选框。

批量添加多个属性

通过传递对象参数，可以一次性添加多个属性。适用于需要设置多个属性的场景。

$("#image").attr({
  "src": "path/to/image.jpg",
  "alt": "Description",
  "title": "Tooltip"
});

此代码为图片元素同时设置 src、alt 和 title 属性。

使用 .data() 方法添加数据属性

针对 HTML5 的 data-* 属性，可使用 .data() 方法。此方法会将属性名转换为驼峰格式（如 data-user-id 变为 userId）。

$("#user").data("userId", "123");

此代码等价于在 HTML 中设置 data-user-id="123"，但通过 jQuery 内部数据缓存实现，不直接修改 DOM。

动态添加事件处理属性

若需添加事件处理属性（如 onclick），建议使用 jQuery 的事件绑定方法而非直接修改属性。

$("#button").click(function() {
  alert("Button clicked!");
});

此代码为按钮绑定点击事件，比直接写 onclick="..." 更易于维护。

注意事项

• 性能考虑：频繁操作 DOM 会影响性能，建议批量处理属性。
• 布尔属性：如 checked，使用 .prop() 更可靠，因为 .attr() 可能仅反映初始状态。
• 数据存储：对于复杂数据，.data() 比 data-* 属性更高效，但需注意两者访问方式的差异。