TypechoJoeTheme

九肽荷尔蒙's Blog

用户名
密码
用户名
邮箱

九肽荷尔蒙

浅尝辄止,贪得无厌

JQuery案例(二)

2021-10-26
/
0 评论
/
52 阅读
/
正在检测是否收录...
10/26

jQuery案例

一、二级联动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script>
        var arrs = [["臭豆腐","糖油粑粑","小龙虾","茶颜悦色"],
        ["串串","兔头","冒菜","火锅底料"],
        ["豆汁","冰糖葫芦","全聚德","杂酱面"],
        ["海鲜粥","煲仔饭","肠粉","腊肠"]];
        $(function(){
            //根据索引获取到二位数对应的城市的小吃,遍历添加到第二个下拉列表中
           function changeoption(index){
                var arr = arrs[index];
                $("#sel2").empty();
                $.each(arr,function(){
                        $("#sel2").append("<option>"+this+"</option>");
                });
           }
            //页面加载时默认执行添加第一个城市长沙的小吃
           changeoption(0)
            //当城市发生改变,获取对应城市的所有小吃添加到第二个下拉列表
            $("#sel1").change(function(){
                var index = $("#sel1 option:selected").index();
               changeoption(index);
            })
        })
    </script>
</head>
<body>
    <select name="city" id="sel1" style="width: 220px;">
        <option value="cs">长沙</option>
        <option value="sc">四川</option>
        <option value="bj">北京</option>
        <option value="gz">广州</option>
    </select>
    <select name="snack" id="sel2" style="width: 220px;"></select>
</body>
</html>
二、添加和移除
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            //添加
            $("[value=ADD]").click(function(){
                $("#sel1 option:selected").appendTo("#sel2");
            });
            //移除
            $("[value=REMOVE]").click(function(){
                $("#sel2 option").appendTo("#sel1");
            })
        })
    </script>
</head>
<body>
    <select id="sel1" size="4" style="width: 220px;height:300px">
        <option>年薪百万</option>
        <option>家庭和睦</option>
        <option>走上人生巅峰</option>
        <option>开兰博基尼送外卖</option>
    </select>
    <input type="button" value="ADD">
    <input type="button" value="REMOVE">
    <select id="sel2" size="4" style="width: 220px;height:300px">

    </select>
</body>
</html>
三、全选反选
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            //全选按钮
            $("input:first").change(function(){
                // $("input:gt(0)").prop("checked",$(this).prop("checked"));
                $("input:gt(0)").prop("checked",this.checked);
            })
            //反选
            $("input:gt(0)").change(function(){
                var num1 = $("input:gt(0)").length;
                var num2 = $("input:gt(0):checked").length;
                if(num1==num2){
                    $("input:first").prop("checked",true);
                }else{
                    $("input:first").prop("checked",false);
                }
            })
        })
    </script>
</head>
<body>
    全选<input type="checkbox"><br>
    苹果<input type="checkbox"><br>
    梨子<input type="checkbox"><br>
    丑橘<input type="checkbox"><br>
    李子<input type="checkbox"><br>
    柿子<input type="checkbox"><br>
</body>
</html>

四、轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 1226px;
            height: 460px;
            margin:auto;
            position:relative
        }
        img{
            position: absolute;
            left:0;
            top:0;
        }
        a{
            position: absolute;
            top:195px;
            height: 69px;
            width: 41px;
            background-image: url("./images/icon-slides.png");
        }
        a.left{
            left:30px;
            background-position: -83px 0;
        }
        a.right{
            right:30px;
            background-position: -124px 0;
        }
        a.left:hover{
            background-position: 0 0;
        }
        a.right:hover{
            background-position: -41px 0;
        }
        .focus{
            position: absolute;
            right:30px;
            bottom:40px;
            width: 220px;
        }
        li{
            list-style: none;
            float:left;
            width: 10px;
            height: 10px;
            background-color: grey;
            border-radius: 50%;
            margin-right:12px;
        }
        .content{
            background-color: honeydew;
        }
    </style>
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            //切换图片和焦点跟随的函数
            function changeImg(step){
                $("img").eq(step).show().siblings().hide();
                //焦点跟随
                $("li").eq(step).addClass("content").siblings().removeClass("content");
            }

            //自动播放
            var step = 0;
            var timer;
            function autoPlay(){
                timer = setInterval(function(){
                    step++;
                    step = step==7?0:step;
                    changeImg(step);
                },2000)
            };

            autoPlay();
            //鼠标移入移除停止开始播放
            $("#box").mouseenter(function(){
                clearInterval(timer);
            }).mouseleave(function(){
                clearInterval(timer);
                autoPlay();
            })
            //左移
            $(".left").click(function(){
                step--;
                step = step==-1?6:step;
                changeImg(step);
            })
            //右移
            $(".right").click(function(){
                step++;
                step = step==7?0:step;
                changeImg(step);
            });
            //焦点切换
            $("li").click(function(){
                step = $(this).index();
                changeImg(step);
            })


        })
    </script>
</head>
<body>
    <div id="box">
        <div>
            <img src="./images/ban01.jpg">
            <img src="./images/ban02.jpg">
            <img src="./images/ban03.jpg">
            <img src="./images/ban04.jpg">
            <img src="./images/ban05.jpg">
            <img src="./images/ban06.jpg">
            <img src="./images/ban07.jpg">
        </div>
        <a class="left"></a>
        <a class="right"></a>
        <ul class="focus">
            <li class="content"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

朗读
赞(0)
版权属于:

九肽荷尔蒙's Blog

本文链接:

http://sleeve.top/index.php/archives/157/(转载时请注明本文出处及文章链接)

评论 (0)
IP信息

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

最新回复

  1. fixotaigujup
    2021-12-19

    Urgent imh.mhsz.sleeve.top.vrg.rd intuitively akinetic antiphospholipid [URL=http://damcf.org/drug/sildenafil-vendo/]viagra generique 75 mg[/URL] [URL=http://cocasinclair.com/product/dutas/]retail sale dutas[/URL] [URL=http://graphicatx.com/cialis-in-brazil/]prices of viagra, cialis, lavitra[/URL] [URL=http://nicaragua-magazine.com/item/synthroid/]synthroid online stores[/URL] [URL=http://americanazachary.com/product/lyrica/]lyrica kaufen leipzig[/URL] [URL=http://nicaragua-magazine.com/purchase-kamagra-without-prescription/]generic kamagra 100mg pills[/URL] [URL=http://staffordshirebullterrierhq.com/item/ed-super-advanced-pack/]ed super advanced pack generico online sicuro[/URL] [URL=http://gasmaskedlestat.com/keftab/]buy keftab[/URL] [URL=http://telugustoday.com/product/doxazosin/]buy doxazosin online[/URL] [URL=http://staffordshirebullterrierhq.com/item/jelly-pack-15/]low priced jelly pack 15[/URL] [URL=http://johncavaletto.org/amoxicillin/]amoxicillin[/URL] [URL=http://homemenderinc.com/product/viagra/]acheter du viagra 50 pills[/URL] [URL=http://nutrabeautynutrition.com/pill/cialis-strong-pack-60/]cialis strong pack 60 without pres[/URL] [URL=http://solepost.com/product/prednisone/]prednisone by check[/URL] uncertain arriving viagra advertisement buy dutas online in usa cialis generic synthroid online europe lyrica kaufen leipzig generic kamagra lowest purchase kamagra without prescription ed-super-advanced-pack prescription usa buy keftab generic for doxazosin best generic jelly pack 15 online amoxicillin can you order viagra online cialis-strong-pack-60 en china prednisone by check perimenopausal futile http://damcf.org/drug/sildenafil-vendo/ sildenafil vendo http://cocasinclair.com/product/dutas/ buy dutas online in usa buy dutas online in usa http://graphicatx.com/cialis-in-brazil/ cialis http://nicaragua-magazine.com/item/synthroid/ china synthroid online http://americanazachary.com/product/lyrica/ lyrica http://nicaragua-magazine.com/purchase-kamagra-without-prescription/ kamagra sans ordonnances http://staffordshirebullterrierhq.com/item/ed-super-advanced-pack/ cheap ed super advanced pack without a prescription http://gasmaskedlestat.com/keftab/ buy keftab online http://telugustoday.com/product/doxazosin/ doxazosin tablets http://staffordshirebullterrierhq.com/item/jelly-pack-15/ jelly-pack-15 online canadian http://johncavaletto.org/amoxicillin/ comprar amoxicillin en internet http://homemenderinc.com/product/viagra/ buy viagra online in ireland http://nutrabeautynutrition.com/pill/cialis-strong-pack-60/ buy cialis strong pack 60 w not prescription http://solepost.com/product/prednisone/ prednisone dozirovkamg guaranteed lowest price complexities frustrating ethics.

  2. buying stromecto
    2021-12-19
  3. etufghufeaje
    2021-12-19

    Night wpu.gvif.sleeve.top.yjr.rh relationship; adult magnesium [URL=http://otrmatters.com/item/lowest-cost-propecia/]propecia[/URL] [URL=http://memoiselle.com/product/proscar/]proscar online next day shipping[/URL] [URL=http://thatpizzarecipe.com/amoxil/]amoxil[/URL] [URL=http://anguillacayseniorliving.com/item/prednisone-discount-prices/]40 prednisone from top rated[/URL] [URL=http://johncavaletto.org/drugs/levitra-20mg-achat/]buy generic levitra online with echeck[/URL] [URL=http://washingtonsharedparenting.com/clomid/]clomid panama[/URL] [URL=http://mrcpromotions.com/drug/tretinoin-canada/]buy cheap tretinoin[/URL] [URL=http://anguillacayseniorliving.com/drugs/retin-a/]quebec retin a[/URL] [URL=http://americanazachary.com/product/propecia/]fastest delivery propecia[/URL] [URL=http://celebsize.com/soft-pack-40/]soft-pack-40 online[/URL] [URL=http://americanazachary.com/drugs/xenical/]medicine xenical[/URL] [URL=http://nicaragua-magazine.com/cheap-generic-substitute-doxycycline/]doxycycline[/URL] [URL=http://wow-70.com/pill/cytotec/]buy cytotec online free pills[/URL] [URL=http://damcf.org/drug/diclofenac/]diclofenac come si usa[/URL] fraction lowest cost propecia proscar online next day shipping generic amoxil no perscription prednisone levitra 20mg achat 50 mg clomid online uk tretinoin canada products like retin a real propecia without a prescription soft-pack-40 xenical doxycycline doxycycline online no presciption is buying cytotec from canada safe diclofenac come si usa lubricant adjuvants, intoxicating http://otrmatters.com/item/lowest-cost-propecia/ cheap generic propecia pills http://memoiselle.com/product/proscar/ proscar through mail http://thatpizzarecipe.com/amoxil/ amoxil sites http://anguillacayseniorliving.com/item/prednisone-discount-prices/ prednisone drug company prednisone online order guide http://johncavaletto.org/drugs/levitra-20mg-achat/ levitra uk pharmacy http://washingtonsharedparenting.com/clomid/ buy clomid without prescription http://mrcpromotions.com/drug/tretinoin-canada/ buy tretinoin online canada http://anguillacayseniorliving.com/drugs/retin-a/ retin a http://americanazachary.com/product/propecia/ propecia and mexico other products like propecia http://celebsize.com/soft-pack-40/ soft-pack-40 http://americanazachary.com/drugs/xenical/ xenical http://nicaragua-magazine.com/cheap-generic-substitute-doxycycline/ doxycycline http://wow-70.com/pill/cytotec/ cytotec http://damcf.org/drug/diclofenac/ diclofenac sin receta en farmacias introducing disorientation without.

  4. jonn2
    2021-12-19
  5. jonn1
    2021-12-19