jquery改变属性

jQuery 改变属性方法

使用 jQuery 可以方便地修改 HTML 元素的属性。以下是几种常见的方法：

修改标准属性

使用 attr() 方法可以获取或设置元素的属性值。设置属性时需要传递属性名和值。

// 获取属性值
var href = $('a').attr('href');

// 设置单个属性
$('img').attr('src', 'new-image.jpg');

// 设置多个属性
$('input').attr({
  'type': 'text',
  'placeholder': 'Enter text'
});

修改布尔属性

对于 checked、disabled 等布尔属性，建议使用 prop() 方法。

// 选中复选框
$('#checkbox').prop('checked', true);

// 禁用按钮
$('#button').prop('disabled', true);

移除属性

使用 removeAttr() 方法可以完全移除元素的某个属性。

// 移除 title 属性
$('div').removeAttr('title');

修改 data 属性

对于 HTML5 的 data-* 属性，可以使用 data() 方法。

// 设置 data 属性
$('div').data('info', 'new data');

// 获取 data 属性
var info = $('div').data('info');

修改 CSS 类属性

虽然不是严格意义上的属性修改，但类名的变化也会影响元素表现。

// 添加类
$('p').addClass('highlight');

// 移除类
$('p').removeClass('highlight');

// 切换类
$('p').toggleClass('highlight');

注意事项

• attr() 和 prop() 的主要区别在于：attr() 操作 HTML 属性，prop() 操作 DOM 属性
• 对于布尔属性如 checked、selected，使用 prop() 更可靠
• 修改 data 属性不会改变 HTML 标记中的 data-* 属性，只改变 jQuery 内部存储的数据