jQuery attr()与prop()函数详解及差异示例

"这篇文章主要讲解了jQuery中的attr()和prop()函数的用法，并通过实例进行了解析，同时提到了这两个函数的区别。" 在jQuery中，attr()和prop()都是用于处理HTML元素属性的方法，但它们的应用场景和功能有所不同。 一、jQuery的attr()方法 attr()主要用于处理HTML元素的属性(attribute)，这些属性通常在HTML标记中定义，如id、class、src等。attr()主要有以下四种用法： 1. `attr(属性名)`：获取第一个匹配元素的属性值。如果元素没有该属性，将返回undefined。 2. `attr(属性名, 属性值)`：为所有匹配的元素设置一个属性值。 3. `attr(属性名, 函数值)`：为所有匹配的元素设置一个由函数计算出来的属性值。 4. `attr(properties)`：一次为多个属性设置值，通过一个属性-值的对象字面量。 例如，下面的代码演示了如何使用attr()方法： ```javascript $("#myElement").attr("id"); // 获取id属性值 $("#myElement").attr("class", "newClass"); // 设置class属性 $("#myElement").attr("data-custom", function(index, currentValue) { return currentValue + "modified"; // 动态设置数据属性 }); ``` 二、jQuery的prop()方法 prop()方法则是针对元素的特性(property)而设计的，这些特性与元素的行为相关，比如checked、disabled、selected等状态。prop()同样有类似的四种用法，与attr()基本一致，只是适用的属性不同。 1. `prop(属性名)`：获取第一个匹配元素的特性值，通常返回布尔值或字符串。 2. `prop(属性名, 布尔值)`：为所有匹配的元素设置特性值，通常布尔值表示启用或禁用某个特性。 3. `prop(属性名, 函数值)`：为所有匹配的元素设置由函数计算出的特性值。 4. `prop(properties)`：与attr()类似，一次为多个特性设置值。 例如： ```javascript $("input:checked").prop("checked"); // 检查复选框是否被选中 $("input").prop("disabled", true); // 禁用所有输入元素 ``` 三、attr()与prop()的区别 1. **属性类型**：attr()处理的是HTML属性，prop()处理的是DOM元素的JavaScript特性。 2. **行为差异**：对于boolean类型的属性，如checked、selected等，attr()会返回字符串"true"或"false"，而prop()会返回布尔值。 3. **动态属性**：涉及到动态属性，如表单元素的disabled、checked等，应使用prop()，因为这些属性是动态改变元素行为的。 总结来说，attr()和prop()虽然在用法上相似，但它们处理的对象和目的不同。attr()主要用于获取和设置HTML标记中的静态属性，而prop()则更关注于元素的动态特性，特别是与用户交互相关的特性和状态。在实际开发中，正确区分两者使用，能够避免不必要的错误和提高代码质量。