一直以来大家对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(小实例单选-多选-反选)的更多相关文章

  1. jquery-1 jquery几个小实例

    jquery-1  jquery几个小实例 一.总结 一句话总结:jquery真的是简单加简便. 1.jquery中改变多个css属性怎么整? 可以链式连接方式,也可以大括号整多个.中间是键值对加引号 ...

  2. python: DOM 小实例

    一.全选 全部取消  反选 全选:选择指定的所有项目. 全部取消: 取消所有选定的项目. 反选: 选择未选定的,之前已选定的则取消. <!DOCTYPE html> <html la ...

  3. jQuery 与js判断是否单选复选选中

    js判断复选:这段代码昨天网上查看的资料没保存出处,抱歉 var obj=document.getElementsByName("diseaseSet"); //选择所有name= ...

  4. jQuery的DOM操作实例（3）——创建节点&&编写一个弹窗

    一.原生JavaScript编写弹窗 二.jQuery编写弹窗 知识点归纳总结: 在原生JavaScript中,创建一个节点: var oDiv=document.createElement(&quo ...

  5. jQuery的DOM操作实例（2）——拖拽效果&&拓展插件

    一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件

  6. jQuery的DOM操作实例（1）——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

  7. JS基础(一)dom小实例

    DOM的新增示例 <script language="JavaScript"> window.onload = function(){ //createDocument ...

  8. 微信小程序单选/多选框样式重新

    /* 重写 checkbox 样式 */ /* 未选中的 背景样式 */ checkbox .wx-checkbox-input{ border-radius: 50%;/* 圆角 */ width: ...

  9. JQuery 更改属性 JQ对象循环 each 全选反选 三元运算

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. docker（2）

    docker三大核心组件的概念 1镜像: Docker 镜像类似于虚拟机镜像,可以将它理解为一个只读的模板.例如,一个镜像可以包含一个基本的操作系统环境,里面仅安装了 Apache 应用程序(或用户需 ...

  2. DiskPart.exe and managing Virtual Hard Disks (VHDs) in Windows 7

    coreygoOctober 7, 2009 In Windows 7, new commands have been added in DiskPart to allow for the creat ...

  3. Python执行Linux cmd命令，获取输出的一种方法，输出是bytes

    import subprocess p = subprocess.Popen('df -lh', stdout=subprocess.PIPE, shell=True) print(p.stdout. ...

  4. Spring5参考指南:依赖注入

    文章目录 依赖注入 依赖注入的配置详解 depends-on lazy-init 自动装载 方法注入 依赖注入 依赖注入就是在Spring创建Bean的时候,去实例化该Bean构造函数所需的参数,或者 ...

  5. ps 和 top

    ps 进程和线程的关系: (1)一个线程只能属于一个进程,而一个进程可以有多个线程,但至少有一个线程. (2)资源分配给进程,同一进程的所有线程共享该进程的所有资源. (3)处理机分给线程,即真正在处 ...

  6. material UI中withStyles和makeStyles的区别

      在material UI中,withStyles和makeStyles是经常使用的两个用于封装样式的函数.对于刚使用material UI的开发者而言,可能不太清楚这两者的区别.   本文简要探究 ...

  7. JavaScript实现选择排序

    一.选择排序简介 **冒泡排序.插入排序.选择排序合称为简单排序.**下面是选择排序的思想: 假设有一个数组a,我们想象成有一个班级名叫a班,现在全班随意排成一排,排头的位置是a[0],排尾的位置是a ...

  8. ACM及各类程序竞赛专业术语

    AC (Accepted) 程序通过 WA (Wrong Answer) 错误的答案 PE (Presentation Error) 输出格式错误 RE (Runtime Error) 程序执行错误 ...

  9. 聊聊select, poll 和 epoll

    聊聊select, poll 和 epoll 假设项目上需要实现一个TCP的客户端和服务器从而进行跨机器的数据收发,我们很可能翻阅一些资料,然后写出如下的代码. 服务端 void func(int s ...

  10. linux命令之df dh

    df -h, --human-readable 查看磁盘空间占用情况 df -h du -h, --human-readable -s, --summarize 查看文件大小 du -h test.t ...