属性操作，指的是使用 jQuery 来操作一个元素的 HTML 属性。注意，这里说的属性操作，指的是 HTML 属性，而不是 CSS 属性。
图 1：获取属性的效果
图 2：默认效果
图 3：点击按钮后的效果
图 4：默认效果
图 5：点击按钮后的效果
像下面有一个 input 元素的属性操作，指的就是操作它的 id、type、value 等，其他元素也类似。
<input id="btn" type="button" value="提交"/>
在 jQuery 中，对于 HTML 属性的操作共有以下4种。
- 获取属性。
- 设置属性。
- 删除属性。
- prop() 方法。
本节教程先来介绍前 2 种，后两种下节介绍。
jQuery attr()方法获取属性
在 jQuery 中，我们可以使用 attr() 方法来获取某一个元素的 HTML 属性值。
语法：
$().attr("属性名")
获取某个元素的 HTML 属性值，一般都是通过属性名来找到该属性对应的值。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("#btn_src").click(function () {
alert($("img").attr("src"));
});
$("#btn_alt").click(function () {
alert($("img").attr("alt"));
});
})
</script>
</head>
<body>
<img src="img/jquery.png" alt="jquery标志"/><br />
<input id="btn_src" type="button" value="获取src属性值"/>
<input id="btn_alt" type="button" value="获取alt属性值"/>
</body>
</html>
预览效果如图 1 所示。
图 1：获取属性的效果
在这个例子中，我们使用 attr() 方法来获取 img 元素的 src 和 alt 两个属性的取值。
jQuery attr()方法设置属性
在 jQuery 中，设置某一个元素的 HTML 属性值，我们用的也是 attr() 方法。
语法：
//设置一个属性
$().attr("属性", "取值")
//设置多个属性
$().attr({"属性1": "取值1", "属性2":"取值2", …, "属性n":"取值n"})
对于设置属性，jQuery 有两种语法形式：一种是“设置一个属性”，另一种是“设置多个属性”。对于设置多个属性的语法，我们传入 attr() 方法的是一个包含“键值对”的对象。使用这种语法可以轻松地扩展，以便一次性修改多个属性。
举例：设置一个属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
var flag = true;
$("#btn").click(function(){
if(flag){
$("#pic").attr("src", "img/2.png");
flag = false;
}else{
$("#pic").attr("src", "img/1.png");
flag = true;
}
});
})
</script>
</head>
<body>
<input id="btn" type="button" value="修改" /><br/>
<img id="pic" src="img/1.png" />
</body>
</html>
默认情况下，预览效果如图 2 所示。
图 2：默认效果
我们点击【修改】按钮后，预览效果如图 3 所示。
图 3：点击按钮后的效果
这里使用一个布尔变量 flag 来标识两种状态，使两张图片可以来回切换。
举例：设置多个属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
var flag=true;
$("#btn").click(function () {
if (flag) {
$("#pic").attr({"src":"img/2.png","alt":"漩涡香燐","title":"漩涡香燐"});
flag=alse;
}else{
$("#pic").attr({"src":"img/1.png","alt":"日向雏田","title":"日向雏田"});
flag=true;
}
});
})
</script>
</head>
<body>
<input id="btn" type="button" value="修改" /><br/>
<img id="pic" src="img/1.png" alt="日向雏田" title="日向雏田"/>
</body>
</html>
默认情况下，预览效果如图 4 所示。
图 4：默认效果
我们点击【修改】按钮后，预览效果如图 5 所示。
图 5：点击按钮后的效果
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/23805.html