03 - jQuery链式编程

时间 2019-11-07

标签 jquery 链式编程栏目 JQuery 繁體版

原文原文链接

什么是链式编程

链式编程是将多个操做（多行代码）经过点号"."连接在一块儿成为一句代码。链式代码一般要求操做有返回值，但对于不少操做大都是void型，什么也不返回，这样就很难链起来了，固然也有解决办法，可能不太优雅。链式编程的新思想在jQuery中已流行使用；那么接下来我们看一下链式编程。css

链式编程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            // 获取按钮调用点击事件,获取div设置p标签内容，点击按钮设置背景颜色

            $('#btn').click(function () {
                // 普通写法
                $('#dv').html('<p>我是一个p</p>');
                $('#dv').css('backgroundColor', 'red');

                // 链式编程： Object.method().method().....   前提方法的返回值 仍然是一个这个对象
                $('#dv').html('<p>我是一个p</p>').css('backgroundColor', 'red');

                // 断链
                // 此时.html() 是获取的字符串对象 而不是当前对象
                var obj = $('#dv').html().css('backgroundColor', 'red');
                // $(...).html(...).css is not a function
                console.log(obj);
            });
        });
    </script>
</head>
<body>
    <input type="button" value="显示效果" id="btn">
    <div id="dv">

    </div>
</body>
</html>

链式编程案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        // 获取列表中全部li，当鼠标进入后，当前的li有高亮显示。点击的时候，当前点击的li的字体变大而且颜色发生改变，改变字体
        $(function () {
            $('ul > li').mouseover(function () {
                $(this).css('backgroundColor', 'red').siblings('li').css('backgroundColor', '').css('color', 'green');
            }).click(function () {
                $(this).css('fontSize', '30px').siblings('li').css('fontSize', '16px');
            })
        });

        // 点击按钮改变按钮的value值，鼠标进入到按钮中 按钮的宽高改变，鼠标离开的时候按钮颜色为绿色
        $(function () {
            $('#btn').click(function () {
                $(this).val('已经改变的效果');
            }).mouseover(function () {
                $(this).css({'height': '100px', 'width': '120px'});
            }).mouseout(function () {
                $(this).css('backgroundColor', 'green');
            });
        });
    </script>
</head>
<body>
    <input type="button" value="显示效果" id="btn">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

拓展获取兄弟元素的一些方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            // 获取ul中全部的li 为每一个li注册鼠标进入的事件
            // 当鼠标获取到时，对当前元素的兄弟元素进行操做
            $('#uu > li').mouseenter(function () {
                // .next()  获取当前元素的下一个兄弟元素
                $(this).next().css('backgroundColor', 'green');

                // .nextAll() 获取当前元素下面的全部兄弟元素
                $(this).nextAll().css('backgroundColor', 'red');

                // .prev() 获取当前元素的前一个元素
                $(this).prev().css('backgroundColor', 'yellow');

                // .prevAll() 获取当前元素前面全部的元素
                $(this).prevAll().css('backgroundColor', 'black');
                
                // ,siblings() 获取当前元素的全部兄弟元素 不包括本身
                $(this).siblings().css('backgroundColor', 'pink');
            });
        });
    </script>
</head>
<body>
    <ul id="uu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

啤酒案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style-type: none;
            width: 200px;
            position: absolute;
            left: 500px;
        }

        ul li {
            margin-top: 10px;
            cursor: pointer;
            text-align: center;
            font-size: 20px;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        // 获取ul中全部li 有鼠标进入事件  鼠标离开事件  点击事件
        $(function () {
            $('ul > li').mouseenter(function () {
                $(this).css('backgroundColor', 'red').siblings().css('backgroundColor', '');
            }).mouseleave(function () {
                $(this).css('backgroundColor', '').siblings('backgroundColor', '');
            }).click(function () {
                // // 当前元素前面全部兄弟元素，背景为黄色
                // $(this).prevAll().css('backgroundColor', 'yellow');
                // // 当前元素后面全部兄弟元素，背景为蓝色
                // $(this).nextAll().css('backgroundColor', 'blue');

                // 链式编程
                // 若是直接调用 会出现断链 
                // 当执行到第一个css方法时，返回对象是当前对象以前的全部兄弟对象，而后再次调用当前对象的全部兄弟对象会出现咱们不想看到的结果
                // .end() 回复到断链以前的对象
                $(this).prevAll().css('backgroundColor', 'yellow').end().nextAll().css('backgroundColor', 'blue');
            });
        });
    </script>
</head>
<body>
<ul>
    <li>青岛啤酒（TsingTao）</li>
    <li>瓦伦丁（Wurenbacher）</li>
    <li>雪花（SNOW）</li>
    <li>奥丁格教士（Franziskaner）</li>
    <li>科罗娜喜力柏龙（Paulaner）</li>
    <li>嘉士伯Kaiserdom</li>
    <li>罗斯福（Rochefort）</li>
    <li>粉象（Delirium）</li>
    <li>爱士堡（Eichbaum）</li>
    <li>哈尔滨牌蓝带</li>
</ul>
</body>
</html>

03 - jQuery链式编程

什么是链式编程

链式编程

链式编程案例

拓展 获取兄弟元素的一些方法

啤酒案例

拓展获取兄弟元素的一些方法