jQuery中的attr()与prop()方法全方位解析

在jQuery中，attr()和prop()方法都是用来获取或设置元素属性的。然而，它们之间存在着细微的差别。attr()方法用于获取或设置元素的HTML属性，而prop()方法用于获取或设置元素的DOM属性。

HTML属性 是指元素在HTML代码中定义的属性。例如，以下HTML代码中，id属性和class属性都是元素的HTML属性：

<div id="container" class="main"></div>

DOM属性 是指元素在DOM树中拥有的属性。DOM属性与HTML属性通常是相同的，但也有例外。例如，以下代码中，checked属性是元素的DOM属性，但它不是元素的HTML属性：

<input type="checkbox" checked>

attr()方法

attr()方法用于获取或设置元素的HTML属性。attr()方法的语法如下：

attr(attributeName)

其中，attributeName是要获取或设置的属性的名称。

例如，以下代码获取元素的id属性：

var id = $("#container").attr("id");

以下代码设置元素的class属性：

$("#container").attr("class", "new-class");

prop()方法

prop()方法用于获取或设置元素的DOM属性。prop()方法的语法如下：

prop(propertyName)

其中，propertyName是要获取或设置的属性的名称。

例如，以下代码获取元素的checked属性：

var checked = $("#checkbox").prop("checked");

以下代码设置元素的disabled属性：

$("#input").prop("disabled", true);

attr()方法与prop()方法的区别

attr()方法和prop()方法的区别在于，attr()方法用于获取或设置元素的HTML属性，而prop()方法用于获取或设置元素的DOM属性。

HTML属性与DOM属性通常是相同的，但也有例外。例如，checked属性是元素的DOM属性，但它不是元素的HTML属性。

在大多数情况下，您可以使用attr()方法和prop()方法来获取或设置元素的属性。然而，在某些情况下，您只能使用attr()方法或prop()方法。例如，您只能使用attr()方法来获取或设置元素的class属性，而只能使用prop()方法来获取或设置元素的checked属性。

总结

jQuery中的attr()方法和prop()方法都是用来获取或设置元素属性的。然而，它们之间存在着细微的差别。attr()方法用于获取或设置元素的HTML属性，而prop()方法用于获取或设置元素的DOM属性。

在大多数情况下，您可以使用attr()方法和prop()方法来获取或设置元素的属性。然而，在某些情况下，您只能使用attr()方法或prop()方法。