jQuery中的attr与prop：区别与用法

在jQuery中，attr和prop是两个用于获取和设置元素属性的方法。虽然它们看起来相似，但在某些情况下，它们的行为和用途却有很大的不同。下面我们将详细讨论它们的区别和用法。

一、attr方法

attr方法是jQuery中用于获取和设置HTML元素属性的方法。它可以获取元素的属性值，也可以设置新的属性值。例如，要获取一个链接元素的href属性，可以使用以下代码：

var href = $('a').attr('href');

要设置链接元素的href属性，可以使用以下代码：

$('a').attr('href', 'http://example.com');

需要注意的是，attr方法获取的值始终是字符串，即使属性的值是数字或布尔值。此外，attr方法主要用于获取和设置元素的初始HTML属性值，而不是元素的当前状态。

二、prop方法

prop方法是jQuery中另一个用于获取和设置元素属性的方法。与attr方法不同的是，prop方法主要用于获取和设置元素的DOM属性，而不是HTML属性。DOM属性是元素的当前状态，而HTML属性是元素在HTML文档中的初始状态。

例如，要获取一个复选框元素的选中状态，应该使用prop方法，而不是attr方法。因为复选框的选中状态是一个DOM属性，而不是HTML属性。可以使用以下代码获取复选框的选中状态：

var isChecked = $('input[type=checkbox]').prop('checked');

要设置复选框的选中状态，可以使用以下代码：

$('input[type=checkbox]').prop('checked', true);

需要注意的是，prop方法返回的值是布尔值或null，而不是字符串。此外，prop方法主要用于获取和设置元素的DOM属性，这些属性可能会随着用户交互或其他因素而改变。

三、总结

在jQuery中，attr和prop方法都是用于获取和设置元素属性的方法。但它们的用途和行为有所不同。attr方法主要用于获取和设置元素的初始HTML属性值，而prop方法主要用于获取和设置元素的DOM属性。因此，在选择使用哪个方法时，应该根据具体的需求和场景来做出正确的选择。

例如，如果要获取或设置一个链接元素的href属性，应该使用attr方法。如果要获取或设置一个复选框的选中状态，应该使用prop方法。如果一个属性同时存在于HTML和DOM中，那么通常建议优先使用prop方法，因为它能更准确地反映元素的当前状态。

以上是对jQuery中attr和prop方法的简单介绍和比较。希望本文能够帮助读者更好地理解这两个方法，并在实际开发中做出正确的选择。