jQuery - jQuery小栗子 - 《杂七杂八的技能点》

一、电影排行榜
- hover(fn1,fn2)
二、Tab选项卡
三、显示/隐藏动画效果
四、对联动画小练习
- scroll()
五、展开和收起动画
六、折叠菜单
- children()
七、下拉菜单
- stop()
八、淡入淡出

一、电影排行榜

效果图：

hover(fn1,fn2)

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        .box{
            width:300px;
            height:450px;
            margin:50px auto;
            border:1px solid #000;
        }
        .box>h1{
            font-size: 20px;
            line-height: 35px;
            color:deeppink;
            padding-left: 10px;
            border-bottom: 1px dashed #ccc;
        }
        ul>li{
            list-style: none;
            padding: 5px 10px;
            border: 1px dashed #ccc;
        }
        ul>li:nth-child(-n+3) span{
            background:deeppink;
        }
        ul>li>span{
            display: inline-block;
            width: 20px;
            height:20px;
            background: #ccc;
            text-align: center;
            line-height: 20px;
            margin-right: 10px;
        }
        .content{
            overflow:hidden;
            margin-top: 5px;
            display: none;
        }
        .content>img{
            width: 80px;
            height:120px;
            float: left;
        }
        .content>p{
            width: 180px;
            height:120px;
            font-size: 12px;
            line-height: 20px;
            float: right;
        }
        .current .content{
            display: block;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        /*
         */
        $(function() {
            // $("li").mouseenter(function(){
            //     $(this).addClass("current");
            // });
            // $("li").mouseleave(function(){
            //     $(this).removeClass('current');
            // })
            $("li").hover(function(){
                $(this).addClass("current");
            },function(){
                $(this).removeClass('current');
            })
        });
    </script>
</head>
<body>
    <div class="box">
        <h1>电影排行榜</h1>
        <ul>
            <li><span>1</span>电影名称
                <div class="content">
                    <img src="img/zl.webp" alt="">
                    <p>《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造，《战狼》真实呈现了一场中外边境战争，也让堪称“东方之狼”的特种兵战队及高能战士首次登陆大银幕。讲述的是小人物成长为拯救国家和民族命运的孤胆英雄的传奇故事。</p>
                </div>
            </li>
            <li><span>2</span>电影名称
                <div class="content">
                    <img src="img/zl.webp" alt="">
                    <p>《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造，《战狼》真实呈现了一场中外边境战争，也让堪称“东方之狼”的特种兵战队及高能战士首次登陆大银幕。讲述的是小人物成长为拯救国家和民族命运的孤胆英雄的传奇故事。</p>
                </div>
            </li>
            <li><span>3</span>电影名称
                <div class="content">
                    <img src="img/zl.webp" alt="">
                    <p>《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造，《战狼》真实呈现了一场中外边境战争，也让堪称“东方之狼”的特种兵战队及高能战士首次登陆大银幕。讲述的是小人物成长为拯救国家和民族命运的孤胆英雄的传奇故事。</p>
                </div>
            </li>
            <li><span>4</span>电影名称
                <div class="content">
                    <img src="img/zl.webp" alt="">
                    <p>《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造，《战狼》真实呈现了一场中外边境战争，也让堪称“东方之狼”的特种兵战队及高能战士首次登陆大银幕。讲述的是小人物成长为拯救国家和民族命运的孤胆英雄的传奇故事。</p>
                </div>
            </li>
            <li><span>5</span>电影名称
                <div class="content">
                    <img src="img/zl.webp" alt="">
                    <p>《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造，《战狼》真实呈现了一场中外边境战争，也让堪称“东方之狼”的特种兵战队及高能战士首次登陆大银幕。讲述的是小人物成长为拯救国家和民族命运的孤胆英雄的传奇故事。</p>
                </div>
            </li>
            <li><span>6</span>电影名称
                <div class="content">
                    <img src="img/zl.webp" alt="">
                    <p>《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造，《战狼》真实呈现了一场中外边境战争，也让堪称“东方之狼”的特种兵战队及高能战士首次登陆大银幕。讲述的是小人物成长为拯救国家和民族命运的孤胆英雄的传奇故事。</p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

二、Tab选项卡

效果图：

index()

如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。
如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。

siblings()

同级反选

eq()

获取第N个元素
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        .box{
            width:440px;
            height: 298px;
            border:1px solid #000;
            margin:50px auto;
        }
        .nav>li{
            list-style: none;
            width:110px;
            height:50px;
            background: orange;
            text-align:center;
            line-height: 50px;
            float:left;
        }
        .nav .current{
            background:#ccc;
        }
        .content>li{
            list-style: none;
            display: none;
        }
        .content>.show{
            display: block;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        /*

         */

        $(function() {
            /*
            //1、监听选项卡移入事件
            $(".nav>li").mouseenter(function(event) {
                //1.1修改被移入选项卡的背景颜色
                $(this).addClass("current");
                //1.2获取当前移入选项卡的索引
                var i=$(this).index();
                //1.3根据索引找到下一个ul中对应的li
                var img = $(".content>li").eq(i);
                //1.4显示图片
                img.addClass('show');
            });
            $(".nav>li").mouseleave(function(event) {
                //1.1还原被移出选项卡的背景颜色
                $(this).removeClass("current");
                //1.2获取当前移出选项卡的索引
                var i=$(this).index();
                //1.3根据索引找到下一个ul中对应的li
                var img = $(".content>li").eq(i);
                //1.4移除图片
                img.removeClass('show');
            });
             */
            $(".nav>li").mouseenter(function(event) {
                //1.1修改被移入选项卡的背景颜色
                $(this).addClass("current");
                //1.2还原其他元素的颜色--同级反选
                $(this).siblings().removeClass("current");
                //1.2获取当前选项卡的索引
                var i=$(this).index();
                //1.3根据索引找到下一个ul中对应的li
                var img = $(".content>li").eq(i);
                //添加show类
                img.addClass('show');
                //反选移除其他图片
                img.siblings().removeClass('show');
            });
        });


    </script>
</head>
<body>
    <div class="box">
        <ul class="nav">
            <li>H5+C3</li>
            <li>jQuery</li>
            <li>C语言</li>
            <li>Go语言</li>
        </ul>
        <ul class="content">
            <li class="show">
                <img src="img/11.jpg" alt=""></li>
            <li><img src="img/12.jpg" alt=""></li>
            <li><img src="img/13.jpg" alt=""></li>
            <li><img src="img/14.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>

三、显示/隐藏动画效果

效果图：

show(time|fn)

动画展示
fn:动画执行完毕后调用

hide(time|fn)

动画隐藏

toggle()

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        div{
            width:200px;
            height:200px;
            background: red;
            display: none;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        /*
        动画展示和动画隐藏
        show(time|fn)
        fn:动画执行完毕后调用
        hide(time|fn)
        动画切换
        toggle()

         */

        $(function() {
            $("button").eq(0).click(function(){
                //$("div").css("display","block");
                $("div").show(1000,function(){
                    alert("123");
                });
            });
            $("button").eq(1).click(function(){
                //$("div").css("display","none");
                $("div").hide(1000,function(){
                    alert("456");
                });
            });
            $("button").eq(2).click(function(){
                $("div").toggle(1000,function(){
                    alert("切换完毕");
                });

            });
        });
    </script>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
</body>
</html>

四、对联动画小练习

效果图：

scroll()

监听网页滚动
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        .left{
            float: left;
            position: fixed;
            left: 0;
            top:200px;
        }
        .right{
            float: right;
            position: fixed;
            right: 0;
            top:200px;
        }
        img{
            display: none;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        /*
        scroll()

         */

        $(function() {
            //1.监听网页滚动
            $(window).scroll(function(event) {
                //获取网页的偏移位
                var offset = $("html,body").scrollTop();
                //判断网页是否滚动到了指定位置
                if(offset>=300){
                    $("img").show(1000);
                }else{
                    $("img").hide(1000);
                };
            });
        });



    </script>
</head>
<body>
    <img src="img/right_ad.png" class="left">
    <img src="img/left_ad.png" class="right">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>
</html>

五、展开和收起动画

效果图：

slideDown()

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。

slideUp()

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。

slideToggle()

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        div{
            width:100px;
            height: 300px;
            background: red;
            display: none;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        /*
        scroll()
         */

        $(function() {
            //
            $("button").eq(0).click(function(event) {
                $("div").slideDown(1000, function() {
                    alert("ok")
                });
            });
            $("button").eq(1).click(function(event) {
                $("div").slideUp(1000, function() {
                    alert("")
                });
            });
            $("button").eq(2).click(function(event) {
                $("div").slideToggle(1000, function() {
                    alert("ok")
                });
            });

        });

    </script>
</head>
<body>
    <button>展开</button>
    <button>收起</button>
    <button>切换</button>
    <div></div>
</body>
</html>

六、折叠菜单

效果图：

children()

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        .nav{
            list-style: none;
            width: 300px;
            margin: 100px auto;
        }
        .nav>li{
            border:1px solid #000;
            line-height: 35px;
            border-bottom: none;
            text-indent: 2em;
            position: relative;
        }
        .nav>li:last-child{
            border-bottom:1px solid #000;
            border-bottom-right-radius: 8px;
            border-bottom-left-radius: 8px;
        }
        .nav>li:first-child{
            border-top-right-radius: 8px;
            border-top-left-radius: 8px;

        }
        .nav>li>span{
            background: url('img/arrow_right.png') no-repeat center center;
            display: inline-block;
            width:32px;
            height: 32px;
            position: absolute;
            right: 10px;
            top:3px;
        }
        .sub{
            display: none;
        }
        .sub>li{
            list-style: none;
            background:mediumpurple;
            border-bottom:1px solid white;

        }
        .sub>li:hover{
            background:red;
        }
        .nav>.current>span{
            transform: rotate(90deg);
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        /*
        scroll()

         */

        $(function() {
            //监听一级菜单的点击事件
            $(".nav>li").click(function(event) {
                //拿到二级菜单
                var sub = $(this).children('.sub');
                //让二级菜单展开
                sub.slideDown(1000);
                //拿到所有非当前的一级菜单
                var othersub = $(this).siblings().children('.sub');
                //让所有非当前的二级菜单收起
                othersub.slideUp(1000);
                //箭头旋转向下
                $(this).addClass('current');
                //其他箭头回正
                $(this).siblings().removeClass('current');
            });

        });



    </script>
</head>
<body>
    <ul class="nav">
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
</body>
</html>

七、下拉菜单

效果图：

stop()

停止所有在指定元素上正在运行的动画。
如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        .nav{
            list-style: none;
            width: 300px;
            height: 50px;
            background: red;
            margin: 100px auto;
        }
        .nav>li{
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            float: left;
        }
        .sub{
            list-style: none;
            background:mediumpurple;
            display: none;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        /*
        scroll()
        在jQuery中如果需要执行动画,建议在执行动画之前先调用stop()方法,再执行动画

        动画执行队列
         */

        $(function() {
            //监听一级菜单的移入事件
            $(".nav>li").mouseenter(function(){
                //拿到二级菜单
                var $sub = $(this).children('.sub');
                //停止当前运行的动画
                $sub.stop();
                //让二级菜单展开
                $sub.slideDown('1000', function() {

                });

            })
            //监听一级菜单的移出事件 
            $(".nav>li").mouseleave(function(){
                //拿到二级菜单
                var $sub = $(this).children('.sub');
                //停止当前动画
                $sub.stop();
                //执行菜单收起
                $sub.slideUp('1000', function() {

                });
            })
        });

    </script>
</head>
<body>
    <ul class="nav">
        <li>一级菜单
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
</body>
</html>

八、淡入淡出

效果图：

fadeIn

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeOut()

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeToggle

通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeTo

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        div{
            width: 300px;
            height: 300px;
            background: red;
            display: none;

        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        /*
        scroll()
        在jQuery中如果需要执行动画,建议在执行动画之前先调用stop()方法,再执行动画
        动画执行队列
         */

        $(function() {
            //
            $("button").eq(0).click(function(event) {
                $("div").fadeIn(1000,function(){
                    alert("淡入完毕");
                })
            });
            $("button").eq(1).click(function(event) {
                $("div").fadeOut(1000,function(){
                    alert("淡chu完毕");
                })
            });
            $("button").eq(2).click(function(event) {
                $("div").fadeToggle(1000,function(){
                    alert("切换完毕");
                })
            });
            $("button").eq(3).click(function(event) {
                $("div").fadeTo(1000,0.5,function(){
                    alert("淡入到0.5");
                })
            });
        });

    </script>
</head>
<body>
    <button>淡入</button>
    <button>淡出</button>
    <button>切换</button>
    <button>淡入到</button>
    <div></div>
</body>
</html>