jquery属性
jQuery 属性操作
jQuery 提供了多种方法来操作 HTML 元素的属性。这些方法可以获取、设置或删除元素的属性,包括标准 HTML 属性和自定义属性。
获取属性值
使用 attr() 方法可以获取指定属性的值。语法如下:
$(selector).attr(attributeName)
示例代码:
var href = $('a').attr('href');
设置属性值
attr() 方法也可以用于设置属性值。可以单独设置一个属性,也可以同时设置多个属性。语法如下:
$(selector).attr(attributeName, value)
// 或多个属性
$(selector).attr({attribute1: value1, attribute2: value2})
示例代码:
$('img').attr('src', 'new-image.jpg');
$('input').attr({type: 'text', placeholder: 'Enter text'});
删除属性
使用 removeAttr() 方法可以删除指定的属性。语法如下:
$(selector).removeAttr(attributeName)
示例代码:
$('input').removeAttr('disabled');
自定义属性(data-*)
HTML5 引入了 data-* 属性用于存储自定义数据。jQuery 提供了 data() 方法来操作这些属性。
获取 data 属性:
$(selector).data(key)
设置 data 属性:
$(selector).data(key, value)
示例代码:
var user = $('#user').data('user-id');
$('#user').data('score', 100);
prop() 与 attr() 的区别
prop() 方法用于获取或设置 DOM 元素的属性(如 checked, disabled 等布尔属性),而 attr() 用于 HTML 属性。
对于布尔属性,推荐使用 prop():
$('input[type="checkbox"]').prop('checked', true);
检查属性是否存在
可以通过 attr() 方法返回的值是否为 undefined 来判断属性是否存在:

if ($('img').attr('alt') !== undefined) {
// 属性存在
}
常用属性操作示例
修改链接的 href 属性
$('a').attr('href', 'https://new-url.com');
获取图片的 alt 属性
var altText = $('img').attr('alt');
设置多个属性
$('input').attr({
'type': 'password',
'placeholder': 'Enter password'
});
移除类属性
$('div').removeAttr('class');
操作 data 属性
// 设置
$('#item').data('price', 20.99);
// 获取
var price = $('#item').data('price');






