jQuery源码学习（1）——addClass

　　最近比较闲，寻思着学习下jQuery源码，看了好多博客，很多都讲的比较详细。jQuery虽然只有那么200多K，但内容却比较丰富，对于我这样一个js菜鸟，看起来相当吃力。骨头太大，只能化整为零，从简单的小块开始。

　　　　今天看了下class系列的方法，贴下来！可能网上已经有很多，就当做自己记录笔记吧，请勿喷饭！

//添加类
    addClass: function( value ) {
        var classNames, i, l, elem,
            setClass, c, cl;
        
        //如果value是一个函数，则调用这个函数得到运算结果，然后再递归调用addClass
        if ( jQuery.isFunction( value ) ) {
            return this.each(function( j ) {
                jQuery( this ).addClass( value.call(this, j, this.className) );
            });
        }

        if ( value && typeof value === "string" ) {
            //得到传入的class数组
            classNames = value.split( core_rspace );

            //this表示调用此方法的jQuery对象，可能有多个
            for ( i = 0, l = this.length; i < l; i++ ) {
                elem = this[ i ];
                //元素类型节点类型:元素element 1;属性attr 2;文本text 3;注释comments 8;文档document 9        
                //如果是元素节点        
                if ( elem.nodeType === 1 ) {
                    //如果元素没有class并且classNames数组只有一个元素，则直接赋值
                    if ( !elem.className && classNames.length === 1 ) {
                        elem.className = value;

                    } else {
                        setClass = " " + elem.className + " ";

                        //循环添加要加入的class
                        for ( c = 0, cl = classNames.length; c < cl; c++ ) {
                            if ( setClass.indexOf( " " + classNames[ c ] + " " ) < 0 ) {
                                setClass += classNames[ c ] + " ";
                            }
                        }
                        elem.className = jQuery.trim( setClass );
                    }
                }
            }
        }
        //返回获取的jQuery对象
        return this;
    },

 

//删除指定的类
    removeClass: function( value ) {
        var removes, className, elem, c, cl, i, l;

        if ( jQuery.isFunction( value ) ) {
            return this.each(function( j ) {
                jQuery( this ).removeClass( value.call(this, j, this.className) );
            });
        }
        if ( (value && typeof value === "string") || value === undefined ) {
            removes = ( value || "" ).split( core_rspace );

            for ( i = 0, l = this.length; i < l; i++ ) {
                elem = this[ i ];
                if ( elem.nodeType === 1 && elem.className ) {

                    //获取当前元素的class（用空格替换制表符或回车符、换行符）
                    className = (" " + elem.className + " ").replace( rclass, " " );

                    // loop over each item in the removal list
                    for ( c = 0, cl = removes.length; c < cl; c++ ) {
                        // Remove until there is nothing to remove,
                        while ( className.indexOf(" " + removes[ c ] + " ") >= 0 ) {
                            className = className.replace( " " + removes[ c ] + " " , " " );
                        }
                    }
                    //如果value为空，则直接去掉元素的所有class；否则使用处理后的className
                    elem.className = value ? jQuery.trim( className ) : "";
                }
            }
        }
        //大部分方法都是返回this，遍于进行链式操作
        return this;
    },

//如果没有class则添加，如果有则删除
    //如果stateVal设置为true，则添加样式；如果为false，则删除样式
    toggleClass: function( value, stateVal ) {
        var type = typeof value,
        //判断stateVal是否为boolean类型
        isBool = typeof stateVal === "boolean";

        //value为function时递归调用
        if ( jQuery.isFunction( value ) ) {
            return this.each(function( i ) {
                jQuery( this ).toggleClass( value.call(this, i, this.className, stateVal), stateVal );
            });
        }

        return this.each(function() {
            if ( type === "string" ) {
                // toggle individual class names
                var className,
                i = 0,
                self = jQuery( this ),
                state = stateVal,
                classNames = value.split( core_rspace );
                
                //如果className[ i++ ] 存在
                while ( (className = classNames[ i++ ]) ) {
                    // check each className given, space separated list
                    //如果第二个参数是boolean类型，则将第二个参数赋值给state；
                    //否则判断当前jQuery对象是否拥有className这个类，将判断结果取反，赋值给state
                    state = isBool ? state : !self.hasClass( className );
                    //如果state为true，则将className赋值给self['addClass'];
                    //如果state为false，则将className赋值为self['removeClass'],这里的self就是当前jQuery对象
                    self[ state ? "addClass" : "removeClass" ]( className );
                }

            } else if ( type === "undefined" || type === "boolean" ) {
                if ( this.className ) {
                    // store className if set
                    jQuery._data( this, "__className__", this.className );
                }

                // toggle whole className
                //如果className为空或者value为false，则直接清空对象的class；
                //否则将保存的_className赋值给当前对象的className
                this.className = this.className || value === false ? "" : jQuery._data( this, "__className__" ) || "";
            }
        });
    },

//判断某个对象（或一个对象集中的第一个对象）是否拥有某个class
    hasClass: function( selector ) {
        var className = " " + selector + " ",
            i = 0,
            l = this.length;
        for ( ; i < l; i++ ) {
            if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) >= 0 ) {
                return true;
            }
        }

        return false;
    },