js attr

js attr

1. js attr定义

attr()方法是JavaScript中常用的方法之一，它用于获取或设置HTML元素的属性值。通过attr()方法，我们可以获取、修改或添加HTML元素的属性。

2. js attr语法

attr()方法的语法如下：

$(selector).attr(attributeName) // 获取属性值
$(selector).attr(attributeName, value) // 设置属性值

• selector：用于选择HTML元素的选择器，如id、class、tag name等。
• attributeName：要操作的属性名称。
• value：要设置的属性值。可选。

3. 获取属性值

我们可以使用attr()方法轻松地获取HTML元素的属性值。

以下是一个简单的示例，在HTML中，我们有一个<input>元素，它的id为myInput：

<input type="text" id="myInput" value="Hello World" />

现在，我们想要获取这个input元素的value属性值，可以使用attr()方法：

var value = $("#myInput").attr("value");
console.log(value);

运行结果：

Hello World

通过上面的代码，我们成功地获取了myInput元素的value属性值。

4. 设置属性值

使用attr()方法，我们还可以轻松地修改或添加HTML元素的属性值。

以下是一个简单的示例，在HTML中，我们有一个<img>元素，它的id为myImage：

<img src="img.jpg" alt="Image" id="myImage" />

现在，我们想要修改这个img元素的src属性值为new_image.jpg，可以使用attr()方法：

$("#myImage").attr("src", "new_image.jpg");

运行结果：

<img src="new_image.jpg" alt="Image" id="myImage" />

通过上面的代码，我们成功地修改了myImage元素的src属性值。

如果我们想在没有该属性时添加一个新的属性，也可以使用attr()方法：

$("#myImage").attr("title", "A beautiful image");

运行结果：

<img src="new_image.jpg" alt="Image" id="myImage" title="A beautiful image" />

通过上面的代码，我们成功地添加了myImage元素的title属性。

5. js attr其他用法

5.1. 获取属性值的函数形式

除了直接使用attr()方法，还可以将其作为一个函数使用：

var value = $.attr("#myInput", "value");
console.log(value);

运行结果：

Hello World

5.2. 多个属性设置

如果要设置多个属性值，可以使用一个对象来传递多个属性和值：

$("#myImage").attr({ "src": "new_image.jpg", "title": "A beautiful image" });

运行结果：

<img src="new_image.jpg" alt="Image" id="myImage" title="A beautiful image" />

5.3. 删除属性

使用attr()方法也可以删除HTML元素的属性。例如，我们可以删除myImage元素的alt属性：

$("#myImage").removeAttr("alt");

运行结果：

<img src="new_image.jpg" id="myImage" title="A beautiful image" />

通过上面的代码，我们成功地删除了myImage元素的alt属性。

6. js attr注意事项

• 如果一个属性不存在，使用attr()方法获取该属性值将返回undefined。
• 使用attr()方法设置属性值时，如果该属性不存在，将会添加该属性。