jQuery attr() 方法

在 web 前端开发中，jQuery 是一个非常流行的 JavaScript 库，它简化了 DOM 操作和事件处理。其中的 attr() 方法是用来获取或设置 HTML 元素的属性值的。在本文中，我们将深入探讨 attr() 方法的用法和示例。

语法

attr() 方法的语法如下：

$(selector).attr(attributeName)

或

$(selector).attr(attributeName, value)

• selector：用于选择要操作的元素的选择器。
• attributeName：要操作的属性的名称。
• value：要设置的属性值。

获取属性值

要获取元素的属性值，可以使用 attr() 方法的第一个语法形式。例如，要获取一个按钮元素的 id 属性值，可以这样做：

var id = $("button").attr("id");
console.log(id);

设置属性值

要设置元素的属性值，可以使用 attr() 方法的第二个语法形式。例如，要设置一个图片元素的 src 属性值，可以这样做：

$("img").attr("src", "new_image.jpg");

示例

假设我们有以下 HTML 结构：

<button id="btn">Click me</button>
<img id="image" src="old_image.jpg" alt="Old Image">

现在，我们来演示如何使用 attr() 方法来获取和设置属性值：

// 获取按钮的 id 属性值
var btnId = $("#btn").attr("id");
console.log(btnId);

// 设置图片的 src 属性值
$("#image").attr("src", "new_image.jpg");

在上面的示例中，我们首先获取了按钮的 id 属性值，并将其打印到控制台中。然后，我们设置了图片的 src 属性值为新的图片路径。

总结

通过本文的学习，你应该了解了 jQuery 的 attr() 方法的用法和示例。这个方法在处理 HTML 元素的属性时非常方便，希望本文对你有所帮助！