JavaScript--prop和attr的用法

简介：

在JavaScript中，prop和attr()是jQuery库提供的一个方法，用于获取或设置DOM元素的属性值。

prop()方法：

• prop()方法用于获取或设置HTML元素的属性值。
• 通过prop()方法可以设置HTML元素的固有属性（如checked、disabled等）以及自定义属性。

• 语法：

  获取属性值：$(selector).prop(propertyName)
  设置属性值：$(selector).prop(propertyName, value)

其中，selector为选择器，可以是元素的标签名、类名、id等；propertyName为属性名称；value为要设置的属性值。

attr()方法：

• attr()方法用于获取或设置HTML元素的属性值。
• 通过attr()方法可以设置HTML元素的标准属性（如id、class等）以及自定义属性。

• 语法：

  获取属性值：$(selector).attr(attributeName)
  设置属性值：$(selector).attr(attributeName, value)

其中，selector为选择器，可以是元素的标签名、类名、id等；attributeName为属性名称；value为要设置的属性值。

区别和联系

区别：

1. 操作布尔属性：prop()方法可以准确地获取或设置HTML元素的布尔属性（如checked、disabled），而attr()方法在处理布尔属性时会返回字符串类型的属性值（"checked"、"disabled"）或undefined。
2. 修改属性值：prop()方法修改属性值时，会直接修改DOM对象的属性值，而attr()方法则通过修改HTML属性来改变属性值。
3. 兼容性：对于一些非标准的属性或属性命名，prop()方法在不同浏览器中可能存在兼容性问题，而attr()方法相对更加稳定。

联系：

1. 获取属性值：prop()和attr()方法都可以用于获取HTML元素的属性值。
2. 设置属性值：prop()和attr()方法都可以用于设置HTML元素的属性值。
3. 自定义属性：prop()和attr()方法都可以用于操作自定义属性。

根据具体使用场景和需求，选择适合的方法来操作属性。通常情况下，对于输入型表单元素的状态切换，如复选框的选中状态、禁用状态等，推荐使用prop()方法；而对于其他属性的操作，如class、id等，可以根据需要选择使用prop()或attr()方法。

值得注意的是，自HTML5起，推荐使用data-*属性来存储自定义数据，可以使用data()方法来获取或设置这些数据。在这种情况下，attr()方法比prop()方法更适合处理data-*属性。

示例

  
  
  
  


  
示例页面

  
  复选框

  按钮

这个例子演示了使用prop()和attr()方法来操作HTML元素的属性。通过JavaScript代码，将复选框的checked属性设置为true，并将按钮的disabled属性设置为disabled。然后使用prop()和attr()分别获取复选框的checked属性值和按钮的disabled属性值，并在控制台输出。

通过这个例子，可以体会到prop()和attr()方法在HTML属性操作上的差异和联系。请注意，在使用这个例子时，确保已加载jQuery库。