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 内部存储的数据







