相同点
都可以获取属性值
attr() 设置或返回所选元素的属性/值
attr(attrName) 返回第一个匹配元素的属性值
attr(attrName, attrValue) 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2}) 为所有匹配元素设置多个属性值
removeAttr() 从每一个匹配的元素中删除一个属性
prop() 获取属性
removeProp() 移除属性
$('img').attr('src','图片地址')
$('img').attr({'src':'图片地址','title':'hh'})
$('img').removeAttr('title')
不同点
对于标签上有的能看到的属性和自定义属性都用attr
对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop
<input type="checkbox" id="i1" value="1">
$("#i1").attr("checked"); // undefined
$("#i1").prop("checked"); //未被选中 false
$(":checkedbox[value='1']").prop("checked",true); //设置选中
$("input[name='l1']").prop("checked",false);
选项卡(全选,反选,取消)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年纪</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label>
<input type="checkbox">
</label>
</td>
<td>李四</td>
<td>23</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox">
</label>
</td>
<td>李五</td>
<td>23</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox">
</label>
</td>
<td>李四</td>
<td>23</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox">
</label>
</td>
<td>李五</td>
<td>23</td>
</tr>
</tbody>
</table>
<input type="button" value="全选" id="b1">
<input type="button" value="反选" id="b2">
<input type="button" value="取消" id="b3">
<script src="jquery-3.4.1.min.js"></script>
<script>
//全选
$('#b1').click(function () {
$box = $("input[type = 'checkbox']");
console.log($box);
$box.prop('checked', true);
});
//反选
$('#b2').click(function () {
//找到所有的checkbox,保存在$boxEle
var $boxEle = $(':checkbox');
//遍历checkbox,根据每一个元素的状态做操作
for (var i; i < $boxEle.length; i++) {
$tmp = $boxEle[i];
//如果选中,设置为FALSE
if ($tmp.prop('checked')) {
$tmp.prop('checked', false);
} else {
$tmp.prop('checked', true);
}
}
});
//取消
$('#b3').click(function () {
$(':checkbox').prop('checked', false)
});
</script>
</body>
</html>