jQuery attr()与prop()函数深度解析：用法对比与实例

在jQuery库中，`attr()`和`prop()`是两个常用的用于操作HTML元素属性的方法。它们虽然在某些场景下功能相似，但其内部机制和使用范围有所不同。本文将详细介绍这两个函数的用法及其区别。 jQuery的attr()方法 - `attr(属性名)`：主要用于获取元素的HTML属性值。例如，`$("#myElement").attr("src")`会返回指定元素`src`属性的值。如果没有该属性，返回的结果将是`undefined`。 - `attr(属性名, 属性值)`：可以用来设置元素的属性值。当传递一个值时，如`$("#myElement").attr("src", "newImage.jpg")`，它会将指定属性设置为新值。 - `attr(属性名, 函数值)`：接受一个函数作为参数，该函数会被执行并返回一个值，然后将此值作为属性值。这常用于动态计算属性值，如`$("#myElement").attr("data-value", function() { return Math.random(); })`。 - `attr(properties)`：一次性设置多个属性，例如`$("#myElement").attr({ "class": "myClass", "id": "uniqueId" })`。注意，对于CSS类名，应使用`"className"`而不是`"class"`。 prop()函数的用法 - `prop()`主要处理的是元素的“编程属性”（如`checked`, `selected`, `disabled`, 等），这些属性通常反映了元素的状态，而非HTML特性。例如，`$("#myCheckbox").prop("checked")`检查复选框是否被选中。 - `prop(属性名, 属性值)`同样可以设置这些编程属性，如`$("#myCheckbox").prop("checked", true)`会选中复选框。 - `prop(属性名, 函数值)`和`attr()`类似，但仅对编程属性有效。 区别分析 - `attr()`关注HTML元素的原始属性，而`prop()`更侧重于元素的内在状态。 - `prop()`不会像`attr()`那样改变元素的样式，比如`checked`属性会影响到样式渲染，`prop()`更准确地反映状态。 - 当元素的内容改变（如`<input>`类型的值变化）时，`val()`通常会用到`prop()`，因为它处理的是值而不是HTML属性。 了解这两个函数的差异有助于在处理HTML元素属性时选择合适的方法。在实际开发中，根据所需操作的是元素的外观还是状态，合理选择`attr()`和`prop()`能提高代码的效率和准确性。