jQuery Attributes(属性)的使用(一、属性篇)

下面是本文的完整攻略。

jQuery Attributes(属性)的使用(一、属性篇)

什么是jQuery Attributes(属性)

在实际的开发工作中，我们经常需要获取或者设置元素的属性。而jQuery Attributes提供了一系列便捷的方法来操作元素的属性。

常用的jQuery Attributes方法

下面是几个常用的jQuery Attributes方法：

• .attr(): 获取或设置元素的属性。
• .removeAttr(): 删除元素的属性。
• .prop(): 获取属性或者元素状态（比如checked、disabled等）。
• .val(): 获取或设置元素的值。

jQuery attr()方法

在jQuery中，利用.attr()方法可以获取或设置元素的属性。

获取元素属性

下面是一个获取<img>元素的属性的示例：

let srcValue = $("img").attr("src");
console.log(srcValue);

上述代码会获取第一个<img>元素的src属性值，并输出到浏览器的控制台上。

设置元素属性

下面是一个设置<img>元素的属性的示例：

$("img").attr("alt", "A beautiful picture.");

上述代码会将所有的<img>元素的alt属性修改为"A beautiful picture."。

jQuery removeAttr()方法

利用.removeAttr()方法可以删除元素的属性。下面是一个删除<img>元素的alt属性的示例：

$("img").removeAttr("alt");

上述代码会删除所有的<img>元素的alt属性。

示例1：获取并修改图片地址

下面是一个获取并修改图片地址的示例：

<img src="placeholder.jpg" alt="A placeholder image">
<button id="changeSrcButton">Change the image source</button>

$("#changeSrcButton").click(function(){
  let imgUrl = prompt("Please enter the new image URL:");
  $("img").attr("src", imgUrl);
});

上述代码会在点击按钮后弹出一个对话框，要求用户输入新的图片URL。然后将所有的图片元素的src属性修改为用户输入的地址。

示例2：切换图片

下面是一个切换图片的示例：

<div id="pictureHolder">
  <img src="picture1.jpg" alt="Picture 1">
</div>

<button id="toggleImage">Toggle the image</button>

let currentImg = 1;

$("#toggleImage").click(function(){
  currentImg = (currentImg === 1) ? 2 : 1;
  let newSrc = "picture" + currentImg + ".jpg";
  $("img").attr("src", newSrc);
});

上述代码会在点击按钮后依次将图片元素的src属性修改为"picture1.jpg"和"picture2.jpg"。