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,

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

秒客网

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

相关文章