attr 与prop 的区别

2024-05-04 15:52
11人已看

在前端开发中，attr 和 prop 是两个常用的方法，用于操作 HTML 元素的属性和属性值。
它们之间的区别主要在于针对不同类型的属性操作。

attr（）：

attr() 是 jQuery 中用来获取或设置 HTML 元素的属性的方法。
它可以用于获取元素的原始 HTML 属性，或者用于设置元素的属性值。
attr() 返回的是 HTML 属性的字符串值。

举例：

<img id="myImage" src="hello.jpg" alt="Example Image">

// 获取src属性的值
var srcValue = $('#myImage').attr('src');
console.log(srcValue); // 输出: hello.jpg

// 设置alt属性的值
$('#myImage').attr('alt', 'New Alt Text');

prop（）：
- prop() 是 jQuery 中用来获取或设置 HTML 元素的属性值的方法，但更适用于操作元素的 DOM 属性，比如 checked、disabled 等。
- 它用于获取或设置元素的属性值，如 checked、disabled、selected 等。
- prop() 返回的是属性值的布尔值或具体的属性值，而不是字符串。
举例：
```
<input type="checkbox" id="myCheckbox" checked>
```
```
// 获取checked属性的布尔值
var isChecked = $('#myCheckbox').prop('checked');
console.log(isChecked); // 输出: true

// 设置checked属性为true
$('#myCheckbox').prop('checked', true);
```

总结：

attr() 用于操作 HTML 元素的标准属性，返回属性值的字符串形式。
prop() 用于操作 HTML 元素的 DOM 属性，返回属性值的布尔值或特定的属性值。

在大多数情况下，应该优先使用 prop()，特别是当涉及到布尔属性（如 checked、disabled）时，因为它更准确、更可靠。attr() 则更适合于处理自定义属性或 HTML5 中的新属性。