jquery案例

jquery案例

案例和学习

链接：https://pan.baidu.com/s/1sicBIJbC1gBpS7XK9yB88g 
提取码：v476

1：开关灯
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开光灯</title>
    <style>

    </style>
</head>
<body>
<button id="btn1">开灯</button>
<button id="btn2">关灯</button>

</body>
</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
    //1.设置关灯事件：将body改为黑色背景
    $('#btn1').click(function () {
        $('body').css('backgroundColor','black');
    });

    //1.设置开灯事件：将body改为白色背景
    $('#btn2').click(function () {
        $('body').css('backgroundColor','white');
    });
</script>

2：下拉菜单

     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>下拉菜单</title>
         <style>
             .lis{
                 display: none;
             }
         </style>
     </head>
     <body>
     <ul>
         <li>
             <button >第1个菜单</button>
             <ul>
             <li class="lis">第1个菜单的第1个子菜单</li>
             <li class="lis">第1个菜单的第2个子菜单</li>
             </ul>
         </li>
         <li>
             <button >第2个菜单</button>
             <ul>
                 <li class="lis">第2个菜单的第1个子菜单</li>
                 <li class="lis">第2个菜单的第2个子菜单</li>
             </ul>
         </li>
     </ul>
     </body>
     </html>
     <script src="jquery-3.6.0.min.js"></script>
     <script>
        $(function () {
            //要求：移动到对应的菜单，弹出二级菜单，移出菜单，隐藏二级菜单
            //重点：要精确找到对应的元素
            //给一级菜单设置移入事件
            $('ul>li>button').mouseenter(function () {
                //因为我们查找到的button是位于li的一个内元素，要找到父元素li再在里面找到ul下的弹出就行
               $(this).parent().children('ul').children('li').css('display','block')
            });
            //给一级菜单设置移出事件
            $('ul>li>button').mouseleave(function () {
                //因为我们查找到的button是位于li的一个内元素，要找到父元素li再在里面找到ul下的隐藏就行
                $(this).parent().children('ul').children('li').css('display','none')
            });
        })
     </script>

3：突出变色案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>突出变色案例</title>
        <style>
            .div1{
                height: 200px;
                width: 200px;
                border: 1px solid red;
                background-color: honeydew;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
    </body>
    </html>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
       $(function () {
           //突出变色案例
           //分析1：移入对应的div后,将除自己之外的元素的背景色改为黑色，自己的改为白色.
           //分析2：移出对应的div后，除自己之外的元素改为白色.
           //1.移入事件
           $('body div').mouseenter(function () {
             //自己变色为白色
             $(this).css('opacity','1');
             //同等级元素变为黑色
             $(this).siblings('div').css('background-color','black');
           });
           //2.移除事件
           $('body div').mouseleave(function () {
               //同等级元素变为白色
               $(this).siblings('div').css('background-color','honeydew');
           });
       })
    </script>

4：手风琴案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>下拉菜单</title>
        <style>
            .div1{
                height: 50px;
                width: 200px;
                border: 1px solid red;
                display: none;
            }
        </style>
    </head>
    <body>
    <ul>
        <li>
            <span>标题1</span>
            <div class="div1">我是第1个弹出div</div>
        </li>
        <li>
            <span>标题2</span>
            <div class="div1">我是第2个弹出div</div>
        </li>
        <li>
            <span>标题3</span>
            <div class="div1">我是第3个弹出div</div>
        </li>
        <li>
            <span>标题4</span>
            <div class="div1">我是第4个弹出div</div>
        </li>
    </ul>
    </body>
    </html>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
       $(function () {
           //手风琴案例
           //要求：点击对应的标题弹出对饮的div，收掉其他的标题的div,重复点击收掉自己的div
           //分析1：点击对应的按钮将对应的div显示，隐藏其他的div。
           //分析2：判断自己的div是否展开，是就隐藏，不是就展开。
           $('ul li ').click(function () {
               //判断是否展开，当没有展开的时候展开自己的div，隐藏其他的div
               if ($(this).children('div').css('display') == 'none'){
                   $(this).children('div').show().parent().siblings('li').children('div').hide();
               }
               //当展开后隐藏自己的div
               else {
                   $(this).children('div').hide();
               }
           });
       })
    </script>

5：淘宝精选案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>淘宝精选案例</title>
        <style>
            .div-main{
                height: 302px;
                width: 606px;
                border: 1px solid black;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
            .div-left{
                height: 300px;
                width: 200px;
                float: left;
                border: 1px solid black;
            }
            .dis{
                display: none;
            }
        </style>
    </head>
    <body>
    <div class="div-main">
        <div class="div-left" id="left">
            <ul>
                <li>标题1</li>
                <li>标题2</li>
                <li>标题3</li>
                <li>标题4</li>
                <li>标题5</li>
            </ul>
        </div>
        <div class="div-left" id="center">
            <ul>
                <li class="dis">图片1</li>
                <li class="dis">图片2</li>
                <li class="dis">图片3</li>
                <li class="dis">图片4</li>
                <li class="dis">图片5</li>
                <li class="dis">图片6</li>
                <li class="dis">图片7</li>
                <li class="dis">图片8</li>
                <li class="dis">图片9</li>
                <li class="dis">图片10</li>
            </ul>
        </div>
        <div class="div-left" id="right">
            <ul>
                <li>标题6</li>
                <li>标题7</li>
                <li>标题8</li>
                <li>标题9</li>
                <li>标题10</li>
            </ul>
        </div>

    </div>
    </body>
    </html>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        $(function (){
            //淘宝精品案例
            //需求:点击对应的li,中间显示对应的图片
            //分析1：点击要分别设置移入左边和右边的li事件
            //分析2：清楚的知道点击位于父元素ul中的第几个li子元素。
            //分析3:右边的li元素个数要加上做右边的li元素总数。

            //1.左边移入事件
            $('#left ul>li').mouseenter(function (){
                //index()获取对应的索引,就是位于其中的第几个元素
                var s=$(this).index();
                //将中间对饮的图片显示，其他的图片隐藏
                $('#center ul>li').eq(s).show().siblings().hide();
            });

            //2.右边移入事件
            $('#right ul>li').mouseenter(function (){
                //index()获取对应的索引,就是位于其中的第几个元素
                var s=$(this).index();
                //获取左边所有的li元素个数
                var z=$('#left ul>li').length;
                //将中间对饮的图片显示，其他的图片隐藏
                $('#center ul>li').eq(s+z).show().siblings().hide();
            });
        });
    </script>

6：tab切换案例
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>tab切换</title>
        <style>
            .center{
                height: 200px;
                width: 600px;
                border: 1px solid black;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }

            .title{
                height: 30px;
                width: 600px;
                border-bottom: 1px solid black;
            }


            .neiron{
                height: 169px;
                width: 600px;
            }

            .none{
                display: none;
            }

            .block{
                display: block;
            }

        </style>
    </head>
    <body>
        <div class="center">
            <div class="title">
                <button>标题1</button>
                <button>标题2</button>
                <button>标题3</button>
            </div>
            <div class="neiron">
                <span class="block">标题1的内容</span>
                <span class="none">标题2的内容</span>
                <span class="none">标题3的内容</span>
            </div>
        </div>
    </body>
    </html>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            //tab切换
            //要求：当鼠标移入对应的按钮时，显示对应的内容
            //设置鼠标移入
            $('.title>button').mouseenter(function (){
                //查找到对应的移入
                var s=$(this).index();
                //根据查找到的显示对应的内容，将兄弟隐藏。
                //分析：将自己的display的none属性删除，添加block。将兄弟的block属性删除，添加none属性
                $('.neiron>span').eq(s).removeClass('none').addClass('block').siblings().removeClass('block').addClass('none');
            });
        })
    </script>
6：开机动画

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>开机动画</title>
        <style>
            .div{
                height: 300px;
                width: 200px;
                position: absolute;
                right: 0px;
                bottom: 0px;
                overflow: hidden;
            }
            .button{
                height: 20px;
                width: 60px;
                position: absolute;
                right: 0px;
                cursor:pointer;
            }
            .div1{
                height: 150px;
                width: 200px;
            }

        </style>
    </head>
    <body>
    <div class="div">
        <button class="button">关闭</button>
        <div class="div1" id="div1">图片1</div>
        <div class="div1" id="div2">图片2</div>
    </div>
    </body>
    </html>
    <script src="jquery-3.6.0.min.js"></script>
    <script>

    $(function (){
        //要求:点击对应的关闭按钮,实现图片2向下隐藏，，隐藏完毕后图片1向右隐藏。
        //要点1：css设计的时候要采用绝对定位，按钮采用定位,div内容要完全隐藏overflow: hidden;
        //要点2：先要等图片2完毕后在做图片1。
        //要点3：图片2要向下隐藏,div的height要减去图片2的div.图片1向右隐藏，div的width变为0.

        $('.button').click(function () {
            $('.div').animate({
                height:150
            },1500,function (){
                $('.div').animate({
                    width:0
                },2000);
            })
        });
    });
    </script>

7：动画下拉菜单
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动画下拉菜单</title>
        <style>
            .lis{
                display: none;
            }
        </style>
    </head>
    <body>
    <ul>
        <li>
            <button >第1个菜单</button>
            <ul>
            <li class="lis">第1个菜单的第1个子菜单</li>
            <li class="lis">第1个菜单的第2个子菜单</li>
            </ul>
        </li>
        <li>
            <button >第2个菜单</button>
            <ul>
                <li class="lis">第2个菜单的第1个子菜单</li>
                <li class="lis">第2个菜单的第2个子菜单</li>
            </ul>
        </li>
    </ul>
    </body>
    </html>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
       $(function () {
           //要求：移动到对应的菜单，弹出二级菜单，移出菜单，隐藏二级菜单
           //重点：要精确找到对应的元素
           //给一级菜单设置移入事件
           $('ul>li>button').mouseenter(function () {
               console.log($(this).parent().children('ul').children('li').slideDown(500));
           });
           //给一级菜单设置移出事件
           $('ul>li>button').mouseleave(function () {
               console.log($(this).parent().children('ul').children('li').slideUp(500));
           });
       })
    </script>

8：动画下拉菜单2
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动画下拉菜单2</title>
        <style>
            .lis{
                display: none;
            }
        </style>
    </head>
    <body>
    <ul>
        <li>
            <button >第1个菜单</button>
            <ul>
            <li class="lis">第1个菜单的第1个子菜单</li>
            <li class="lis">第1个菜单的第2个子菜单</li>
            </ul>
        </li>
        <li>
            <button >第2个菜单</button>
            <ul>
                <li class="lis">第2个菜单的第1个子菜单</li>
                <li class="lis">第2个菜单的第2个子菜单</li>
            </ul>
        </li>
    </ul>
    </body>
    </html>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
       $(function () {
           //要求：移动到对应的菜单，弹出二级菜单，移出菜单，隐藏二级菜单
           //重点：要精确找到对应的元素
           //给一级菜单设置移入事件
           $('ul>li>button').mouseenter(function () {
               $(this).parent().children('ul').children('li').stop();
               console.log($(this).parent().children('ul').children('li').slideDown(1000));
           });
           //给一级菜单设置移出事件
           $('ul>li>button').mouseleave(function ( ){
               $(this).parent().children('ul').children('li').stop();
               console.log($(this).parent().children('ul').children('li').slideUp(1000));
           });
       })
    </script>
9:固定导航栏
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>固定导航1栏</title>
        <style>
            .div1{
                height: 200px;
                margin: auto;
            }
            .div2{
                height: 100px;
               margin: auto;

            }
            .div3{
                height: 800px;
               margin: auto;
            }
            .div2-pos{
                position: fixed;
                left: 0px;
                top: 0px;
                margin: auto;

            }
        </style>
    </head>
    <body>
    <div class="div1">内容1</div>
    <div class="div2">导航栏</div>
    <div class="div3">内容2</div>
    </body>
    </html>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            //案例：导航栏固定
            //需求:页面滚动后，导航栏不边
            //分析：页面滚动出导航栏后给导航栏设置绝对定位。当滚回来后取消绝对定位。
            //获取内容一的高度
            var div1Top=$('.div1').height();
            $(window).scroll(function () {
                //获取页面滚动高度
                var winTop=$(this).scrollTop();
                //当内容1滚动出去后，隐藏内容1，给导航栏设置绝对定位，给内容3设置外边距高度
                if (winTop>=div1Top){
                    $('.div1').hide();
                    $('.div2').addClass('div2-pos');
                    //设置第3部分的内容外边距高度为导航栏的高度
                    //ie浏览器不支持
                    $('.div3').css({
                        marginTop:$('.div2').height()
                    });
                }
                else{
                    $('.div1').show();
                    $('.div2').removeClass('div2-pos');
                    $('.div3').css('margin-top',0);
                }
            });
        });
    </script>

10.图片放大
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .img{
                height: 200px;
                width: 200px;
            }
        </style>
    </head>
    <body>
    <img src="img/img.png" class="img">
    <img src="img/img_1.png" class="img">
    <img src="img/img_2.png" class="img">
    <div style="width: 400px;height: 400px;border: 1px solid black">
        <img style="width: 400px;height: 400px;">
    </div>

    </body>
    </html>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            //案例：图片放大
            //需求：点击对应的图片，将图片在对应区域放大
            //设置图片点击
            $('.img').click(function (){
                //获取图片的src地址
                var src=$(this).attr('src');
                //将地址属性添加到对应的区域
                $('div>img').attr('src', src);
            });
        });
    </script>

11.城市选择
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>城市选择</title>
        <style>
            div{
                height: 400px;
                width: 200px;
                border: 1px solid black;
                float: left;
            }
        </style>
    </head>
    <body>
    <div id="div1">
        <select id="sel1" multiple>
            <option>城市1</option>
            <option>城市2</option>
            <option>城市3</option>
            <option>城市4</option>
            <option>城市5</option>
        </select>
    </div>
    <div id="div2">
        <button id="btn1" >>></button>
        <button  id="btn2">></button>
        <button id="btn3"><<</button>
        <button id="btn4"><</button>
    </div>
    <div id="div3">
        <select id="sel2" multiple></select>
    </div>
    </body>
    </html>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            //案例：城市选择
            //需求：将选中的城市从左边剪切到右边或右边剪切到左边，或全部转移。
            //1.将所有的左边对象剪切到右边
            $('#btn1').click(function () {
                $('#div1>select>option').appendTo($('#sel2'));
            });

            //2.把左边的选中的选项转到右边
            $('#btn2').click(function () {
                $('#div1>select>option:selected').appendTo($('#sel2'));
            });
            //3.将所有右边的对象剪切到左边
            $('#btn3').click(function () {
                $('#div3>select>option').appendTo($('#sel1'));
            });
            //4.把右边的选中的选项转到左边
            $('#btn4').click(function () {
                $('#div3>select>option:selected').appendTo($('#sel1'));
            });
        })
    </script>

12.添加内容，生成删除，生成表格，生成删除on方式。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>生成表格</title>
        <style>
            .add{
                width: 200px;
                height: 200px;
                display: none;
                position: absolute;
                left: 0px;
                bottom: 0px;
                right: 0px;
                top: 0px;
                margin: auto;
            }
            .add-zhe{
                width: 100%;
                height: 100%;
                display: none;
                opacity: 0.7;
                background-color: floralwhite;
                position: fixed;
                left: 0px;
                bottom: 0px;
                right: 0px;
                top: 0px;
                margin: auto;
            }
        </style>
    </head>
    <body>
    <button id="empty">清空</button><button id="add">添加</button>
    <table style="border: 1px solid black">
        <tr><th>标题</th><th>内容</th><th>操作</th></tr>
    </table>
    <div class="add-zhe"></div>
    <form class="add">
        <p>添加数据</p>
        <input type="text" id="add-title" value="标题">
        <input type="text" id="add-text" value="内容">
        <input type="button" id="add-to" value="添加">
        <input type="button" id="add-fa" value="返回">
    </form>
    </body>
    </html>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            //案例：生成表格
            //需求：使用数据生成一个表格，
            //分析：将数据进行拼接后使用sppend()添加到表格里
    
            //数据
            var date=[{
                'title':'标题1',
                'text':'内容1'
            },{
                'title':'标题2',
                'text':'内容2'
            },{
                'title':'标题3',
                'text':'内容3'
            }];
            //将数据拼接
            var tx=[];
            for (var i=0;i<date.length;i++){
                tx.push('<tr>');
                for (var key in date[i]){
                    tx.push('<td>');
                    tx.push(date[i][key]);
                    tx.push('</td>');
                }
                tx.push('<td><button id="delete" >删除</button></td>');
                tx.push('</tr>');
            }
            //数据显示
            $('table').append(tx.join(''));
    
    
            //案例:删除表格
            //需求1：点击清空，清空表格内容
            //需求2：点击删除，删除对应的内容
            //1.清空事件。找到table中的所有的td清空
            $('#empty').click(function () {
                $('table tr td').empty();
            });
            //2.删除事件，找到父元素td，找到父元素tr,remove。
            $('table #delete').click(function () {
                $(this).parent().parent().remove();
            });
    
    
            //案例：添加内容
            //1.显示遮盖层和添加表单
            $('#add').click(function () {
    
                $('.add').show();
                $('.add-zhe').show();
            });
            //2.给添加表单设置返回
            $('#add-fa').click(function () {
                $('.add-zhe').hide();
                $('.add').hide();
            });
            //3.给添加表单设置添加事件
            //难点：创建的内容中无事件，是因为加载时已经将对应的事件创建完毕，需要自己再次创建事件
            $('#add-to').click(function () {
                //获取添加表单的值
               var ti=$('#add-title').val();
               var tx=$('#add-text').val();
               //整理并添加到表
               var addtext=[];
               addtext.push('<tr><td>'+ti+'</td><td>'+tx+'</td><td><button id="delete" >删除</button></td></tr>');
               $('table').append(addtext);
               //事件添加
                $('table #delete').click(function () {
                    $(this).parent().parent().remove();
                });
                //将遮盖层以及添加表单隐藏
                $('.add-zhe').hide();
                $('.add').hide();
    
            });
        });
    </script>
    
13.表格全选反选
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>生成表格</title>
    </head>
    <body>
    <table style="border: 1px solid black">
        <tr><th><input 0 type="checkbox"></th><th>标题</th><th>内容</th></tr>
    </table>
    </body>
    </html>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            //案例：生成表格
            //需求：使用数据生成一个表格，
            //分析：将数据进行拼接后使用sppend()添加到表格里
    
            //数据
            var date=[{
                'title':'标题1',
                'text':'内容1'
            },{
                'title':'标题2',
                'text':'内容2'
            },{
                'title':'标题3',
                'text':'内容3'
            }];
            //将数据拼接
            var tx=[];
            for (var i=0;i<date.length;i++){
                tx.push('<tr>');
                tx.push('<td><input  type="checkbox"></td>>');
                for (var key in date[i]){
                    tx.push('<td>');
                    tx.push(date[i][key]);
                    tx.push('</td>')
                }
                tx.push('</tr>');
            }
            //数据显示
            console.log(tx.join(''));
            $('table').append(tx.join(''));
    
            //案例：表格选择
            //需求1：点击标题中的框实现全选或全取消
            //需求2：如果所有的多选点击，全选框则改为全选
            //特殊：多选框无法使用attr，应使用prop。
            $('th>input').click(function (){
                //获取全选的是否否选中
                var p=$(this).prop('checked');
                //将所属的属性改为选择的属性
                $('td>input').prop('checked',p);
            });
    
            //获取所有的多选框以及多少多选框选中
            $('td>input').click(function () {
                var all=$('td>input').length;
                var num=$('td>input:checked').length;
                //如果选中的所有的多选框则全选框选中
                $('th>input').prop('checked',num==all);
            });
    
        });
    </script>

14.键盘变色
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>生成表格</title>
    </head>
    <body>
    </body>
    </html>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            //键盘变色
            //需求：点击对饮的键盘实现变色
            //q:white w：blue e:black r:red;
            //分析 q=81 w=87 e=69 r=82
            $(document).on('keydown',function (e) {
                alert(e.keyCode);
                switch (e.keyCode){
                    case 81:$('body').css('background-color','white');break;
                    case 87:$('body').css('background-color','blue');break;
                    case 69:$('body').css('background-color','black');break;
                    case 82:$('body').css('background-color','red');break;
                }
    
            });
        });
    </script>
本作品采用知识共享署名 4.0 国际许可协议进行许可
jquery案例

文章评论
