attr 与prop 的区别

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

1. 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');
   

2. 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 中的新属性。