一直以来大家对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. [Inno Setup] 退出安装程序的两种方式

    1. 完全静默的退出 procedure ExitProcess(exitCode:integer); external 'ExitProcess@kernel32.dll stdcall'; ... ...

  2. from _sqlite3 import * ImportError: DLL load failed: 找不到指定的模块。

    *Error creating Django application: Error on python side. Exit code: 1, err: Traceback (most recent ...

  3. Visual Studio Code mac OS 安装 中文简体语言包

    先下载中文简体语言包 官网 https://marketplace.visualstudio.com/search?target=VSCode&category=Language%20Pack ...

  4. 配置secondarynamenode主机名masters

    1.配置hadoop的secondarynamenode,配置内容如下 node2 本文转自 素颜猪 51CTO博客,原文链接:http://blog.51cto.com/suyanzhu/19592 ...

  5. USACO Training Section 1.2 双重回文数 Dual Palindrom

    题目描述 如果一个数从左往右读和从右往左读都是一样,那么这个数就叫做"回文数".例如,12321就是一个回文数,而77778就不是.当然,回文数的首和尾都应是非零的,因此0220就 ...

  6. muduo网络库源码学习————线程池实现

    muduo库里面的线程池是固定线程池,即创建的线程池里面的线程个数是一定的,不是动态的.线程池里面一般要包含线程队列还有任务队列,外部程序将任务存放到线程池的任务队列中,线程池中的线程队列执行任务,也 ...

  7. XCTF练习题-WEB-webshell

    XCTF练习题-WEB-webshell 解题步骤: 1.观察题目,打开场景 2.根据题目提示,这道题很有可能是获取webshell,再看描述,一句话,基本确认了,观察一下页面,一句话内容,密码为sh ...

  8. HDU1214圆桌会议

    一个环,从1编号到n. 每次可以交换相邻的两个人, 问最少交换几次,使得每个数字的左右数字交换. 转载自:https://blog.csdn.net/yin_zongming/article/deta ...

  9. 线段树 扫描线 L - Atlantis HDU - 1542 M - City Horizon POJ - 3277 N - Paint the Wall HDU - 1543

    学习博客推荐——线段树+扫描线(有关扫描线的理解) 我觉得要注意的几点 1 我的模板线段树的叶子节点存的都是 x[L]~x[L+1] 2 如果没有必要这个lazy 标志是可以不下传的 也就省了一个pu ...

  10. 区间dp E - Multiplication Puzzle POJ - 1651

    E - Multiplication Puzzle  POJ - 1651 这个题目没有特别简单,但是也没有我想象之中的那么难,这个题目时区间dp,因为我们是要对区间进行考虑的. 但是呢,这个也和动态 ...