jQuery源码分析13: .addClass, .removeClass, .hasClass

jQuery源码分析13: .addClass, .removeClass, .hasClass

描述: 
.addClass( className )
classNameOne or more class names to be added to the class attribute of each matched element.

.addClass( function(index, currentClass) )
function(index, currentClass)A function returning one or more space-separated class names to be added. Receives the index position of the element in the set and the old class value as arguments.

each: function( callback, args ) {
    return jQuery.each( this, callback, args );
},

addClass: function( value ) {
    var classNames, i, l, elem, setClass, c, cl;
  
    /**
     * .addClass( function(index, currentClass) )
     * 遍历匹配的jQuery对象,将函数的返回值作为类名添加到class属性
     */
    if ( jQuery.isFunction( value ) ) {
        return this.each(function( j ) {
            jQuery( this ).addClass( value.call(this, j, this.className) );
        });
    }
 
    /**
     * .addClass( className )
     * 遍历匹配的jQuery对象,将className添加到class属性
     */
    if ( value && typeof value === "string" ) {
        classNames = value.split( rspace );
 
        for ( i = 0, l = this.length; i < l; i++ ) {
            elem = this[ i ];   //< 将第i个匹配的jQuery对象转化成DOM对象
 
            //< 匹配的元素必须是元素节点
            //< 若它的className为空且className数组长度为1,则直接将value赋值给className
            //< 否则遍历每一个className,判断是否已存在于该元素的class属性值中,若不存在则添加
            if ( elem.nodeType === 1 ) {  
                if ( !elem.className && classNames.length === 1 ) {
                    elem.className = value;
                } else {
                    setClass = " " + elem.className + " ";
 
                    for ( c = 0, cl = classNames.length; c < cl; c++ ) {
                        if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) {
                            setClass += classNames[ c ] + " ";
                        }
                    }
                    elem.className = jQuery.trim( setClass );
                }
            }
        }
    }
 
    return this;
},

同理可参考removeClass源码

var rclass = /[\n\t\r]/g,
rspace = /\s+/,

removeClass: function( value ) {
    var classNames, i, l, elem, className, c, cl;
 
    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 ) {
        classNames = ( value || "" ).split( rspace );
 
        for ( i = 0, l = this.length; i < l; i++ ) {
            elem = this[ i ];
 
            if ( elem.nodeType === 1 && elem.className ) {
                if ( value ) {
                    className = (" " + elem.className + " ").replace( rclass, " " );
                    for ( c = 0, cl = classNames.length; c < cl; c++ ) {
                        className = className.replace(" " + classNames[ c ] + " ", " ");
                    }
                    elem.className = jQuery.trim( className );
 
                } else {
                    elem.className = "";
                }
            }
        }
    }
 
    return this;

},

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 ) > -1 ) {
            return true;
        }
    }
 
    return false;
},