一直以来大家对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. 字符串的z型转换

    class Solution(object):     def convert(self, s, numRows):         if numRows==1:             return ...

  2. vue + ArcGIS 地图应用系列一：arcgis api本地部署(开发环境)

    封面 1. 下载 ArcGIS API for JavaScript 官网地址: https://developers.arcgis.com/javascript/3/ 下载地址:http://lin ...

  3. Xapian实战（二）：core concepts

    参考资料 core concepts 正文 1. 并发性 xapian不包含任何全局变量,所以多线程编程中,在没有共享资源的情况下可以安全使用xapian.在实际操作中,由于每个线程都可以创建自己的x ...

  4. C语言编程入门题目--No.8

    题目:输出9*9口诀. 1.程序分析:分行与列考虑,共9行9列,i控制行,j控制列. 2.程序源代码: #include "stdio.h" main() { int i,j,re ...

  5. 图论--2-SAT--HDOJ/HDU 1824 Let's go home

    Problem Description 小时候,乡愁是一枚小小的邮票,我在这头,母亲在那头.                         -- 余光中 集训是辛苦的,道路是坎坷的,休息还是必须的. ...

  6. CodeForces - 262B

    Roma works in a company that sells TVs. Now he has to prepare a report for the last year. Roma has g ...

  7. win7乱码问题解决方法（cmd变小，plsql客户端乱码）

    1.点击控制面板:时钟.语言和区域:区域和语言:管理点击更改系统区域设置,选中英语(英国):重启 2.点击控制面板:时钟.语言和区域:区域和语言:管理点击更改系统区域设置,选中中文(简体,中国):重启 ...

  8. C. K-Complete Word(小小的并查集啦~)

    永久打开的传送门 \(\color{Pink}{-------------分割-------------}\) \(n最大有2e5,那么暴力一定不行,找规律\) \(我们发现第i位的字符一定和第i+k ...

  9. CSS3.16

    <style>#back-top { position: fixed; bottom: 10px; right: 5px; z-index: 99;}#back-top span { wi ...

  10. Vuel路由跳转动画

    1.App.vue中添加 <transition :name="animate"> <router-view/> </transition> e ...