<jQuery>总结:注意点

一、函数方法

1、静态函数的使用

1、jQuery中的each静态方法和mao静态方法的区别

1.1 返回值的不同:

  • each 静态方法默认的返回值就是所遍历的变量
    遍历数组则返回的是数组,遍历对象则返回的是对象
  • map 静态方法默认的返回值就是一个空数组

1.2 回调函数中对值处理方式不同:

  • each 静态方法不支持在回调函数中对遍历的数组进行处理
  • map 静态方法可以在回调函数中通过return对遍历的数组进行处理,然后生成一个新数组返回

示例:

<script>
    var arr = [0, 1, 2, 3];
    console.log("each");
    var $arr = $(arr).each(function (index, value) {
        console.log(index, value);
        return index + value;
    });
    console.log($arr);  

    console.log("map");
    var $map = $(arr).map(function (index, value) {
        console.log(index, value);
        return index + value;
    });
    console.log($map);

</script>
打印结果

2、scrollTop()方法:

1、使用

1.1 获取:

    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
           //编写jQuery相关方法
            //获取滚动的偏移量
            $(".scroll").scrollTop();

            //获取网页滚动的偏移量
            $("body").scrollTop() + $("html").scrollTop();

            //设置滚动的偏移量
            $(".scroll").scrollTop(300);    //300px
            //获取网页滚动的偏移量
            $("html, body").scrollTop(300); //300px
        });
    </script>

注意:

  • 为了保证浏览器的兼容,获取网页滚动的偏移量需要将body和html的两个偏移量相加起来
  • 为了保证浏览器的兼容,同样在设置网页滚动的偏移量时,需要同时设置body和html两个偏移量

二、动画:

1、执行动画的注意点:

1.1 同一动画执行前需要先停止当前动画:
在jQuery中,如果需要执行动画,建议在执行某一动画之前先调用stop方法,然后再执行动画

因为在jQuery中有一个动画队列,每次执行的动画都会被加入到这个动画队列中,先进入的先执行,后进入的要等前一个执行完毕才能继续执行。这就导致在快速重复执行某一动画的时候,造成动画等待的效果,因此,需要在重复执行下一个动画之前,要先停止掉当前的动画。
注意:是同一个动画

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画-下拉菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .nav {
            width: 300px;
            height: 40px;
            background-color: red;
            margin: 100px auto;
            text-align: center;
        }

        .nav>li {
            width: 100px;
            height: 40px;
            line-height: 40px;
            float: left;
        }

        .sub {
            background-color: deepskyblue;
            display: none;
        }

        .sub>li {
            border-bottom: 1px solid #fff;
        }
    </style>

    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //鼠标进入
            $(".nav>li").mouseenter(function () {
                //获取当前li的子元素(class为.sub的)
                var $sub = $(this).children(".sub");
                //停止当前li子元素的动画
                $sub.stop();
                $sub.slideDown(1000);
            });

            //鼠标移出
            $(".nav>li").mouseleave(function () {
                //获取当前li的子元素(class为.sub的)
                var $sub = $(this).children(".sub");
                //停止当前li子元素的动画
                $sub.stop();
                $sub.slideUp(1000);
            });
        });
    </script>
</head>
<body>

<ul class="nav">
    <li>一级菜单
        <ul class="sub">
            <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>
        </ul>
    </li>
    <li>一级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
</ul>

</body>
</html>
下拉菜单动画.gif

1.2 同一动画(多个动画组合)的情况:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画-淡入淡出广告</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .ad {
            width: 348px;
            height: 244px;
            position: fixed;
            right: 0;
            bottom: 0;
            margin: 10px;
            display: none;
        }

        .ad>img {
            width: 348px;
            height: 244px;
        }

        .close {
            width: 40px;
            height: 40px;
            position: absolute;
            top: 0;
            right: 0;
        }

    </style>

    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
           //编写jQuery相关方法
            $(".close").click(function () {
                $(".ad").slideUp(1000);
            });
            //注意:
            $(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(1000);
        });
    </script>

</head>
<body>
<div class="ad">
    <img src="../imgs/ad.png"/>
    <span id="close" class="close"></span>
</div>
</body>
</html>
淡入淡出广告动画.gif

2、动画停止方法stop()的使用:

注意:不同参数的效果不同

    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            $("#btn").click(function () {
                $("ul").append("<li>我是新增的一个li</li>");
            });
            
            $("ul").delegate("li", "click", function () {
                console.log(this);
                console.log($(this).html());

            });

            $("#btn1").click(function () {  //开始动画按钮
                //链式动画
                $("div")    //需要执行动画的元素
                    .animate({  //动画1
                        width: 500  //修改宽度为500
                    }, 1000,    //动画时长1000毫秒
                        "linear")   //匀速动画
                    .delay(2000)    //延时2000毫秒
                    .animate({  //动画2
                        height: 500  //修改高度为500
                    }, 1000,    //动画时长1000毫秒
                        "swing" //缓动动画
                    );
            });
            $("#btn2").click(function () {  //停止动画按钮
                //立即停止当前动画,继续执行后续的动画
                $("#btn").stop();
                $("#btn").stop(false);
                $("#btn").stop(false, false);

                //立即停止当前和后续所有的动画
                $("#btn").stop(true);
                $("#btn").stop(true, false);

                //立即完成当前的动画,继续执行后续动画
                $("#btn").stop(false, true);

                //立即完成当前的,并且停止后续所有的
                $("#btn").stop(true, true);
            });
        });
    </script>

推荐阅读更多精彩内容