一、$().addClass()
作用：
向目的元素增加一个或多个类名
源码：
//向目的元素增加一个或多个类名
//源码8401行
addClass: function( value ) {
var classes, elem, cur, curValue, clazz, j, finalValue,
i = 0;
//假如addClass(value)的value是一个function
//那末就经由过程call让目的元素this挪用该function
if ( isFunction( value ) ) {
return this.each( function( j ) {
// function(index,currentclass)
// index 对应 j，作用是猎取多个目的元素的下标；
// currentClass 对应 getClass(this)，作用是猎取当前元素的类名，轻易加空格
jQuery( this ).addClass( value.call( this, j, getClass( this ) ) );
} );
}
//将（多个）类名转为数组情势
classes = classesToArray( value );
if ( classes.length ) {
//多个目的元素
while ( ( elem = this[ i++ ] ) ) {
//猎取当前值
curValue = getClass( elem );
//假如目的元素是元素节点而且用空格摆布包起来 " "+value+" "
cur = elem.nodeType === 1 && ( " " + stripAndCollapse( curValue ) + " " );
if ( cur ) {
j = 0;
//一个个类名
while ( ( clazz = classes[ j++ ] ) ) {
//当前元素没有和要增加的类名反复的话就增加
if ( cur.indexOf( " " + clazz + " " ) < 0 ) {
cur += clazz + " ";
}
}
//末了，确认经由处置惩罚后的类名鸠合是不是和处置惩罚前的类名鸠合雷同
//假如雷同，就setAttribute，从新衬着，不然不从新衬着（机能优化）
// Only assign if different to avoid unneeded rendering.
finalValue = stripAndCollapse( cur );
if ( curValue !== finalValue ) {
//末了经由过程setAttribute，增加类名
elem.setAttribute( "class", finalValue );
}
}
}
}
return this;
},剖析：
（1）getClass()
作用：
猎取目的元素的类名
源码：
//源码8377行
function getClass( elem ) {
return elem.getAttribute && elem.getAttribute( "class" ) || "";
}（2）classesToArray
作用：
将（多个）类名转为数组情势
源码：
//源码8382行
function classesToArray( value ) {
//元素的className假如有多个类名的话，是以数组情势保留的，那就直接返回
if ( Array.isArray( value ) ) {
return value;
}
//假如元素类名是string范例的话
if ( typeof value === "string" ) {
return value.match( rnothtmlwhite ) || [];
}
return [];
}（3）stripAndCollapse
作用：
将vaues以空格离开，再以空格拼接
源码：
// 源码8370行
// Strip and collapse whitespace according to HTML spec
// https://infra.spec.whatwg.org/#strip-and-collapse-ascii-whitespace
function stripAndCollapse( value ) {
var tokens = value.match( rnothtmlwhite ) || [];
return tokens.join( " " );
}综上：
能够看到 addClass() 的思绪是：
① 猎取元素当前类名鸠合 a
② 假如要增加的类名 b 不反复，则将 b 增加进 a 里
③ 末了运用elem.setAttribute("class",a)完成
二、$().removeClass
作用：
移除类，假如没有参数，则移除目的元素一切类名
源码：
//源码8449行
removeClass: function( value ) {
var classes, elem, cur, curValue, clazz, j, finalValue,
i = 0;
//作用同上
if ( isFunction( value ) ) {
return this.each( function( j ) {
jQuery( this ).removeClass( value.call( this, j, getClass( this ) ) );
} );
}
//假如没有划定参数，则删除一切类
if ( !arguments.length ) {
return this.attr( "class", "" );
}
//将（多个）类名转为数组情势
classes = classesToArray( value );
if ( classes.length ) {
while ( ( elem = this[ i++ ] ) ) {
curValue = getClass( elem );
// This expression is here for better compressibility (see addClass)
cur = elem.nodeType === 1 && ( " " + stripAndCollapse( curValue ) + " " );
if ( cur ) {
j = 0;
while ( ( clazz = classes[ j++ ] ) ) {
// 假如当前元素的类名里有要移除的类，
// 就将该类替换成" "
// Remove *all* instances
while ( cur.indexOf( " " + clazz + " " ) > -1 ) {
cur = cur.replace( " " + clazz + " ", " " );
}
}
//同上
// Only assign if different to avoid unneeded rendering.
finalValue = stripAndCollapse( cur );
if ( curValue !== finalValue ) {
elem.setAttribute( "class", finalValue );
}
}
}
}
return this;
},能够看到 addClass() 的思绪是：
① 猎取元素当前类名鸠合 a
② 假如要移除的类名 b 不反复，则将 a 内里的 b 替换成空格 ” “
③ 末了运用elem.setAttribute("class",a)完成移除类名
三、$().toggleClass
作用：
切换类
源码：
//stateVal为true，则增加类，false则移除类
//源码8497行
toggleClass: function( value, stateVal ) {
var type = typeof value,
//假如value是string范例或许是数组范例的话，为true，反之为false
isValidValue = type === "string" || Array.isArray( value );
//true增加类，false移除类
if ( typeof stateVal === "boolean" && isValidValue ) {
return stateVal ? this.addClass( value ) : this.removeClass( value );
}
//同上
if ( isFunction( value ) ) {
return this.each( function( i ) {
jQuery( this ).toggleClass(
value.call( this, i, getClass( this ), stateVal ),
stateVal
);
} );
}
return this.each( function() {
var className, i, self, classNames;
if ( isValidValue ) {
// Toggle individual class names
i = 0;
self = jQuery( this );
classNames = classesToArray( value );
while ( ( className = classNames[ i++ ] ) ) {
//假如目的元素已经有要toggle的className，那末就移除它
// Check each className given, space separated list
if ( self.hasClass( className ) ) {
self.removeClass( className );
} else {
//不然就增加类
self.addClass( className );
}
}
// Toggle whole class name
}
//假如$.toggleClass()没有值或许该值为布尔值
else if ( value === undefined || type === "boolean" ) {
className = getClass( this );
//假如目的元素有类的话，就先用__className__属性保留类名
if ( className ) {
// Store className if set
dataPriv.set( this, "__className__", className );
}
// If the element has a class name or if we're passed `false`,
// then remove the whole classname (if there was one, the above saved it).
// Otherwise bring back whatever was previously saved (if anything),
// falling back to the empty string if nothing was stored.
//假如目的元素存在setAttribute的要领话
if ( this.setAttribute ) {
//假如已有类名/value=false，则移除一切类名
//假如没有类名而且value=true，
//则从dataPriv中从新猎取之前保留过的__className__当作目的元素的类名
this.setAttribute( "class",
className || value === false ?
"" :
dataPriv.get( this, "__className__" ) || ""
);
}
}
} );
},剖析：
主如果两个 if
（1） if ( typeof stateVal === “boolean” && isValidValue )
这个就是$().toggleClass(value,truefalse) 的第二个参数的作用了，
true 即 addClass()，false 即 removeClass()
（2）if(isValidValue )
这个是只要一个参数的状况
应用 hasClass 推断是不是 add/removeClass
（3）假如$.toggleClass()没有值或许第一个值为 true 的话
假如目的元素有类名的话，就运用dataPriv来保留类名，
假如目的元素有setAttribute的话，则将 className 设置为dataPriv里保留的值。
四、$().hasClass
作用：
搜检目的元素是不是包括指定的类
源码：
//源码8568行
hasClass: function( selector ) {
var className, elem,
i = 0;
className = " " + selector + " ";
while ( ( elem = this[ i++ ] ) ) {
if ( elem.nodeType === 1 &&
//症结代码
( " " + stripAndCollapse( getClass( elem ) ) + " " ).indexOf( className ) > -1 ) {
return true;
}
}
return false;
}这个代码还挺简朴的，就不剖析了。
（完）
