jquery 属性
jQuery 属性操作
jQuery 提供了一系列方法来获取、设置和操作 HTML 元素的属性。以下是常用的属性操作方法:
attr() 方法
用于获取或设置元素的属性值。获取属性时,传入属性名;设置属性时,传入属性名和值。
// 获取属性值
var href = $('a').attr('href');
// 设置属性值
$('img').attr('src', 'new-image.jpg');
removeAttr() 方法
用于移除元素的指定属性。
$('input').removeAttr('disabled');
prop() 方法
用于获取或设置元素的属性值(适用于布尔属性,如 checked、disabled)。
// 获取属性值
var isChecked = $('input[type="checkbox"]').prop('checked');
// 设置属性值
$('input[type="checkbox"]').prop('checked', true);
val() 方法
用于获取或设置表单元素的值(如 input、select、textarea)。
// 获取值
var username = $('input[name="username"]').val();
// 设置值
$('input[name="username"]').val('new value');
data() 方法
用于获取或设置元素的自定义数据属性(data-*)。
// 获取数据属性
var userRole = $('div').data('role');
// 设置数据属性
$('div').data('role', 'admin');
html() 方法
用于获取或设置元素的 HTML 内容。
// 获取 HTML
var content = $('div').html();
// 设置 HTML
$('div').html('<p>New content</p>');
text() 方法
用于获取或设置元素的文本内容(不解析 HTML 标签)。
// 获取文本
var text = $('div').text();
// 设置文本
$('div').text('Plain text content');
addClass() 和 removeClass() 方法
用于动态添加或移除元素的 CSS 类。
// 添加类
$('div').addClass('highlight');
// 移除类
$('div').removeClass('highlight');
toggleClass() 方法
用于切换元素的 CSS 类(如果存在则移除,否则添加)。
$('div').toggleClass('highlight');
css() 方法
用于获取或设置元素的 CSS 样式。
// 获取样式
var color = $('div').css('color');
// 设置样式
$('div').css('color', 'red');
注意事项
attr()和prop()的区别:attr()操作 HTML 属性,而prop()操作 DOM 属性。对于布尔属性(如checked),推荐使用prop()。data()方法仅用于data-*属性,不会修改 HTML,而是存储在 jQuery 的内部对象中。- 链式调用:jQuery 方法支持链式调用,例如
$('div').addClass('active').css('color', 'blue')。






