在前端开发中，我们经常需要操作 HTML 元素的属性或者属性值。然而，jQuery 中有两个方法可以实现这个功能：.prop() 和 .attr()。那么这两个方法有什么区别呢？
.prop()
.prop() 方法用来获取或设置DOM元素的属性值，它与 HTML 属性一一对应。.prop() 方法只能修改布尔类型、枚举类型以及数值类型的属性，并且不能用于文本类型属性，例如 class、id、href 等。
下面是一个例子，当点击按钮时，使用.prop()方法将按钮禁用：
----------------------------- ------------------------ ------ ---
.attr()
.attr() 方法用来获取或设置 DOM 元素的属性值，它与 HTML 属性不一定一一对应。.attr() 方法可以修改任何 HTML 属性，例如 class、id、href 等。
下面是一个例子，当用户鼠标悬停在图片上时，使用 .attr() 方法更改图片的 src 属性：
-------------------------- ------------------- ------------- -- ----------- ------------------- -------------- ---
区别
综上所述，.prop() 和 .attr() 方法其实有着很大的区别：
- .prop() 方法用于获取或设置 DOM 元素的属性值，而 .attr() 方法用于获取或设置 HTML 属性值。
- .prop() 方法只能修改布尔类型、枚举类型以及数值类型的属性，并且不能用于文本类型属性，例如 class、id、href 等。而 .attr() 方法可以修改任何 HTML 属性。
- .prop() 方法通常用于操作特殊属性，例如 checked、selected 或者 disabled 等。而 .attr() 方法用于操作普通属性。
使用建议
为了避免出现一些奇怪的问题，我们需要在使用这两个方法时十分小心。在设置属性时，应该优先使用.prop() 方法，只有在无法实现目标时才使用 .attr() 方法。
例如，在处理表单元素时，使用 .prop() 方法更好，因为它可以正确地处理 checked 和 selected 等特殊属性：
------ --------------- -------------- ------ ------------------------- -------- ------------------------------ ------ ---------
但是，如果要添加或删除 class 属性，应该使用 .attr() 方法：
---- ----------------- -------- ------------------------- ----------- ---------
总之，正确地选择 .prop() 和 .attr() 方法将有助于您编写更加可靠和高效的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/7209