深入了解jQuery之链式结构

本文是在阅读了Aaron艾伦的jQuery源码解析(地址：http://www.imooc.com/learn/172)后的个人体会以及笔记。在这里感谢艾伦老师深入浅出的讲解！！

1 什么是链式？

先来段代码：

$('#level > a').click(function(){
            $(this).addClass('current').next().show().parent().siblings().children('a').removeClass('current').next().hide()
        })

　　这段代码的意思是： 当点击id为level中的直属a元素时，将所点击的a元素添加一个current的class，将该a元素的下一个同级元素显示出来，将这个同级元素的
父元素的所有同级元素的标签为a 的子元素移除 current class，将每个a元素的下一个元素隐藏

这么复杂的任务仅仅用了一行代码就完成了，这就是链式的方便性！

2  为什么jQuery能用链式？

　　就拿上面的代码来说吧，$(this).addClass('current).next() ,为什么addClass()后面能直接使用next()？一切尽在源码：

jQuery.fn.extend({
    addClass: function( value ) {
        //  省略...
        return this;
    },

　　看到了木有？addClass函数最后的一句：return this 

　　也就是，仅从对象上来说： $(this).addClass('current') === $(this)

addClass: function( value ) {
        var classes, elem, cur, clazz, j, finalValue,
            proceed = typeof value === "string" && value,
            i = 0,
            len = this.length;

        if ( jQuery.isFunction( value ) ) {
            return this.each(function( j ) {
                jQuery( this ).addClass( value.call( this, j, this.className ) );
            });
        }

        if ( proceed ) {
            // The disjunction here is for better compressibility (see removeClass)
            classes = ( value || "" ).match( rnotwhite ) || [];

            for ( ; i < len; i++ ) {
                elem = this[ i ];
                cur = elem.nodeType === 1 && ( elem.className ?
                    ( " " + elem.className + " " ).replace( rclass, " " ) :
                    " "
                );

                if ( cur ) {
                    j = 0;
                    while ( (clazz = classes[j++]) ) {
                        if ( cur.indexOf( " " + clazz + " " ) < 0 ) {
                            cur += clazz + " ";
                        }
                    }

                    // only assign if different to avoid unneeded rendering.
                    finalValue = jQuery.trim( cur );
                    if ( elem.className !== finalValue ) {
                        elem.className = finalValue;
                    }
                }
            }
        }

        return this;
    },

不仅是addClass() 像什么 removeClass()  show() hide()......都在结尾存在这么一句： return this