天天看點

jquery addClass 方法分析

addClass: function( value ) {
        //初始化Jq對象的屬性
        var classes, elem, cur, clazz, j, finalValue,
            proceed = typeof value === "string" && value,//看看傳進來的東西是不是string類型
            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 ) {
            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++]) ) {//給clazz 附上目前class 
                        if ( cur.indexOf( " " + clazz + " " ) < 0 ) { // 原來的對象裡 找 clazz  如果找不到則添加進去
                            cur += clazz + " ";
                        }
                    }

                    finalValue = jQuery.trim( cur );//去首尾空
                    if ( elem.className !== finalValue ) {//如果class不為空 則添加屬性
                        elem.className = finalValue;
                    }
                }
            }
        }

        return this;
    },