当前位置：首页 > jquery

jquery修改属性

2026-03-16 22:33:58jquery

使用 `attr()` 方法修改属性

attr() 是 jQuery 中用于获取或设置 HTML 元素属性的核心方法。
语法：

// 获取属性值  
$(selector).attr(attributeName);  

// 设置单个属性  
$(selector).attr(attributeName, value);  

// 设置多个属性（对象形式）  
$(selector).attr({ attribute1: value1, attribute2: value2 });

示例：
修改图片的 src 和 alt 属性：

$("#myImage").attr("src", "new-image.jpg");  
$("#myImage").attr({  
  "src": "new-image.jpg",  
  "alt": "New Description"  
});

使用 `prop()` 方法修改布尔属性

对于 checked、disabled 等布尔属性，prop() 方法更可靠。
语法：

// 获取属性状态  
$(selector).prop(propertyName);  

// 设置属性状态  
$(selector).prop(propertyName, value);

示例：
禁用按钮并勾选复选框：

$("#myButton").prop("disabled", true);  
$("#myCheckbox").prop("checked", true);

使用 `removeAttr()` 删除属性

移除元素的指定属性：
语法：

$(selector).removeAttr(attributeName);

示例：
移除链接的 target 属性：

$("a").removeAttr("target");

修改 `data-*` 自定义属性

通过 data() 方法操作 data-* 属性：
语法：

// 获取 data-* 值  
$(selector).data(key);  

// 设置 data-* 值  
$(selector).data(key, value);

示例：
修改 data-user-id 的值：

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

动态修改样式类属性

通过 addClass()、removeClass() 和 toggleClass() 调整元素的 class 属性：
示例：

jquery修改属性

// 添加类  
$("#element").addClass("active");  

// 移除类  
$("#element").removeClass("inactive");  

// 切换类  
$("#element").toggleClass("highlight");

注意事项

attr() 适用于标准 HTML 属性（如 id、href），而 prop() 更适合布尔属性或 DOM 属性（如 checked）。
修改 data-* 属性时，data() 方法不会直接更新 HTML 的 data-* 属性，而是存储在 jQuery 内部对象中。若需同步更新 HTML，需结合 attr()。