一直以来大家对jquery评价莫过于六个字 “吃得少，干的多” ，应用实例让大家看看这款牛到爆的插件能帮我们做什么，话不多说，直接加码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <input type="button" value="全选" onclick="CheckAll()"/>
  9. <input type="button" value="取消" onclick="CancleAll()"/>
  10. <input type="button" value="反选" onclick="ReverseAll()"/>
  11.  
  12. <table border="1">
  13.     <thead>
  14.     <tr>
  15.         <th>序 号</th>
  16.         <th>用 户</th>
  17.         <th>密 码</th>
  18.     </tr>
  19.     </thead>
  20.     <tbody id="i1">
  21.     <tr>
  22.         <td><input type="checkbox"/></td>
  23.         <td>1</td>
  24.         <td>11</td>
  25.  
  26.     </tr>
  27.     <tr>
  28.         <td><input type="checkbox"/></td>
  29.         <td>2</td>
  30.         <td>22</td>
  31.  
  32.     </tr>
  33.     <tr>
  34.         <td><input type="checkbox"/></td>
  35.         <td>3</td>
  36.         <td>33</td>
  37.  
  38.     </tr>
  39.  
  40.     </tbody>
  41. </table>
  42. <script src="jquery-3.5.1.js"></script>
  43. <script>
  44.  
  45.     function CheckAll() {
  46.         //Dom版本
  47.         // //根据id找到对应的tbody标签
  48.         // var tb = document.getElementById('i1');
  49.         // //找到tbody标签下的子类tr，再将其赋值给trs
  50.         // var trs = tb.children;
  51.         // //对trs内的每个标签进行循环，找到相应的td标签
  52.         // for (var i = 0; i < trs.length; i++) {
  53.         //     //循环体中拿到对应的td标签并对其内容进行检索
  54.         //     var current_tr = trs[i];
  55.         //     //利用两次firstElementChild取得标签input
  56.         //     var ck = current_tr.firstElementChild.firstElementChild;
  57.         //     ck.checked = true;
  58.         //     //这里不建议用set或者remove去修改自定义属性，尤其是remove，执行一次后就没法再做其他修改，容易产生bug
  59.         //     // ck.setAttribute('checked', 'checked');
  60.         // }
  61.  
  62.         //jquery版本
  63.         $('#i1 :checkbox').prop('checked', true);
  64.     }
  65.  
  66.     function CancleAll() {
  67.         /*
  68.         var tb = document.getElementById('i1');
  69.         var trs = tb.children;
  70.         //在trs内循环
  71.         for (var i = 0; i < trs.length; i++) {
  72.  
  73.             var current_tr = trs[i];
  74.             var ck = current_tr.firstElementChild.firstElementChild;
  75.             ck.checked = false;
  76.         }
  77.        */
  78.         //jquery版本
  79.         $('#i1 :checkbox').prop('checked', false);
  80.     }
  81.  
  82.     function ReverseAll() {
  83.         /*
  84.         var tb = document.getElementById('i1');
  85.         var trs = tb.children;
  86.         for (var i = 0; i < trs.length; i++) {
  87.             var current_tr = trs[i];
  88.             var ck = current_tr.firstElementChild.firstElementChild;
  89.             if (ck.checked) {
  90.                 ck.checked = false;
  91.                 // ck.removeAttribute("checked");
  92.             } else {
  93.                 ck.checked = true;
  94.                 // ck.setAttribute('checked', 'checked');
  95.  
  96.             }
  97.         }
  98.          */
  99.         $('#i1 :checkbox').each(function (i) {
  100.             //this 当前循环的运行的标签
  101.             if ($(this).prop('checked')) {
  102.                 $(this).prop('checked', false);
  103.             } else {
  104.                 $(this).prop('checked', true);
  105.  
  106.             }
  107.         })
  108.  
  109.     }
  110.  
  111. </script>
  112. </body>
  113. </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. （五）PL/SQL条件控制

    简述 决策结构需要程序员指定一个或多个条件要计算,或由程序进行测试,如果条件被确定为真那么一条或多条语句被执行,如果要被执行的其它语句条件被确定为假,则选其它执行块. PL/SQL编程语言提供了以下几 ...

  2. socket编程-多个客户端向服务器发送人脸照片，服务器返回识别结果(服务器使用多线程)...

    recognition.py import numpy as np import face_recognition import os class recognition: def __init__( ...

  3. TypeScript 2.0 正式发布

    9 月 22 日,TypeScript 2.0 正式发布了. TypeScript 是微软开发的开源的编程语言,主要负责人是 C# 之父 Anders Hejlsberg. TypeScript 成功 ...

  4. FreeRTOS-Qemu 实现三任务同步通信机制以及API信息

    1. 本次作业的考察要点: 作业地址:github.com/HustWolfzzb-Git/GCC/GDB/QEMU等工具的使用.FreeRTOS多任务同步和通信机制的掌握. 2. 编程作业: 在gi ...

  5. Js6利用class创建类

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 带权并查集--hdu3047 ZJnu stadium

    题意:给出一个n,m,n表示的是有n 个人,m表示的是 有m 对关系: 接下来输入的就是这m对关系,a,b,x:表示的是a,b相距x个距离:然后判断输入的是否与这个数的上面的数信息一致, 输出不一致的 ...

  7. 算法竞赛进阶指南--lowbit运算，找到二进制下所有是1的位

    // lowbit运算,找到二进制下所有是1的位 int H[37]; // 预处理 for (int i = 0; i < 36; i++) H[(1ll << i) % 37] ...

  8. RobotFrameWork 自动化环境搭建（基于 python2.7）

    1.自动化工具安装顺序 robot Framework(两个RF框架) WXpython(不要更改安装路径,自动安装在python文件中) 安装依赖库 RF3.0 和 RF1.5.2.1 打开 rid ...

  9. 设计模式（Java语言）- 原型模式

    原型模式(Prototype Pattern)也有人将原型模式称为克隆模式,是属于创造型设计模式,用于创建重复的对象,提供了一种创建对象的最佳方式.原型模式需要实现Cloneable接口,来实现对象的 ...

  10. 第 4 篇：用类视图实现首页 API

    作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 django-rest-framework 类视图拓展自 django 的类视图,只 ...