jquery改变属性

jQuery 改变属性方法

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

使用 attr() 方法

attr() 方法用于获取或设置属性值。设置属性时需传递两个参数：属性名和属性值。

// 获取属性值
var value = $('#element').attr('attributeName');

// 设置单个属性
$('#element').attr('attributeName', 'newValue');

// 设置多个属性
$('#element').attr({
  'attribute1': 'value1',
  'attribute2': 'value2'
});

使用 prop() 方法

prop() 方法适用于布尔属性（如 checked、disabled）。与 attr() 类似，但针对的是 DOM 属性而非 HTML 属性。

// 获取属性值
var isChecked = $('#checkbox').prop('checked');

// 设置属性值
$('#checkbox').prop('disabled', true);

使用 removeAttr() 方法

removeAttr() 方法用于移除指定的属性。

// 移除属性
$('#element').removeAttr('attributeName');

使用 data() 方法

data() 方法用于操作 data-* 属性，无需直接操作 HTML。

// 设置 data 属性
$('#element').data('key', 'value');

// 获取 data 属性
var storedValue = $('#element').data('key');

示例场景

修改图片的 src 属性

$('#myImage').attr('src', 'new-image.jpg');

禁用按钮

$('#submitBtn').prop('disabled', true);

移除 title 属性

$('#tooltip').removeAttr('title');

存储自定义数据

$('#user').data('id', 123);
var userId = $('#user').data('id'); // 返回 123

注意事项

• 对于布尔属性（如 checked、selected），优先使用 prop() 而非 attr()。
• data() 方法仅适用于 data-* 属性，且不会修改 HTML，仅存储在 jQuery 对象中。
• 修改 style 或 class 时，建议使用 .css() 或 .addClass() 等专用方法。