.prop() vs .attr()-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要操作 HTML 元素的属性或者属性值。然而，jQuery 中有两个方法可以实现这个功能：.prop() 和 .attr()。那么这两个方法有什么区别呢？

.prop()

.prop() 方法用来获取或设置DOM元素的属性值，它与 HTML 属性一一对应。.prop() 方法只能修改布尔类型、枚举类型以及数值类型的属性，并且不能用于文本类型属性，例如 class、id、href 等。

下面是一个例子，当点击按钮时，使用.prop()方法将按钮禁用：

$("button").click(function(){
  $(this).prop("disabled", true);
});

.attr() 方法用来获取或设置 DOM 元素的属性值，它与 HTML 属性不一定一一对应。.attr() 方法可以修改任何 HTML 属性，例如 class、id、href 等。

下面是一个例子，当用户鼠标悬停在图片上时，使用 .attr() 方法更改图片的 src 属性：

$("img").hover(function(){
  $(this).attr("src", "hover.png");
}, function(){
  $(this).attr("src", "normal.png");
});

综上所述，.prop() 和 .attr() 方法其实有着很大的区别：

.prop() 方法用于获取或设置 DOM 元素的属性值，而 .attr() 方法用于获取或设置 HTML 属性值。
.prop() 方法只能修改布尔类型、枚举类型以及数值类型的属性，并且不能用于文本类型属性，例如 class、id、href 等。而 .attr() 方法可以修改任何 HTML 属性。
.prop() 方法通常用于操作特殊属性，例如 checked、selected 或者 disabled 等。而 .attr() 方法用于操作普通属性。

为了避免出现一些奇怪的问题，我们需要在使用这两个方法时十分小心。在设置属性时，应该优先使用.prop() 方法，只有在无法实现目标时才使用 .attr() 方法。

例如，在处理表单元素时，使用 .prop() 方法更好，因为它可以正确地处理 checked 和 selected 等特殊属性：

<input type="checkbox" id="checkbox">
<label for="checkbox">选项</label>

<script>
  $("#checkbox").prop("checked", true);
</script>

但是，如果要添加或删除 class 属性，应该使用 .attr() 方法：

<div id="myDiv"></div>

<script>
  $("#myDiv").attr("class", "myClass");
</script>

总之，正确地选择 .prop() 和 .attr() 方法将有助于您编写更加可靠和高效的代码。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/7209