jQuery入门[4]－链式代码

jQuery链式调用技巧

最新推荐文章于 2022-11-07 15:03:48 发布

转载最新推荐文章于 2022-11-07 15:03:48 发布 · 280 阅读

文章标签：

#jquery #button #function #input #reference

本文通过一个示例展示了如何在jQuery中运用链式调用，包括添加按钮、触发点击事件、解除绑定以及显示隐藏文本等功能。介绍了eq()、filter()等方法用于改变jQuery对象的选择范围，并使用end()方法恢复原始范围。

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()那样用。