jQuery 技巧：正确使用 attr() 和 prop()

jQuery 的 attr() 和 prop() 方法是用于操作 HTML 元素属性的强大工具。虽然它们乍一看似乎很相似，但它们在功能和使用场景上却有细微但关键的区别。了解这些区别对于编写健壮且有效的 jQuery 代码至关重要。

attr()

attr() 方法主要用于获取或设置 HTML 元素的属性。它会与元素的实际 DOM 表示进行交互，这意味着它可以检索和修改 HTML 代码中定义的属性。

示例：

$("p").attr("id", "my-paragraph");
$("a").attr("href", "https://example.com");

prop()

另一方面，prop() 方法与元素的 DOM 属性进行交互。它获取或设置由浏览器设置和管理的固有属性。

示例：

$("input").prop("disabled", true);
$("button").prop("checked", false);

关键区别

特性	attr()	prop()
目标	HTML 属性	DOM 属性
用例	操作 HTML 中定义的属性	操作浏览器管理的属性
可用性	所有属性	并非所有属性
默认值	HTML 中定义的默认值	浏览器设置的默认值

何时使用 attr()

• 获取或设置 HTML 代码中定义的属性值。
• 操纵由用户交互设置的属性（例如，输入字段的 value 属性）。
• 当需要读取或修改属性的字符串值时。

何时使用 prop()

• 获取或设置浏览器管理的属性（例如，元素的 disabled 属性）。
• 更改 DOM 元素的行为或状态。
• 当需要与布尔属性进行交互时。

实际用例

使用 attr() 设置自定义数据属性：

$("div").attr("data-user-id", 1234);

使用 prop() 禁用输入字段：

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

使用 prop() 检查复选框是否选中：

if ($("input[type=checkbox]").prop("checked")) {
  // 复选框已选中
}

结论

attr() 和 prop() 方法是 jQuery 工具箱中强大的工具。理解它们之间的差异对于编写健壮且有效的代码至关重要。通过正确使用这些方法，开发人员可以轻松地操作 HTML 元素属性并控制其行为。