一直以来大家对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. 2019-2020-1 20199329《Linux内核原理与分析》第二周作业

    <Linux内核原理与分析>第二周作业 一.上周问题总结: 未能及时整理笔记 Linux还需要多用 markdown格式不熟练 发布博客时间超过规定期限 二.本周学习内容: <庖丁解 ...

  2. 同步类的基础AbstractQueuedSynchronizer(AQS)

    同步类的基础AbstractQueuedSynchronizer(AQS) 我们之前介绍了很多同步类,比如ReentrantLock,Semaphore, CountDownLatch, Reentr ...

  3. Cacti nagios zabbix 的区别

    Cacti nagios zabbix 的区别 首先 Cacti 是一个用 rrdtool 来画图的网络监控系统, 通常一说到网络管理, 大家首先想到的经常是 mrtg, 但是 mrtg 画的图比较简 ...

  4. 【shell】shell脚本入门

    1. 前言 1.1 为什么学习shell编程 Shell脚本语言是实现Linux/UNIX系统管理及自动化运维所必备的重要工具,Linux/UNIX系统的底层及基础应用软件的核心大部分涉及Shell脚 ...

  5. angular2相关

    脚手架安装一个项目 1.全局安装angular脚手架 npm install -g @angular/cli 2.初始化一个文件夹 ng new my-angular-demo 3.进入文件夹 cd ...

  6. db2 锁表

    2019独角兽企业重金招聘Python工程师标准>>> 查询锁表情况 db2 => get snapshot for locks on databasename 可以看到什么表 ...

  7. 写给MongoDB开发者的50条建议Tip21

    本系列文章翻译自<50 Tips and Tricks for MongoDB Developers>,暂时没有找到中文版,反正自己最近也在深入学习mongodb,所以正好拿来翻译一下.一 ...

  8. 使用SWIG将C++接口转换成Java接口

    PS:此文章仅作为个人记录使用,代码属于私密,故无法公开: 以C++类classifier为例,文件保存于百度网盘 https://pan.baidu.com/s/1c2AwhaS(需密码) 系统:U ...

  9. Linux环境下，MongoDB 3.6.10 的安装步骤，以及设置用户和密码，配置随处执行mongo命令启动客户端，以及所遇到的问题

    https://blog.csdn.net/qinaye/article/details/87920651 二.设置MongoDB用户和密码2.1 利用./mongo命令连接mongoDB客户端../ ...

  10. C++课程设计，12306模拟写起来就是这么粗暴

    这篇文章很详细,也很多希望可以好好看看!看完C++稳过! 一.12306应该具备那些功能 1.查询(一个月以内的): 1.查车票:出发地+目的地+出发时间->显示经过两站车票信息 (余票,车次信 ...