jquery更改元素属性attr()方法操作示例

1. 简介
   首先需要明确的是，jQuery是一款优秀的JavaScript库，它可以简化HTML文档的遍历、操作和事件处理等操作。其中，attr()方法是jQuery中常用的DOM操作方法之一，用于获取或设置HTML元素的属性值。

2. 语法
   attr()方法的语法如下所示：

$(selector).attr(attributeName)
$(selector).attr(attributeName, value)

其中，第一个参数attributeName表示属性名称，第二个参数value表示属性值。如果只传一个参数，则表示获取元素的属性值；如果传两个参数，则表示设置元素的属性值。

1. 示例说明
   接下来，我们将通过两个示例来详细讲解attr()方法的使用。

3.1 示例一
在这个示例中，我们将使用attr()方法来设置图片的alt属性，以及更改按钮的文本内容。具体步骤如下：

• 在HTML文档中添加一张图片和一个按钮。

<img id="myimage" src="source.jpg" alt="">
<button id="mybutton">Click me</button>

• 使用jQuery选择器选中img元素和button元素，并使用attr()方法设置它们的属性值。

$(document).ready(function(){
  $("#myimage").attr("alt", "This is a beautiful image");
  $("#mybutton").attr("class", "btn-primary").text("Click me now"); // 这里可用class方法修改class属性，利用text方法修改按钮文本
});

在这个示例中，我们首先使用选择器选中了图片和按钮元素，并使用attr()方法给图片的alt属性设置了新的值。接着，我们通过attr()方法更改按钮的class属性，以及使用text()方法修改了按钮的文本内容。

3.2 示例二
在这个示例中，我们将更改输入框的disabled状态，并使用attr()方法获取输入框的value属性值。具体步骤如下：

• 在HTML文件中添加一个input元素。

<input type="text" id="myinput" value="Hello" disabled>

• 使用jQuery选择器选中input元素，并使用attr()方法设置它的disabled属性为false。

$(document).ready(function(){
  $("#myinput").attr("disabled", false); // 设置disabled属性为false，可以设置为true来禁用输入框
});

• 使用attr()方法获取input元素的value属性值，并将它输出到控制台中。

$(document).ready(function(){
  console.log($("#myinput").attr("value")); // 获取输入框的value属性，输出到控制台中
});

在这个示例中，我们使用attr()方法将输入框的disabled属性设置为false，使得输入框可以编辑。接着，我们使用attr()方法获取输入框的value属性，并将它输出到控制台中。

1. 总结
   通过以上两个示例，我们可以看到，attr()方法可以用于动态地更改HTML元素的属性值。在实际应用中，我们可以灵活地使用attr()方法，来满足不同场景下的需求。