精华内容
下载资源
问答
我要提问
  • 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>
    javascript 前端
    更多相关内容

  • 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案例 代码 素材 笔记 作业资料.zip

     2021-08-04 14:04:38
    jQuery快速开发资料jQuery案例 代码 素材 笔记 作业资料，学习资料 01-getElementById获取元素.html 02-getElementsByTagName获取某些元素.html 03-H5新增获取元素方式(1).html 04-获取特殊元素.html 05-事件三要素....
    收起

  • jQuery选择器及jquery案例详解(必看)

     2020-10-22 07:48:43
    本文给大家介绍jquery选择器的相关知识，并通过案例给大家介绍jquery知识，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起学习吧
    收起

  • 15个jquery常用案例源码

     2019-11-15 16:37:49
    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案例 经典jquery

     2011-08-29 17:04:21
    经典jquery例子，这里包含可编辑表格、div制作弹出窗口、模拟动态股票、动态菜单例子、自动补全还有div实现jquery动态滑动效果。
    收起

  • jQuery选择器及jquery案例详解(必看).pdf

     2020-09-21 06:41:16
    本文给大家介绍 jquery 选择器的相关知识并通过案例给大家介绍 jquery 知识本文 介绍的非常详细具有参考借鉴价值感兴趣的朋友一起学习吧 JQuery 选择器 解析为了更好的或者是更快的从复杂的 DOM 树中找到我们需要的...
    收起

  • jquery案例图片轮换展示效果

     2020-06-09 18:38:39
    适合做案例展示用的焦点图特效，点击左侧分类，右侧三张立体式图片依次切换，效果很不错 原代码较多冗余，经懒人之家修改后，去除了多余的不需要的代码，变得清晰明了
    收起

  • jquery案例，为表格动态添加行

     2013-10-21 09:32:04
    使用jquery为表格动态添加行数据,以及删除某一行数据
    收起

  • jQuery案例_打地鼠_可用于教学(源码,带音乐与图片).rar

     2021-12-05 23:47:58
    非常经典的案例，完整的训练【jQuery】并且针对【setInterval】与【setTimeout】有一个实质性的训练，学习价值超高，建议教师与学生下载，并用于教学与学习过程当中。
    收起

  • 24、JQuery案例（抽奖）

     2020-05-13 19:38:07
    当正在抽奖时则反之。 分析： 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);
    }
});

    素材

    有需求可自取

    收起
    展开全文
    javascript css3

  • 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