java web-11.7Jquery案例及插件

╰半橙微兮° 2023-02-11 10:14 22阅读 0赞

## 案例1：广告显示和隐藏 ##

**需求：**  
1.当页面加载完，3秒后自动显示广告  
2.广告显示5秒后，自动消失  
**分析**  
1.使用定时器完成。setTimeOut（执行一次）  
2.分析发现，jquery的显示和隐藏的动画效果其实就是控制display  
3.使用show、hide方法来完成广告的显示  
**代码实现**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-3.3.1.min.js"></script>
        <script>
            //入口函数，在页面加载完成后，定义定时器，调用这两个方法a
            $(function () { 
                //定义定时器，调用adShow方法，3秒后执行
                setTimeout(adShow,3000);
                //定义定时器，调用adHide方法，8秒后执行
                setTimeout(adHide,8000);
            })
            //显示广告
            function adShow() { 
                $("#ad").show("slow");
            }
            //隐藏广告
            function adHide() { 
                $("#ad").hide("slow");
            }
        </script>
    </head>
    <body>
       
    <div>
        
        <div id="ad" style="display: none">
            <img style="width: 100%" src="../img/adv.jpg"/>
        </div>
        
        <div id="content">
            正文部分
        </div>
    </div>
    </body>
    </html>

## 案例2：抽奖演示 ##

**需求**  
点击开始小图片变化，并且不能再点击开始  
点击停止，大图片出现停止的图片  
**分析**  
1.给开始按钮绑定单击事件  
1.1定义循环定时器  
1.2切换小相框的src属性  
①定义数组，存放图片资源路径  
②生成随机数，数组索引  
2.给停止按钮绑定单击事件  
2.1停止定时器  
2.2给大相框设置src属性

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script 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 startId;//开始定时器id
            var index;//随机角标
            //定义入口函数
            $(function () { 
                //处理按钮是否可以使用的效果
                $("#startID").prop("disabled",false);
                $("#stopID").prop("disabled",true);
                //1.给开始按钮绑定单击事件
                $("#startID").click(function () { 
                    //1.1定义循环定时器 20ms执行一次
                    startId = setInterval(function () { 
                        //处理按钮是否可以使用的效果
                        $("#startID").prop("disabled",true);
                        $("#stopID").prop("disabled",false);
                        //1.2生成随机角标 范围0-6
                        index = Math.floor(Math.random()*7);
                        //1.3设置小相框的src属性
                        $("#img1ID").prop("src",imgs[index]);
                    },20)
                })
                //2.给停止按钮绑定单击事件
                $("#stopID").click(function () { 
                    //处理按钮是否可以使用的效果
                    $("#startID").prop("disabled",false);
                    $("#stopID").prop("disabled",true);
                    //2.1停止定时器
                    clearInterval(startId);
                    //2.2给大相框设置src属性
                    $("#img2ID").prop("src",imgs[index]).hide();
                    //1s后显示
                    $("#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">
            >
        
        <input
                id="stopID"
                type="button"
                value="点击停止"
                style="width: 150px;height: 150px;font-size: 22px">
        >
    </body>
    </html>

## 插件 ##

增强jquery的功能  
**实现方式**

1.$.fn.extend(object)

增强通过jquery获取的对象的功能

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            //使用jquery插件给jq对象添加2个方法 check（）选中所有复选框，unchecked取消选中所有复选框
            //定义jquery的对象插件
            $.fn.extend({ 
                //定义了一个check（）方法，所有jq对象都可以调用该方法
                check:function () { 
                    //让复选框选中
                    //this调用该方法的jq对象
                    this.prop("checked",true);
                },
                uncheck:function () { 
                    //让复选框不选中
                    this.prop("checked",false);
                }
            });
            //入口函数
            $(function () { 
                //复选框对象.check
                $("#btn-check").click(function () { 
                    //获取复选框对象
                    $("input[type='checkbox']").check();
                })
                $("#btn-uncheck").click(function () { 
                    //获取复选框对象
                    $("input[type='checkbox']").uncheck();
                })
            });
        </script>
    </head>
    <body>
        <input id = "btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
        <input id = "btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
    <br/>
    <input type="checkbox" value="football">足球
        <input type="checkbox" value="basketball">篮球
        <input type="checkbox" value="volleyball">排球
    </body>
    </html>

2.$.extend(object)

增强jquery对象的自身的功能

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
           //对全局方法扩展2个方法，扩展min方法，求2个值的最小值，扩展max方法，求两个值的最大值
            $.extend({ 
                max:function (a,b) { 
                    //返回两个数的最大值
                    return a >= b ? a:b;
                },
                min:function (a,b) { 
                    //返回两个数的最小值
                    return a <= b ? a:b;
                }
            });
            //调用全局方法a
            var max1 = $.max(2,3);
            alert(max1)
            var min = $.min(2,1);
            alert(min)
        </script>
    </head>
    <body>
    </body>
    </html>