DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> jQuery 入門之(4)-鏈式代碼
jQuery 入門之(4)-鏈式代碼
編輯:AJAX詳解     

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:

href="http://docs.jquery.com/Traversing">http://docs.jquery.com/Traversing)等方法變化jQuery對象的對應范圍,然後,又可以用end()函數將范圍復原到原來的狀況。
需要注意的是,

有幾個函數並不返回jQuery對象,所以鏈條就不能繼續下去,比如get()就不能像eq()那樣用。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved