Jquery中attr与prop的区别详解

在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。下面这篇文章主要给大家介绍了Jquery中attr与prop区别的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。 在jQuery中，`attr`和`prop`是两个用于获取和设置HTML元素属性的方法，但它们之间存在着重要的区别。在高版本的jQuery中，引入`prop`方法是为了更精确地处理元素的特性，特别是那些与JavaScript行为密切相关的属性。 `attr`主要用于处理HTML元素的特性（attributes），这些特性通常在HTML标签中定义，如`id`、`class`、`src`等。`attr`获取或设置的是元素的特性字符串值。例如，`<input type="checkbox" checked>`，当我们使用`attr("checked")`时，会返回`"checked"`这个字符串。 然而，`prop`方法则用于处理元素的属性（properties），这些属性反映了元素的当前状态，比如`checked`、`selected`、`disabled`等。这些属性是动态的，与元素的行为紧密相关。当我们使用`prop("checked")`时，对于复选框，它会返回一个布尔值，表示该复选框是否被选中。在上述例子中，同事在实现页面功能时，通过`attr("checked", true)`尝试选中所有复选框，但由于`attr`返回的是字符串，所以没有达到预期效果。而使用`prop("checked", true)`则正确地设置了复选框的状态。 在实践过程中，我们可以通过实验来理解两者的差异。例如，当我们对具有不同`checked`属性设定的输入元素分别使用`attr`和`prop`时，会发现`attr`总是返回`"checked"`或者`undefined`，而`prop`只返回`true`或`false`，这清楚地表明了两者对固有属性处理的不同。 总结一下，`prop()`函数的主要特点： 1. 如果元素有对应的属性，返回该属性的值，通常是布尔值。 2. 如果元素没有对应的属性，返回值为空字符串。 而`attr()`函数的特点是： 1. 如果元素有对应的特性，返回该特性的字符串值。 2. 如果元素没有对应的特性，返回值为`undefined`。 在使用时，需要注意以下几点： - 对于固有属性，如`checked`、`selected`、`disabled`等，应当使用`prop()`来读写。 - 对于自定义的DOM属性，或者非固有属性，如`data-*`属性，应使用`attr()`。 - 当涉及到元素行为的交互，如改变复选框的状态或禁用按钮，使用`prop()`更为合适。 正确区分和使用`attr`和`prop`可以帮助我们编写更加准确和高效的jQuery代码，特别是在处理HTML元素的状态和行为时。理解它们之间的差异是优化jQuery应用的关键。