前端武器库之jQuery示例

1.全选 反选 取消

相关知识点：

- 选择器
- .prop
    $('#tb:checkbox').prop('checked');        获取值
    $('#tb:checkbox').prop('checked', true);  设置值
- .each
    jQuery方法内置循环： $('#tb:checkbox').xxxx

- $('#tb:checkbox').each(function(k){
        // k当前索引
        // this，DOM，当前循环的元素 $(this)
    })
- 三元运算  var v = 条件 ? 真值 : 假值
<body>
    <input type="button" value="全选" onclick="checkAll();" />
    <input type="button" value="反选" onclick="reverseAll();" />
    <input type="button" value="取消"  onclick="cancelAll();"/>
    <table border="1">
        <thead>
            <tr>
                <th>选项</th><th>IP</th><th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $('#tb :checkbox').prop('checked',true);
        }       // .prop 专门对checked操作
        function cancelAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function reverseAll() {
            $(':checkbox').each(function(k){  // .each 循环选中的每一个元素
                /*  Dom实现
                if(this.checked){
                    this.checked = false;
                }else{
                    this.checked = true;
                } */
                // this,代指当前循环的每一个元素；三元运算var v = 条件? 真值：假值
                var v = $(this).prop('checked')?false:true;
                // console.log(k,this);
                $(this).prop('checked',v);
            })
        }
    </script>
</body>

2.筛选器示例：左侧菜单点击展开内容

筛选器：

$('#i1').next()                  // 下一个            
$('#i1').prev()                  //往上找
$('#i1').nextAll()            　 // 下面所有           
$('#i1').prevAll()
$('#i1').nextUntil('#ii1')      // 下面直到哪里     
$('#i1').prevUntil('#ii1')
$('#i1').parent()                     // 父标签
$('#i1').parents()                   // 取得一个包含着所有匹配元素的祖先元素的元素集合
$('#i1').parentsUntil()           //查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$('#i1').children()
$('#i1').siblings()
$('#i1').find()
$('li').eq(1)   <——>  $('li:eq(1)')
first()
last()
hasClass(class)

 

添加移除样式：

$('#i1').addClass(..)  // 添加样式
$('#i1').removeClass(..)// 移除样式

示例：

<head>
    <style>
        .header{
            background-color: royalblue;
        }
        .content{
            min-height: 70px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="height:400px;width: 200px;border: 1px solid #dddddd">
        <div class="item">
            <div class="header">标题一</div>
            <div id="i1" class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题二</div>
            <div class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题三</div>
            <div class="content hide">内容</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.header').click(function(){
           // 当前点击的标签 $(this)； .next 获取某个标签的下一个标签
           // $(this).next().removeClass('hide');  移除hide属性
           // $(this).parent().siblings().find('.content').addClass('hide')
           $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
           // 链式编程
        })
    </script>
</body>

3.jQuery文本 样式 属性 文档处理操作

  • 文本操作：
$(..).text()            // 获取文本内容
$(..).text("<a>1</a>")  // 设置文本内容

$(..).html()           // 获取
$(..).html("<a>1</a>")  // 设置

$(..).val()                // 获取
$(..).val(..)          // 设置
  • 样式操作：
addClass 
removeClass 
toggleClass 比如实现网页开关灯功能

开关灯示例：

<head>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <input type='checkbox' id='i2'  />

    <input id="i1" type="button" value="开关" />
    <div class="c1 hide">asdfasdf</div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#i1').click(function(){
//            if($('.c1').hasClass('hide')){
//                $('.c1').removeClass('hide');
//            }else{
//                $('.c1').addClass('hide');
//            }
            $('.c1').toggleClass('hide');    // 一句搞定
        })
    </script>
</body>
  • 属性操作：
// 专门用于做自定义属性
$(..).attr('n')          // 获取
$(..).attr('n','v')      // 设置
$(..).removeAttr('n')    // 删除

<input type='checkbox' id='i1'  />
// 专门用于chekbox,radio  jQuery1、2版本checkbox使用attr的话有bug，所以用prop
$(..).prop('checked')
$(..).prop('checked', true)
  • 文档处理：
append    // 往后加
prepend   // 往前加
after     // 紧挨着后面
before    // 紧挨着前面

remove    // 删除
empty     // 只清空内容

clone     // 克隆一份数据

3.模态对话框

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }
    </style>
</head>
<body>
    <a onclick="addElement();">添加</a>
    <table border="1" id="tb">
        <tr>
            <td target="hostname">1.1.1.11</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.12</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.13</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
    </table>
    <div class="modal hide">
        <div>
            <input name="hostname" type="text"  />
            <input name="port" type="text" />
            <input name="ip" type="text" />
        </div>
        <div>
            <input type="button" value="取消" onclick="cancelModal();" />
            <input type="button" value="确定" onclick="confirmModal();" />
        </div>
    </div>
    <div class="shadow hide"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>

        $('.del').click(function () {
            $(this).parent().parent().remove();
        });

        function  confirmModal() {

            var tr = document.createElement('tr');
            var td1 = document.createElement('td');
            td1.innerHTML = "11.11.11.11";
            var td2 = document.createElement('td');
            td2.innerHTML = "8001";

            $(tr).append(td1);
            $(tr).append(td2);

            $('#tb').append(tr);

            $(".modal,.shadow").addClass('hide');
        }

        function  addElement() {
            $(".modal,.shadow").removeClass('hide');
        }
        function cancelModal() {
            $(".modal,.shadow").addClass('hide');
            $('.modal input[type="text"]').val("");
        }

        $('.edit').click(function(){
            $(".modal,.shadow").removeClass('hide');
            // this
            var tds = $(this).parent().prevAll();
            tds.each(function () {
                // 获取td的target属性值
                var n = $(this).attr('target');
                // 获取td中的内容
                var text = $(this).text();
                var a1 = '.modal input[name="';
                var a2 = '"]';
                var temp = a1 + n + a2;
                $(temp).val(text);
            });
//            var port = $(tds[0]).text();
//            var host = $(tds[1]).text();
//
//            $('.modal input[name="hostname"]').val(host);
//            $('.modal input[name="port"]').val(port);
            // 循环获取tds中内容
            // 获取 <td>内容</td> 获取中间的内容
            // 赋值给input标签中的value
        });
    </script>
</body>

4.tab切换菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .active{
            background-color: brown;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 5px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
    </style>
</head>
<body>
    <div style="width: 700px;margin:0 auto">
        <div class="menu">
            <div  class="menu-item active" a="1">菜单一</div>
            <div  class="menu-item" a="2">菜单二</div>
            <div  class="menu-item" a="3">菜单三</div>
        </div>
        <div class="content">
            <div b="1">内容一</div>
            <div class="hide"  b="2">内容二</div>
            <div class="hide" b="3">内容三</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.menu-item').click(function(){
            $(this).addClass('active').siblings().removeClass('active');
            var target = $(this).attr('a');
            $('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide');
        });
    </script>
</body>
</html>

上面是通过自定义属性实现的，下面不用自定义属性，用索引也能实现。

index 获取索引位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .active{
            background-color: brown;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 5px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
    </style>
</head>
<body>
    <div style="width: 700px;margin:0 auto">
        <div class="menu">
            <div  class="menu-item active" >菜单一</div>
            <div  class="menu-item" >菜单二</div>
            <div  class="menu-item" >菜单三</div>
        </div>
        <div class="content">
            <div >内容一</div>
            <div class="hide" >内容二</div>
            <div class="hide">内容三</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.menu-item').click(function(){
            $(this).addClass('active').siblings().removeClass('active');
            $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
        });
    </script>
</body>
</html>
View Code

相关文章：

  • 2022-02-19
  • 2021-08-21
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-12-28
  • 2021-10-07
  • 2021-12-05
  • 2021-09-13
  • 2021-05-19
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode