jQuery链式编程，节流阀

1、链式编程

设置性操作，可以链式编程

获取性操作，不能链式，因为获取性操作，获取的是数值，字符串等

链式编程取决于：返回值是否为jQuery对象

案例：五星好评

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style-type: none;
            float: left;
            font-size: 32px;
            margin-right: 3px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <ul>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            // 进入事件
            $("li").on("mouseenter", function() {
                // 当前li及前面的兄弟都变成★
                $(this).text("★").prevAll().text("★");
                // 设置当前li后面的兄弟都变成☆
                $(this).nextAll().text("☆");
            });
            // 离开事件
            $("ul").on("mouseleave", function() {
                $("li").text("☆");
                // 把点击的位置及前面兄弟的星星改变
                $(".current").text("★").prevAll().text("★");
            });
            // 点击事件:点击时，记住点击位置，
            // 让鼠标离开时根据离开的位置更改星星颜色
            $("li").on("click", function() {
                // 给点击的位置添加一个class，其他兄弟删除
                $(this).addClass("current").siblings().removeClass("current");
            })
        });
    </script>
</body>

</html>

View Code

2、节流阀

按下的时候触发，如果没弹起不让触发下一次

案例：音乐菜单栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            width: 1200px;
            height: 45px;
            margin: auto;
            overflow: hidden;
        }
        
        li {
            list-style-type: none;
            float: left;
            width: 150px;
            text-align: center;
        }
        
        a {
            line-height: 45px;
            display: block;
            text-decoration: none;
            color: #fff;
            font-weight: 700;
            background-color: olivedrab;
        }
        
        span {
            display: block;
            height: 45px;
            width: 150px;
            background-color: coral;
        }
    </style>
</head>

<body>
    <ul>
        <li><a href="#">导航1</a><span></span></li>
        <li><a href="#">导航2</a><span></span></li>
        <li><a href="#">导航3</a><span></span></li>
        <li><a href="#">导航4</a><span></span></li>
        <li><a href="#">导航5</a><span></span></li>
        <li><a href="#">导航6</a><span></span></li>
        <li><a href="#">导航7</a><span></span></li>
        <li><a href="#">导航8</a><span></span></li>
    </ul>
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            $("li").mouseenter(function() {
                $(this).children("span").stop().animate({
                    marginTop: -45
                });
            }).mouseleave(function() {
                $(this).children("span").stop().animate({
                    marginTop: 0
                });
            });
            // 设置节流阀：
            var flag = true;
            $(document).on("keydown", function(e) {
                var code = e.keyCode; //获取按下键盘的code值
                // 判断节流阀是否开启，开启则执行代码块
                if (flag) {
                    flag = false;//关闭节流阀
                    if (code >= 97 && code <= 105) {
                        $("li").eq(code - 97).trigger("mouseenter");
                        console.log("输出了" + code);
                    }
                }
            });
            $(document).on("keyup", function(e) {
                var code = e.keyCode;
                flag = true; //键盘弹起开启节流阀
                if (code >= 97 && code <= 105) {
                    $("li").eq(code - 97).trigger("mouseleave");

                }
            });
        });
    </script>
</body>

</html>

View Code

jQuery链式编程，节流阀

猜你喜欢