1.什么是属性操作？
在上一讲中，我们介绍了jQuery选择器，知道了如何使用jQuery实现查找节点（增删改查中的查，剩余三个见下一讲），那么在找到节点之后，便是对节点的属性进行操作。对属性进行操作，具体来说也是增删改查这几个部分。
2. 获取属性的值？
- attr(attrName)
<body>
<div id="box1" name="header"></div>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
var res = $("#box1").attr("name");
console.log(res);
</script>
</body>
- prop(attrName)
<body>
<input type="checkbox" value="1">
<input type="radio" value="2">
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
$(":checkbox[value='1']").prop("checked", true);
$(":radio[value='2']").prop("checked", true);
</script>
</body>
3. 设置属性的值？
- attr(attrName, attrValue)
<body>
<div id="box1"></div>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
$("#box1").attr("idx", "1"); // 没有就会增加
var res = $("#box1").attr("idx");
console.log(res);
</script>
</body>
- prop(attrName, attrValue) 【设置属性时,会设置所有找到元素的属性】
<div class="box1" id="id1"></div>
<div class="box1" id="id2"></div>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
$(".box1").prop("idx", "1");
console.log($("#id1").prop("idx"));
console.log($("#id2").prop("idx"));
</script>
</body>
4. 删除属性？
- removeAttr(attrName)
<body>
<div id="box1" idx="1"></div>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
$("#box1").removeAttr("idx");
</script>
</body>
- removeProp(attrName)
5. attr方法与prop方法，应该使用哪个？
- 如果一个属性只有true和false两个属性值时，使用prop()，其他使用attr()
- 如 checked, selected 或者 disabled 使用prop()
6. 样式属性操作
- addClass()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.class1 {
width: 200px;
height: 50px;
}
.class2 {
background-color: gray;
}
.class3 {
color: red;
margin: 0 auto;
}
.class4 {
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="box1"> jQuery </div>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
// 添加一个样式类
$("#box1").addClass("class1");
// 再添加一个样式类
$("#box1").addClass("class2");
// 同时添加多个样式类(用空格隔开)
$("#box1").addClass("class3 class4");
</script>
</body>
</html>
- removeClass()
<body>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
// 删除一个样式类
$("div").removeClass("class1");
// 再删除一个样式类
$("div").removeClass("class2");
// 同时删除多个类(用空格隔开)
$("div").removeClass("class1 class2");
</script>
</body>
- toggleClass() 【添加或删除样式类(存在则删除，不存在则添加)】
7. 值操作
- html() 【添加或获取元素中的HTML】
<body>
<div id="box1"></div>
<div id="box2"></div>
<p>我喜欢阅读</p>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
var divElements = $("div");
divElements.html("<span>我喜欢旅行</span>");
// 获取html代码
console.log($('p').html());
</script>
</body>
- text() 【添加或获取元素中的文本】
<body>
<p>我喜欢阅读</p>
<h2></h2>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
var h2Elements = $("h2");
h2Elements.text("我喜欢体育");
// 获取标签包裹的文本内容
console.log($('h2').text());
</script>
</body>
- val()
<body>
<input type="text" name="username">
<input type="password" name="password" value="123">
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
$("input[name='username']").val("admin");
console.log($("input[name='password']").val());
</script>
</body>
8. 小结
- jquery的属性操部分可大体归纳为四大类操作：HTML属性操作，DOM属性操作，类样式属性操作以及值操作。
| 描述 | 方法 | |
|---|---|---|
| HTML 属性操作 | 对html文档中的属性进行获取，设置，修改和删除操作。 | attr()、removeAttr() |
| DOM 属性操作 | 对DOM元素的属性进行获取，设置，修改和删除操作。 | prop()、removeProp() |
| 类样式属性操作 | 是指对DOM属性className进行添加。 | addClass()、removeClass()、toggleClass() |
| 值操作 | 是对DOM属性value进行读取和设置操作。 | html()、text()、val() |