精华内容
下载资源
问答
  • jquery案例
    2022-01-25 13:23:14
    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>
    
    
    更多相关内容
  • jQuery案例练习.rar

    2020-07-09 21:02:50
    jQuery案例有4个即1、手风琴显示图片效果2、方块旋转变色3、表格数据渲染删除操作 4、jquery写轮播图,也含有原生js轮播图案例,每个案例中代码注解很详细 通过案例练习熟悉jquery相关知识点
  • JQuery案例

    2016-08-06 15:42:22
    JQuery案例,自己写的导航栏demo,现在分享出来
  • 常用的jquery案例

    2018-09-21 08:47:07
    充分讲解了jquery的实战场景,帮助你快速掌握jquery技术啊
  • jQuery快速开发资料jQuery案例 代码 素材 笔记 作业资料,学习资料 01-getElementById获取元素.html 02-getElementsByTagName获取某些元素.html 03-H5新增获取元素方式(1).html 04-获取特殊元素.html 05-事件三要素....
  • 本文给大家介绍jquery选择器的相关知识,并通过案例给大家介绍jquery知识,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起学习吧
  • 15个独立的可以运行的jquery案例源代码,都是项目中经常用到的功能实现,如百度搜索下拉代码、表格增加删除行响应代码、表情评价打分代码、分类下拉搜索框代码、三级联动下拉框、砸金蛋抽奖活动代码等等
  • JQuery案例用到的素材

    2019-10-18 17:38:35
    学习JQuery基础时做案例,隔行换色-全选全不选-QQ表情-下拉框左右移动,用到的素材
  • Jquery案例.zip

    2021-06-18 17:34:37
    大学时期学习JQ时写下的案例
  • jQuery案例.zip

    2019-12-23 19:01:33
    https://blog.csdn.net/jeremyiverson/category_9615360.html 对应的精品案例 https://blog.csdn.net/jeremyiverson/category_9615360.html 对应的精品案例
  • 160个jQuery案例.zip

    2020-09-29 13:37:23
    HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字...
  • jquery 案例

    2012-04-24 09:23:13
    jquery 案例
  • 经典jquery例子,这里包含可编辑表格、div制作弹出窗口、模拟动态股票、动态菜单例子、自动补全还有div实现jquery动态滑动效果。
  • 本文给大家介绍 jquery 选择器的相关知识并通过案例给大家介绍 jquery 知识本文 介绍的非常详细具有参考借鉴价值感兴趣的朋友一起学习吧 JQuery 选择器 解析为了更好的或者是更快的从复杂的 DOM 树中找到我们需要的...
  • 适合做案例展示用的焦点图特效,点击左侧分类,右侧三张立体式图片依次切换,效果很不错 原代码较多冗余,经懒人之家修改后,去除了多余的不需要的代码,变得清晰明了
  • 使用jquery为表格动态添加行数据,以及删除某一行数据
  • 非常经典的案例,完整的训练【jQuery】并且针对【setInterval】与【setTimeout】有一个实质性的训练,学习价值超高,建议教师与学生下载,并用于教学与学习过程当中。
  • 当正在抽奖时则反之。 分析: 1. 给开始按钮绑定单击事件 1.1 定义循环定时器 1.2 切换小相框的src属性 * 定义数组,存放图片资源路径 * 生成随机数。数组索引 2. 给结束按钮绑定单击事件 1.1 ... jquery案例之抽奖

    需求:
        1、点击“点击开始”按钮,小图片位置开始周期随机显示小图标;
        2、点击“点击停止”按钮,小图片位置停止随机显示,并将当前小图片在大图片位置进行显示。
        3、未抽奖是“点击开始”按钮有效,“点击停止”按钮灰色显示失效。当正在抽奖时则反之。
    分析:
        1. 给开始按钮绑定单击事件
            1.1 定义循环定时器
            1.2 切换小相框的src属性
                * 定义数组,存放图片资源路径
                * 生成随机数。数组索引


        2. 给结束按钮绑定单击事件
            1.1 停止定时器
            1.2 给大相框设置src属性

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>jquery案例之抽奖</title>
        <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    
        <script>
    
            var imgs = [//用于存放图片的数组
                "../img/man00.jpg",
                "../img/man01.jpg",
                "../img/man02.jpg",
                "../img/man03.jpg",
                "../img/man04.jpg",
                "../img/man05.jpg",
                "../img/man06.jpg"
            ];
    
            //设置两个按键的被点击功能是否有效
            function setRuning( isRun) {
                if(isRun == true){
                    $("#startID").prop("disabled", true);
                    $("#stopID").prop("disabled", false);
                }else{
                    $("#startID").prop("disabled", false);
                    $("#stopID").prop("disabled", true);
                }
            }
    
            var imgIndex;
            var intervalTimer;
            $(function () {
                //刚加载开始按钮有效,停止按钮无效
                setRuning(false);
    
                $("#startID").click(function () {
                    //点击开始按钮就使开始按钮失效,停止按钮有效
                    setRuning(true);
    
                    //1.1 设置周期定时器20ms切换下一幅图
                    intervalTimer = setInterval(function (args) {//setInterval方法返回的是设置的周期定时器指针
                        //1.1.1 随机获取图片索引进行显示->获取随机数0.000~0.999 -> 转换为0.0~0.999 -> 向上取整
                        imgIndex = Math.floor(Math.random()*7);
    
                        $("#img1ID").prop("src",imgs[imgIndex]);
                    } , 20);
                });
    
                // 停止按钮处理
                $("#stopID").click(function () {
                    //点击开始按钮就使开始按钮有效,停止按钮失效
                    setRuning(false);
    
                    //停止定时器---让图片不跳动 -》通过前面设置定时器的返回值
                    clearInterval(intervalTimer);
    
                    //在大图的位置显示图片 --- 为了达到好的显示效果,先隐藏,然后过1S后显示
                    $("#img2ID").prop("src", imgs[imgIndex]).hide();
                    $("#img2ID").show(1000);
                });
            });
        </script>
    </head>
    <body>
    
    <!-- 小像框 -->
    <div style="border-style:dotted;width:160px;height:100px">
        <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
    </div>
    
    <!-- 大像框 -->
    <div
            style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
        <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
    </div>
    
    <!-- 开始按钮 -->
    <input
            id="startID"
            type="button"
            value="点击开始"
            style="width:150px;height:150px;font-size:22px"
            onclick="imgStart()">
    
    <!-- 停止按钮 -->
    <input
            id="stopID"
            type="button"
            value="点击停止"
            style="width:150px;height:150px;font-size:22px"
            onclick="imgStop()">
    
    
    <script language='javascript' type='text/javascript'>
    
    </script>
    </body>
    </html>

    案例升级

    1、将上面两个按键变为一个按键,默认时按键内容为“开始抽奖”,当点击后则显示为“停止抽奖”,再次点击时则又显示“开始抽奖”,复之。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>jquery案例之抽奖</title>
        <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    
        <script>
    
            var imgs = [//用于存放图片的数组
                "../img/man00.jpg",
                "../img/man01.jpg",
                "../img/man02.jpg",
                "../img/man03.jpg",
                "../img/man04.jpg",
                "../img/man05.jpg",
                "../img/man06.jpg"
            ];
    
            var imgIndex;
            var intervalTimer;
            $(function () {
    
                $("#startID").click(function () {
                    //获取按键的value值
                    var value = $("#startID").prop("value");
    
                    //根据按键的值判断是开始抽奖还是结束抽奖
                    if(value == "开始抽奖"){
                        $("#startID").prop("value", "停止抽奖");
    
                        //1.1 设置周期定时器20ms切换下一幅图
                        intervalTimer = setInterval(function (args) {
                            //1.1.1 随机获取图片索引进行显示->获取随机数0.000~0.999 -> 转换为0.0~0.999 -> 向上取整
                            imgIndex = Math.floor(Math.random()*7);
    
                            $("#img1ID").prop("src",imgs[imgIndex]);
                        } , 20);
                    }
                    else if (value == "停止抽奖"){
                        $("#startID").prop("value", "开始抽奖");
                        //停止定时器---让图片不跳动 -》通过前面设置定时器的返回值
                        clearInterval(intervalTimer);
    
                        //在大图的位置显示图片
                        $("#img2ID").prop("src", imgs[imgIndex]);
                    }
    
    
                });
    
    
            });
        </script>
    </head>
    <body>
        <!--
        在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。
        在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。
        -->
    <!-- 小像框 -->
    <div style="border-style:dotted;width:160px;height:100px;margin-bottom: 20px;margin-left: 50px">
        <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
    </div>
    
    <!-- 大像框 -->
    <div
            style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
        <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
    </div>
    
    <!-- 开始按钮 -->
    <input
            id="startID"
            type="button"
            value="开始抽奖"
            style="width:150px;height:60px;font-size:22px;margin-left: 60px"
            l
            onclick="imgStart()">
    
    <script language='javascript' type='text/javascript'>
    
    </script>
    </body>
    </html>

    展开全文
  • 北大青鸟JQuery案例

    2015-07-30 21:39:57
    该程序全面的使用Jquery实现当当网的一些特效,比较适合初级人员学习。同时也可以算作进阶的一个案例
  • Jquery实例汇总

    2018-10-15 14:29:22
    30个jquery实例,覆盖了jquery的各个用法,通过这些实例对jquery选择器、jquery事件处理、jquery应用的各个场景会更加熟悉。如果你不懂jquery基础知识,请参看我的jquery知识点汇总,那里用思维导图的形式总结了...
  • 50个实用的jquery案例

    2015-10-10 23:01:02
    50个实用的jquery案例,适合初学者的jQuery案例
  • javascript jquery案例

    2009-11-09 17:13:15
    javascript jquery案例javascript jquery案例javascript jquery案例javascript jquery案例
  • [jQuery案例练习]——锅打灰太狼

    千次阅读 2022-01-10 15:56:52
    一个jQuery案例练习——锅拍灰太狼(打地鼠)

    [jQuery案例练习]——锅打灰太狼

    准备

    1.需掌握html css js

    2.所用编译器Hbuilder

    效果展示

    请添加图片描述
    请添加图片描述

    开发思路

    1)index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>狂拍灰太狼</title>
        <link rel="stylesheet" href="css/index.css">
        <script src="./js/jquery-1.12.4.min.js"></script>
        <script src="./js/index.js"></script>
    </head>
    <body>
    <div class="container">
        <h1 class="score">0</h1>
        <div class="progress"></div>
        <button class="start">开始游戏</button>
        <div class="rules">游戏规则</div>
        <div class="rule">
            <p>游戏规则:</p>
            <p>1.游戏时间:60s</p>
            <p>2.拼手速,殴打灰太狼+10分</p>
            <p>3.殴打小灰灰-10分</p>
            <a href="#" class="close">[关闭]</a>
        </div>
        <div class="mask">
            <h1>GAME OVER</h1>
            <button class="reStart">重新开始</button>
        </div>
    </div>
    </body>
    </html>
    

    2)index.css

    /* 清除浏览器样式 */
    *{
    	margin: 0;
    	padding: 0;
    }
    /* 页面框架 */
    .container{
    	width: 320px;
    	height: 480px;
    	/* background:图像地址  不重复 水平位置0  垂直位置0 */
    	background:url(../img/game_bg.jpg) no-repeat 0 0;
    	/* 外边距 上下50px 左右居中 */
    	margin: 50px auto;
    	position: relative;
    }
    .container>h1{
    	color: white;
    	margin-left:60px;
    }
    /* 进度条 */
    .container>.progress{
    	width: 180px;
    	height:16px;
    	background: url(../img/progress.png) no-repeat 0 0;
    	position: absolute;
    	top:66px;
    	left:63px;
    }
    /* 开始游戏——按钮 */
    .container>.start{
    	width:150px;
    	line-height:35px;
    	text-align:center;
    	color: white;
    	/* linear-gradient 线性渐变 */
    	background: linear-gradient(#ff4500,#ff0000);
    	/* 圆角边框 */
    	border-radius:20px;
    	/* 去边框样式 */
    	border:none;
    	/* 字体大小 */
    	font-size: 20px;
    	/* 按钮位置 */
    	position: absolute;
    	top: 320px;
    	left: 50%;
    	margin-left: -75px;
    }
    /* 游戏规则 */
    .container>.rules{
    	width: 100%;
    	height: 20px;
    	background: #ccc;
    	/* 水平居中 */
    	text-align: center;
    	/* 位置 */
    	position: absolute;
    	left: 0;
    	bottom: 0;
    }
    .container>.rule{
    	width: 100%;
    	height: 100%;
    	background: rgba(0,0,0,0.5);
    	padding-top:100px ;
    	box-sizing: border-box;
    	text-align: center;
    	/* 隐藏 */
    	display: none;
    	/* 位置 */
    	position: absolute;
    	left: 0;
    	top: 0;
    }
    .rule>p{
    	/* 垂直居中 */
    	line-height: 50px;
    	color:white;
    }
    .rule>a{
    	color: red;
    	text-decoration: none;
    }
    /* 游戏结束页面 */
    .container>.mask{
    	width: 100%;
    	height: 100%;
    	background: rbga(0,0,0,0.5);
    	padding-top:200px ;
    	/* 盒模型- padding+border+content*/
    	box-sizing: border-box;
    	/* 水平居中 */
    	text-align: center;
    	/* 隐藏 */
    	display: none;
    	/* 位置 */
    	position: absolute;
    	top:0;
    	left: 0;
    }
    .mask>h1{
    	color: #ff4500;
    	text-shadow: 3px 1px 0 #ff0000;
    	font-size: 40px;
    }
    .mask>button{
    	width: 150px;
    	line-height: 35px;
    	text-align: center;
    	color: white;
    	background: linear-gradient(#ff4500,#ff0000);
    	border-radius: 20px;
    	border: none;
    	font-size: 20px;
    	position: absolute;
    	top: 320px;
    	left: 50%;
    	margin-left: -75px;
    }
    

    3)index.js

    (1)动画效果

    1.图片加载
    2.进度条加载
    3.游戏结束时停止执行动画效果

    (2)随机位置

    1.生成随机位置
    2.在对应的位置显示相应图片

    (3)游戏逻辑

    1.实现如何可以点击图片的逻辑
    2.实现如何判断拍到的是灰太狼还是小灰灰

    //1.动画效果
    //2.随机位置
    //3.游戏逻辑
    $(function () {
        // 1.监听游戏规则的点击
        $(".rules").click(function () {
    		// 监听rule,淡入		
            $(".rule").stop().fadeIn(100);
        });
    
        // 2.监听关闭按钮的点击
        $(".close").click(function () {
    		//监听rule,淡出
            $(".rule").stop().fadeOut(100);
        });
    
        // 3.监听开始游戏按钮的点击
        $(".start").click(function () {
    		//start按钮淡出
            $(this).stop().fadeOut(100);
            // 调用处理进度条的方法
            progressHandler();
            // 调用处理灰太狼动画的方法
            startWolfAnimation();
        });
    
        // 4.监听重新开始按钮的点击
        $(".reStart").click(function () {
    		//game over淡出
            $(".mask").stop().fadeOut(100);
            // 调用处理进度条的方法
            progressHandler();
            // 调用处理灰太狼动画的方法
            startWolfAnimation();
        });
    
        // 定义一个专门处理进度条的方法
        function progressHandler() {
            // 重新设置进度条的宽度
            $(".progress").css({
                width: 180
            });
            // 开启定时器处理进度条
            var timer = setInterval(function () {
                // 拿到进度条当前的宽度
                var progressWidth = $(".progress").width();
                // 减少当前的宽度
                progressWidth -= 1;
                // 重新给进度条赋值宽度
                $(".progress").css({
                    width: progressWidth
                });
                // 监听进度条是否走完
                if(progressWidth <= 0){
                    // 关闭定时器
                    clearInterval(timer);
                    // 显示重新开始界面
                    $(".mask").stop().fadeIn(100);
                    // 停止灰太狼的动画
                    stopWolfAnimation();
                }
            }, 300);
        }
    
        var wolfTimer;
        // 定义一个专门处理灰太狼动画的方法
        function startWolfAnimation() {
            // 1.定义两个数组保存所有灰太狼和小灰灰的图片
    		//灰太狼
            var wolf_1=['./img/h0.png','./img/h1.png','./img/h2.png','./img/h3.png','./img/h4.png','./img/h5.png','./img/h6.png','./img/h7.png','./img/h8.png','./img/h9.png'];
            //小灰灰
    		var wolf_2=['./img/x0.png','./img/x1.png','./img/x2.png','./img/x3.png','./img/x4.png','./img/x5.png','./img/x6.png','./img/x7.png','./img/x8.png','./img/x9.png'];
            // 2.定义一个数组保存所有可能出现的位置
            var arrPos = [
                {left:"100px",top:"115px"},
                {left:"20px",top:"160px"},
                {left:"190px",top:"142px"},
                {left:"105px",top:"193px"},
                {left:"19px",top:"221px"},
                {left:"202px",top:"212px"},
                {left:"120px",top:"275px"},
                {left:"30px",top:"295px"},
                {left:"209px",top:"297px"}
            ];
    
            // 3.创建一个图片
            var $wolfImage = $("<img src='' class='wolfImage'>");
            // 随机获取图片的位置
    		// 随机0-8之间的数
            var posIndex = Math.round(Math.random() * 8);
            // 4.设置图片显示的位置
            $wolfImage.css({
               position: "absolute",
    		    //随机取到的数确定其出现的位置
                left:arrPos[posIndex].left,
                top:arrPos[posIndex].top
            });
            // 随机获取数组类型
            var wolfType = Math.round(Math.random()) == 0 ? wolf_1 : wolf_2;
            // 5.设置图片的内容
            window.wolfIndex = 0;
            window.wolfIndexEnd = 5;
            wolfTimer = setInterval(function () {
                if(wolfIndex > wolfIndexEnd){
                    $wolfImage.remove();
    				// 关闭定时器
                    clearInterval(wolfTimer);
                    startWolfAnimation();
                }
    			// 改变图片的类型 小灰灰or灰太狼
    			// arrt()返回wolfImage的属性值
                $wolfImage.attr("src", wolfType[wolfIndex]);
    			//让动画更为流畅
                wolfIndex++;
            }, 600); 
    
            // 6.将图片添加到界面上
            $(".container").append($wolfImage);
    
            // 7.调用处理游戏规则的方法
            gameRules($wolfImage);
        }
    	//定义一个游戏规则的方法
        function gameRules($wolfImage) {
    		//one()运行一次
            $wolfImage.one("click",function () {
                // 修改索引
                window.wolfIndex = 5;
                window.wolfIndexEnd = 9;
    
                // 拿到当前点击图片的地址
                var $src = $(this).attr("src");
                // 根据图片地址判断是否是灰太狼
                var flag = $src.indexOf("h") >= 0;
                // 根据点击的图片类型增减分数
                if(flag){
                    // +10
                    $(".score").text(parseInt($(".score").text()) + 10);
                }else{
                    // -10
                    $(".score").text(parseInt($(".score").text()) - 10);
                }
            });
        }
    	//停止游戏动画方法
        function stopWolfAnimation() {
            $(".wolfImage").remove();
            clearInterval(wolfTimer);
        }
    });
    

    素材

    有需求可自取

    展开全文
  • jquery案例项目

    2013-06-10 20:36:05
    详细介绍ajax技术,和jquery的用法,除了有案例的项目代码,还附有教程
  • 这是一套jquery案例

    2013-08-04 13:15:12
    这个jquery案例可以很好的帮你学好jquery。这是我自己练习的代码。容易理解。希望对你有帮助。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 52,600
精华内容 21,040
关键字:

jquery案例

友情链接: MapleStory-master.zip