轉,jQuery入門[4]－鏈式代碼

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

jQuery入門[4]－鏈式代碼

jQuery入門[1]－建構函式
jQuery入門[2]－選取器
jQuery入門[3]－事件
jQuery入門[4]－鏈式代碼
jQuery入門[5]－AJAX
jQuery入門[6]－動畫
jQuery另一個很令人愜意的地方是，一般的代碼都是一行一行寫，jQuery的代碼可以一串一串寫。
這一點，在前面的文章中已經介紹過了。
直接來一個Demo:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>chainning code</title>
    <script src="../scripts/jquery-1.2.3.intellisense.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            //添加四個按鈕
            $('<input type="button" value="click me"/><input type="button" value="triggle click me"/><input type="button" value="detach handler"/><input type="button" value="show/hide text"/>').appendTo($('body'));
            //找出所有按鈕
            $('input[type="button"]')
                .eq(0)//找到第一個按鈕
                    .click(function(){
                        alert('you clicked me!');
                    })
                .end().eq(1)//返回所有按鈕，再找到第二個
                    .click(function(){
                        $('input[type="button"]:eq(0)').trigger('click');
                    })
                .end().eq(2)//返回所有按鈕，再找到第三個
                    .click(function(){
                        $('input[type="button"]:eq(0)').unbind('click');
                    })
                .end().eq(3)//返回所有按鈕，再找到第四個
                    .toggle(function(){
                        $('.panel').hide('slow');
                    },function(){
                        $('.panel').show('slow');
                    });
        });
    </script>
    <style type="text/css">
        .panel
        {
            padding: 20px;
            background-color: #000066;
            color: #FFFFFF;
            font-weight: bold;
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="panel">welcome to jQuery!</div>
</body>
</html>

現在，鏈式代碼已經成為jQuery非常流行的一個特點了，在使用鏈條方式寫代碼時，可能會用到eq()/filter()……（reference:http://docs.jquery.com/Traversing）等方法變化jQuery對象的對應範圍，然後，又可以用end()函數將範圍複原到原來的狀況。
需要注意的是，有幾個函數並不返回jQuery對象，所以鏈條就不能繼續下去，比如get()就不能像eq()那樣用。

--未完待續--

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More