jQuery入门[4]－链式代码

xiang588 · 发表于 2013-1-29 07:42:32

jQuery入门[4]－链式代码

<div class="clear" /><div class="postBody">jQuery入门[1]－构造函数
jQuery入门[2]－选择器
jQuery入门[3]－事件
jQuery入门[4]－链式代码
jQuery入门[5]－AJAX
jQuery入门[6]－动画
jQuery另一个很令人惬意的地方是，一般的代码都是一行一行写，jQuery的代码可以一串一串写。
这一点，在前面的文章中已经介绍过了。
直接来一个Demo:
<div style="border-bottom: #cccccc 1px solid; border-left: #cccccc 1px solid; padding-bottom: 4px; background-color: #eeeeee; padding-left: 4px; width: 98%; padding-right: 5px; font-size: 13px; border-top: #cccccc 1px solid; border-right: #cccccc 1px solid; padding-top: 4px;"><!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入门[4]－链式代码

浏览过的版块