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');