jQuery获取attr()与prop()属性值的方法及区别介绍

当我们需要获取元素的属性值时，常用的两个方法是attr()和prop()。它们的区别在于应用的场景和获取的值的类型。

attr()方法

attr()方法用于获取或设置元素的属性。它返回属性的字符串值，无论属性的值是字符串还是数字或布尔值。在大多数情况下，我们使用attr()方法来获取HTML标记中的属性值。

语法：

$(selector).attr(attribute)

参数：

• selector: 要获取属性的元素。
• attribute: 要获取的属性的名称。

示例一： 获取img元素的src属性值

<img src="https://www.example.com/image.png" alt="example">

var src = $('img').attr('src');
console.log(src); // https://www.example.com/image.png

示例二： 设置div元素的class属性值

<div class="box">content</div>

$('div').attr('class', 'wrapper');

prop()方法

prop()方法用于获取或设置元素的属性，但不同于attr()方法，它仅适用于元素的内部属性。例如，它可用于获取checkbox的checked属性值，但不能用于获取元素的自定义属性值。

语法：

$(selector).prop(property)

参数：

• selector: 要获取属性的元素。
• property: 要获取的属性的名称。

示例一： 获取checkbox元素的checked属性值

<input type="checkbox" name="check" checked="checked">

if ($('input[type="checkbox"]').prop('checked')) {
  console.log('The checkbox is checked');
} else {
  console.log('The checkbox is not checked');
}

示例二： 设置video元素的currentTime属性值

<video src="example.mp4"></video>

$('video').prop('currentTime', 20);

区别介绍

总的来说，attr()方法适用于获取和设置元素的标准属性值和自定义属性值，而prop()方法主要用于获取和设置非标准属性、内部属性和布尔属性。

另外，attr()方法返回属性值的字符串形式，而prop()方法返回属性值的对应数据类型。例如，prop()方法返回的checked属性值为布尔类型，而attr()方法返回的checked属性值为字符串类型。