当前位置：首页 > jquery

jquery修改属性

2026-02-04 01:47:17jquery

jQuery 修改属性的方法

jQuery 提供了多种方法来修改 HTML 元素的属性，以下是常用的几种方式：

attr() 方法
用于获取或设置元素的属性值。
语法：$(selector).attr(attributeName, value)
示例：

// 设置属性
$("#myImage").attr("src", "new-image.jpg");

// 获取属性
var srcValue = $("#myImage").attr("src");

prop() 方法
适用于布尔属性（如 checked、disabled）。
语法：$(selector).prop(propertyName, value)
示例：

// 禁用按钮
$("#myButton").prop("disabled", true);

// 获取复选框状态
var isChecked = $("#myCheckbox").prop("checked");

data() 方法
用于操作 data-* 自定义属性。
语法：$(selector).data(key, value)
示例：

// 设置 data 属性
$("#myDiv").data("info", "user-data");

// 获取 data 属性
var info = $("#myDiv").data("info");

removeAttr() 方法
移除元素的指定属性。
语法：$(selector).removeAttr(attributeName)
示例：

// 移除 title 属性
$("#myLink").removeAttr("title");

val() 方法
专门用于表单元素的值（如 input、select）。
语法：$(selector).val(newValue)
示例：

// 设置输入框的值
$("#username").val("John Doe");

// 获取下拉菜单选中值
var selectedOption = $("#country").val();

注意事项

attr() 和 prop() 的区别：
- attr() 操作 HTML 原生属性（如 src、href）。
- prop() 操作 DOM 对象属性（如 checked、selected）。

批量设置属性：
可通过对象形式一次性设置多个属性。

$("#myElement").attr({
  "title": "New Title",
  "class": "highlight"
});

动态属性名：
使用变量作为属性名时需用方括号。
```
var attribute = "data-id";
$("#item").attr(attribute, "123");
```

实际应用示例

// 修改图片的 src 和 alt 属性
$("#logo").attr({
  "src": "images/logo-v2.png",
  "alt": "Company Logo"
});

// 切换复选框状态
$("#toggleCheckbox").click(function() {
  $("#myCheckbox").prop("checked", function(i, val) {
    return !val;
  });
});