jquery VS Dom(小实例单选-多选-反选)

一直以来大家对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,

例如用户流量加载的情况下，什么都没运行之前先得加载一个插件，确实有点奢侈呀！！！！

posted @ 2020-05-17 16:34  许诺1994  阅读(173)  评论(0)    收藏  举报