1. 属性操作
1.1 attr()
attr(attrName) // 返回第一个匹配元素的属性值
attr(attrName, attrValue) // 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2}) // 为所有匹配元素设置多个属性值
removeAttr() // 从每一个匹配的元素中删除一个属性
示例：
<a href="http://www.baidu.com">baidu</a>
<script src="jquery-3.4.1.min.js"></script>
$('a').attr('href'); //"http://www.baidu.com" 获取属性是href的属性值
$('a').attr('href','http://www.sogo.com'); //设置属性值
$('a').attr( { 'href': 'http://www.sogo.com', 'id': 'd1' } ); //设置多个属性值，注意是键值对
$('a').removeAttr('id'); //删除属性
示例：切换图片
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583909072724&di=8cb0520ba72a68414ecf22a0ea3c9d7a&imgtype=0&src=http%3A%2F%2Fimage.bitautoimg.com%2Fycbdc%2F15786860790678165.png" alt="">
<input type="button" value="下一张">
<script src="jquery-3.4.1.min.js"></script>
<script>
$(':button').click(function () {
$('img').attr('src','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583909072723&di=c99206be3a85b869d67b892e07766d3e&imgtype=0&src=http%3A%2F%2Fimage.bitautoimg.com%2Fycbdc%2F1581206776498696.png');
});
</script>
1.2 prop() 用于checkbox、radio和option，判断是否被默认选中。选中返回true，没选中返回false。
示例：
<input type="checkbox" id="d1" checked>
<input type="checkbox" id="d2" >
<script src="jquery-3.4.1.min.js"></script>
$('#d1').prop('checked'); //true
$('#d2').prop('checked'); //false
$('#d1').prop('checked',true); //设置选中
$('#d1').prop('checked',false); //取消选中
示例：表格的全选、取消、反选、删除、新增一行
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格的全选、反选、取消</title>
<style>
td {
text-align: center;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>tom</td>
<td>18</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>marry</td>
<td>28</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3</td>
<td>jack</td>
<td>22</td>
</tr>
</tbody>
</table>
<input type="button" value="全选" id="d1">
<input type="button" value="取消" id="d2">
<input type="button" value="反选" id="d3">
<input type="button" value="删除" id="d4">
<input type="button" value="新增一行" id="d5">
<script src="jquery-3.4.1.min.js"></script>
<script>
//找到所有含有checkbox的标签,放在变量里面，因为它多次被使用，不需要每次都查找
var $checkEles = $(':checkbox');
//1.全选：
$('#d1').click(function () {
$checkEles.prop('checked', true);//属性增加被选中
});
//2.取消：
$('#d2').click(function () {
$checkEles.prop('checked', false);//取消选中
});
//3.反选：选中的变成不选中，不选中的变成选中。true变false，false变true。
//注意：$checkEles[i]是DOM对象，$($checkEles[i])是jQuery对象。
$('#d3').click(function () {
for (var i = 0; i < $checkEles.length; i++) {
if ($($checkEles[i]).prop('checked')) {
$($checkEles[i]).prop('checked', false)
} else {
$($checkEles[i]).prop('checked', true)
}
}
});
//4.删除
$('#d4').click(function () {
for (var i = 0; i < $checkEles.length; i++) {
if ($($checkEles[i]).prop('checked')) {
$($checkEles[i]).parent().parent().remove()//删除tr标签
}
}
});
//5.新增一行
$('#d5').click(function () {
var trEle = document.createElement('tr');
$(trEle).html('<td><input type="checkbox"></td><td></td><td></td><td></td>');
$('tbody').append(trEle);
});
//5.新增一行
// $('#d5').click(function () {
// var trEle = document.createElement('tr');
// $(trEle).html('<td><input type=\"checkbox\"></td>'+'<td></td>'+'<td></td>'+'<td></td>');
// $('tbody').append(trEle);
// });
//5.新增一行
// $('#d5').click(function () {
// var trEle = document.createElement('tr');
// trEle.innerHTML = "<td><input type='checkbox'></td>"+'<td></td>'+'<td></td>'+'<td></td>';
// $('tbody').append(trEle);
// });
</script>
</body>
</html>
浙公网安备 33010602011771号