一直以来大家对jquery评价莫过于六个字 “吃得少，干的多” ，应用实例让大家看看这款牛到爆的插件能帮我们做什么，话不多说，直接加码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="CheckAll()"/> <input type="button" value="取消" onclick="CancleAll()"/> <input type="button" value="反选" onclick="ReverseAll()"/> <table border="1"> <thead> <tr> <th>序 号</th> <th>用 户</th> <th>密 码</th> </tr> </thead> <tbody id="i1"> <tr> <td><input type="checkbox"/></td> <td>1</td> <td>11</td> </tr> <tr> <td><input type="checkbox"/></td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox"/></td> <td>3</td> <td>33</td> </tr> </tbody> </table> <script src="jquery-3.5.1.js"></script> <script> function CheckAll() { //Dom版本 // //根据id找到对应的tbody标签 // var tb = document.getElementById(‘i1‘); // //找到tbody标签下的子类tr，再将其赋值给trs // var trs = tb.children; // //对trs内的每个标签进行循环，找到相应的td标签 // for (var i = 0; i < trs.length; i++) { // //循环体中拿到对应的td标签并对其内容进行检索 // var current_tr = trs[i]; // //利用两次firstElementChild取得标签input // var ck = current_tr.firstElementChild.firstElementChild; // ck.checked = true; // //这里不建议用set或者remove去修改自定义属性，尤其是remove，执行一次后就没法再做其他修改，容易产生bug // // ck.setAttribute(‘checked‘, ‘checked‘); // } //jquery版本 $(‘#i1 :checkbox‘).prop(‘checked‘, true); } function CancleAll() { /* var tb = document.getElementById(‘i1‘); var trs = tb.children; //在trs内循环 for (var i = 0; i < trs.length; i++) { var current_tr = trs[i]; var ck = current_tr.firstElementChild.firstElementChild; ck.checked = false; } */ //jquery版本 $(‘#i1 :checkbox‘).prop(‘checked‘, false); } function ReverseAll() { /* var tb = document.getElementById(‘i1‘); var trs = tb.children; for (var i = 0; i < trs.length; i++) { var current_tr = trs[i]; var ck = current_tr.firstElementChild.firstElementChild; if (ck.checked) { ck.checked = false; // ck.removeAttribute("checked"); } else { ck.checked = true; // ck.setAttribute(‘checked‘, ‘checked‘); } } */ $(‘#i1 :checkbox‘).each(function (i) { //this 当前循环的运行的标签 if ($(this).prop(‘checked‘)) { $(this).prop(‘checked‘, false); } else { $(this).prop(‘checked‘, true); } }) } </script>
</body> </html>
重点关注中间函数部分，注释掉的使用Dom写的，没注释的是用了神器Jquery。没有对比就没有伤害，一个的一大段被简单的一行就替代了，心好累。。。。。
当然，不能排斥Dom,因为Jquery也是用Dom封装的，所以我们可以用简单的方式实现功能，但还是得回到其根本上探究其原理，而且，在某些特定环境下并不推荐使用Jquery,
例如用户流量加载的情况下，什么都没运行之前先得加载一个插件，确实有点奢侈呀！！！！
原文：https://www.cnblogs.com/Rocknuo/p/12905702.html