"# jQuery的attr和prop方法的区别
在使用jQuery时，attr()和prop()是两个常用的方法，用于获取和设置元素的属性和属性值。尽管它们的功能相似，但在某些情况下，它们是有区别的。
1. 基本定义
-
attr(): 用于获取或设置元素的HTML属性。它返回的是元素在HTML中的原始值。
-
prop(): 用于获取或设置元素的DOM属性。它返回的是元素在DOM中的实时值。
2. 使用场景
attr()
- HTML属性: 适用于获取或设置如
href、src、title等属性。
// 获取属性
var link = $(\"a\").attr(\"href\");
// 设置属性
$(\"a\").attr(\"target\", \"_blank\");
prop()
- DOM属性: 更适合用于处理
checked、selected、disabled等布尔属性。
// 获取属性
var isChecked = $(\"input[type='checkbox']\").prop(\"checked\");
// 设置属性
$(\"input[type='checkbox']\").prop(\"checked\", true);
3. 具体区别
3.1 返回值不同
attr()返回的是元素的属性值，如HTML中的字符串表示。prop()返回的是元素的属性值在DOM中的实际状态。
例如，对于一个复选框：
<input type=\"checkbox\" id=\"check\" checked>
使用：
var attrValue = $(\"#check\").attr(\"checked\"); // \"checked\"
var propValue = $(\"#check\").prop(\"checked\"); // true
3.2 设置值的影响
当使用attr()设置布尔属性时，它不会影响元素的状态，只是设置了属性的值。例如：
$(\"#check\").attr(\"checked\", false);
console.log($(\"#check\").prop(\"checked\")); // true
而使用prop()则会直接影响元素的状态：
$(\"#check\").prop(\"checked\", false);
console.log($(\"#check\").prop(\"checked\")); // false
4. 兼容性
在某些情况下，attr()和prop()可以互换使用，但推荐根据实际需要选择合适的方法。attr()适合处理HTML属性，而prop()适合处理DOM属性。
5. 结论
在使用jQuery时，理解attr()和prop()之间的区别有助于更好地操作DOM元素。选择合适的方法可以确保在获取和设置属性时，能够得到预期的结果。在处理HTML属性时使用attr()，而在处理DOM属性时使用prop()。这样可以避免潜在的错误和不一致的行为。"
