jQuery的attr与prop详解：属性与特性差异与操作

在jQuery中，"attr"和"prop"是两个重要的功能，它们用于操作HTML元素的属性和特性。属性（attribute）通常指的是HTML元素标签上的固有属性，如id、class等，这些属性可以直接在HTML文档中看到。JavaScript提供了`.getAttribute(name)`和`.setAttribute(name, value)`方法来读取和设置这些属性。 属性操作的核心在于`.attr()`函数，它接收一个参数，用于指定要获取或设置的属性名。例如，`var t = document.getElementById('test'); t.attr('class', 'active'); t.attr('customizedAttr', 'customized');` 这段代码会为id为'test'的div元素添加类名和自定义属性。这些设置会被浏览器自动添加到元素的属性节点中，用户可以在HTML源码中看到。 另一方面，属性（property）则是DOM对象的内部状态，类似于JavaScript对象中的成员变量。比如，我们可以直接访问元素的id属性，如`t.id = 'test1';`。这实际上是改变了元素的property，不同于attribute，property的变化不会立即反映在HTML的attribute节点中。然而，如果我们使用`.getAttribute('id')`获取id属性，会得到当前的id值，即使这个值已经被更新为'test1'。 虽然attribute和property在概念上有所区别，但它们之间存在联系。许多attribute实际上对应着一个property，例如id属性可以通过`.id`来访问。这种情况下，对property的修改会影响到与之关联的attribute的值，但需要注意的是，`.getAttribute()`获取的仍是原始的attribute值，直到属性被实际改变才会同步更新。 理解并区分使用`attr`和`prop`对于在jQuery中正确操作HTML元素的属性至关重要。`attr`主要针对HTML标签上的属性，而`prop`则更偏向于DOM对象的内部状态。当需要处理那些既作为属性又关联到特定property的情况时，了解它们的交互模式尤其重要。