jQuery入门[4]-链式代码

卢小苗的店

卢小苗的店

2016-02-19 13:54

今天图老师小编给大家精心推荐个jQuery入门[4]-链式代码教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~
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
    titlechainning 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()那样用。
展开更多 50%)
分享

猜你喜欢

jQuery入门[4]-链式代码

Web开发
jQuery入门[4]-链式代码

jQuery 学习入门篇附实例代码

Web开发
jQuery 学习入门篇附实例代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

模仿jQuery each函数的链式调用

Web开发
模仿jQuery each函数的链式调用

JQuery 常用操作代码

Web开发
JQuery 常用操作代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Jquery cookie操作代码

Web开发
Jquery cookie操作代码

jQuery 入门讲解1

Web开发
jQuery 入门讲解1

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Oracle数据库备份与恢复(5):Flashback

Oracle数据库备份与恢复(5):Flashback

影响市容者 智商不高者分组 - QQ搞笑分组

影响市容者 智商不高者分组 - QQ搞笑分组
下拉加载更多内容 ↓