前端实战之DOM和jQuery分别实现：（全选，取消，反选）、tab菜单栏、模态框，进行有效对比

最新推荐文章于 2021-06-18 11:11:58 发布

Burgess_zheng

最新推荐文章于 2021-06-18 11:11:58 发布

阅读量465

点赞数 1

分类专栏：前端 HTML JS（Javascript） CSS

本文链接：https://blog.csdn.net/Burgess_zheng/article/details/86489080

版权

这篇博客对比了使用DOM和jQuery来实现全选、取消、反选功能，创建tab菜单栏以及模态框的方法。DOM实现包括删除器的三种方式，jQuery实现则展示了其简洁性。同时，DOM和jQuery分别用于创建横竖两种显示效果的tab菜单栏，以及模态框的显示和隐藏。博客提供了详细的执行结果和代码示例。

摘要由CSDN通过智能技术生成

上一篇：前端之jQuery常用总结点击跳转
目录篇：前端(html,css,js)目录篇点击跳转
下一篇：web框架的本质（socket,WSGI）点击跳转

删除器（全选，取消，反选）
DOM实现
jQuery实现
tab菜单栏
DOM实现（三种方式）
jQuery实现（两种显示：横竖）
模态框
DOM实现
jQuery实现

删除器（全选，取消，反选）

DOM实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
/*display:none；不显示该标签*/
        .c1{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
/*
position:fixed； 固定页面某个位置，（多层，这里第二层）
left: 0;top: 0;right: 0;bottom: 0;  覆盖全背景层（第一层）
background-color: black; 背景颜色：黑色
opacity: 0.6;透明度
z-index: 9; 层优先级，越大越上层
*/

        }
        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
/*
width: 500px;height: 400px; 该标签的宽度高度
position:fixed； 固定页面某个位置，（多层，这里第三层）
background-color: white; 背景颜色:白色
left: 50%; top: 50%;margin-left: -250px;margin-top: -200px; 该标签居中
z-index: 10; 层优先级，越大越上层
*/
    </style>
</head>
<body style="margin: 0;">

    <div>
        <input type="button" value="添加" onclick="ShowModel();" />
        <input type="button" value="全选" onclick="ChooseAll();" />
        <input type="button" value="取消" onclick="CancleAll();" />
        <input type="button" value="反选" onclick="ReverseAll();" />
<!--onclick="ShowModel();"点击该添加按钮就调用的ShowModel()函数-->

        <table>
<!--table：表-->
            <thead>
<!--thead：表头部-->
                <tr>
                    <th>选择</th>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
<!--tr：行   th：列-->
            </thead>

            <tbody id="tb">
<!--tbody：表内容-->
                <tr>
                    <td>
                        <input type="checkbox" checked="true" />
<!--input type="checkbox"  多选择框
checked="true"  有该了属性等于默认勾上-->
                    </td>
                    <td>1.1.1.1</td>
                    <td>190</td>
                </tr>
                <tr>
                    <td><input type="checkbox"f id="test" /></td>
                    <td>1.1.1.2</td>
                    <td>192</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.3</td>
                    <td>193</td>
                </tr>
<!--tr：行   td：列-->
            </tbody>
        </table>
    </div>

    <!-- 遮罩层开始 -->
    <div id="i1" class="c1 hide"></div>
    <!-- 遮罩层结束 -->

    <!-- 弹出框开始 -->
    <div id="i2" class="c2 hide">
        <p><input type="text" /></p>
        <p><input type="text" /></p>
<!--文本输入框-->
        <p>
            <input type="button" value="取消" onclick="HideModel();"/>
<!-- onclick="HideModel();"点击该添加按钮就调用的HideModel()函数-->
            <input type="button" value="确定"/>
        </p>

    </div>
    <!-- 弹出框结束 -->

    <script>
        function ShowModel(){
            document.getElementById('i1').classList.remove('hide');
            document.getElementById('i2').classList.remove('hide');
        }
/*
获取id=i1的标签并且去掉该标签的class属性的value:hide
获取id=i2的标签并且去掉该标签的class属性的value:hide
 */
        function HideModel(){
            document.getElementById('i1').classList.add('hide');
            document.getElementById('i2').classList.add('hide');
        }
/*
获取id=i1的标签并且增加该标签的class属性的value:hide
获取id=i2的标签并且增加该标签的class属性的value:hide
 */

        function ChooseAll(){
            var tbody = document.getElementById('tb');
//获取id=tb的标签
            var tr_list = tbody.children;
//获取该标签的所有子标签tr
            for(var i=0;i<tr_list.length;i++){
//循环所有的tr标签，current_tr
                var current_tr = tr_list[i];
//获取所有tr的下标的元素赋值给current_tr
                var checkbox = current_tr.children[0].children[0];
//取出该tr下标0的元素（该tr标签的第一个子标签）的下标0的元素（tr标签的第一个子标签下的第一子标签）
                checkbox.checked = true;
/*
checkbox.checked = false;修改该标签的checked属性=true
checked 是input标签checkbox多选择框的属性
checked=true;等于选择默认勾上
checked=false; 等于选择默认不勾
*/

            }
        }

        function CancleAll(){
            var tbody = document.getElementById('tb');
//获取id=tb的标签
            var tr_list = tbody.children;
//获取该标签的所有子标签tr
            for(var i=0;i<tr_list.length;i++){
//循环所有的tr标签，current_tr
                var current_tr = tr_list[i];
//获取所有tr的下标的元素赋值给current_tr
                var checkbox = current_tr.children[0].children[0];
//取出该tr下标0的元素（该tr标签的第一个子标签）的下标0的元素（tr标签的第一个子标签下的第一子标签）
                checkbox.checked = false;
/*
checkbox.checked = false;修改该标签的checked属性=false
checked 是input标签checkbox多选择框的属性
checked=true;等于选择默认勾上
checked=false; 等于选择默认不勾
*/
            }
        }

        function ReverseAll(){
            var tbody = document.getElementById('tb');
//获取id=tb的标签
            var tr_list = tbody.children;
//获取该标签的所有子标签tr
            for

最低0.47元/天解锁文章

Burgess_zheng

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端实战之DOM和jQuery分别实现：（全选，取消，反选）、tab菜单栏、模态框，进行有效对比

上一篇：前端之jQuery常用总结点击跳转目录篇：前端(html,css,js)目录篇点击跳转下一篇：web框架的本质（socket,WSGI）点击跳转目录删除器（全选，取消，反选） DOM实现 jQuery实现 tab菜单栏 DOM实现（三种方式） jQuery实现（两种显示：横竖）模态框 DOM实现 jQuer...
复制链接

扫一扫

专栏目录