在jQuery中，prop()和attr()方法虽然都用于操作属性，但它们的应用场景和返回值类型有显著差异。

操作固有属性与自定义属性

prop()方法用于操作HTML元素的固有属性（如<a>标签的href属性）。

例如，获取和设置<a>标签的href属性值：

// 获取href属性值
console.log($("a").prop("href")); // 输出：http://localhost
// 设置title属性值
$("a").prop("title", "首页");

对于表单元素的选中状态（如checked），prop()方法返回布尔值true或false，能准确反映当前状态：

$("input").change(function(){
    console.log($(this).prop("checked")); // 选中时输出true，否则false

attr()方法则用于操作自定义的DOM属性（如用户添加的index属性）。

例如，获取和设置<div>标签的index属性：

// 获取自定义属性值
console.log($("div").attr("index")); // 输出：1
console.log($("div").attr("data-index")); // 输出：2
// 设置自定义属性值
$("div").attr("index", 3);
$("div").attr("data-index", 4);

处理布尔属性的差异

在处理checked、selected等布尔属性时，prop()和attr()的行为不同2。prop()返回true或false，而attr()在选中时返回属性值字符串（如"checked"），未选中时返回undefined。

对于复选框：

// 使用prop()方法
$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
// 使用attr()方法  
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

方法参数与返回值类型

prop()方法设置的值可以是任意数据类型，而attr()方法设置的值只能是字符串类型5。

attr()方法还支持使用函数动态设置属性值：

$("ul li:eq(1)").attr("title", function(){
    return this.value;
});

适用场景总结

• ‌使用prop()的场景‌：操作HTML元素固有属性（如href、title）；

• 处理布尔属性（如checked、selected、disabled）；

• 需要获取属性当前状态时。

• 
  

• ‌使用attr()的场景‌：操作自定义属性（如data-*、index）；

• 需要操作HTML文档节点属性时。

• 
  

在实际开发中，应根据属性类型选择合适的方法：固有属性使用prop()，自定义属性使用attr()