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>