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>