jQuery提供了4个操作class的方法：
jQuery.fn.extend({
// ...
// 为匹配的每个元素增加指定的class(es)
addClass: function( value ) {},
// 从匹配的每个元素上，移除 一个 或 多个 或 全部class
removeClass: function( value ) {},
// 对匹配元素集中的每个元素增加或删除一个或多个class
toggleClass: function( value, stateVal ) {},
// 检测匹配的元素是否指定了传入的class，只要有一个匹配就返回true
hasClass: function( selector ) {},
// ...
});
.addClass():
为匹配的每个元素增加指定的class(es)
.addClass(className):className添加到每一个匹配元素的class属性上的一个或多个class
.addClass(function(index,currentClass)):function(index,currentClass)返回一个或多个class名称，多个class用空格分开这些class被添加到现有的class属性中
index 单签元素在集合中的位置 currentClass 当前的class名 this 指向集合中的当前元素
.addclass()
addClass:function(value){
var classNames,i,l,elem,setClass,c,cl;
//value为函数
if(jQuery.isFunction(value)){
return this.each(function(j){
//this.className 获取当前的class的值
jQuery(this).addClass(value.call(this,j,this.className));
});
}
//vlaue为数组
if(value && typeof vlaue === "string"){
classNames = value.split(rspace);//用空白符风格classNames 转换为数组
for(i=0,l=this.length;i<l;i++){//遍历所有匹配的元素 缓存长度
elem = this[i];//缓存下来 避免再次查找
if(elem.nodeType === 1){
//如果没有class属性 或class属性为空字符串 classNames.length ===1 ,多于一个去重
if(!elem.className && classNames.length === 1){
elem.className = value;
}else{//已有className 或 classNames长度大于1
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);
}
}
}
}
},
.removeClass():
从匹配的每个元素上，移除 一个 或 多个 或 全部class
如果是函数，执行函数，将返回结果再次调用jQuery.fn.removeClass
如果是字符串，在elem.className和classNames[c]前后加空格，判断replace删除
如果是undefined，置为空字符串elem.className = ""
className 一个或多个以空格分隔的class，这些class将被从匹配元素的class属性中移除
.removeClass( function(index, class) )
function(index, class) 函数返回一个或多个以空格分隔的class，用于移除。
.removeClass()
removeClass:function(value){
var classNames,i,l,elem,className,c,cl;
//如果传入函数则执行函数 取返回值作为要移除的classNames
if(jQuery.isFunction(value)){
return this.each(function(j){
//this.calssName 获取当前的class值
jQuery(this).removeClass(value.call(this,j,this.className));
});
}
if((value && typeof value === "string") || value === undefined){
// value || "" 避免空引用错误的常用技巧
classNames = (value || "").split(rspace);//分割数组
for(i=0,l=this.length;i<l;i++){//遍历所有匹配的元素 缓存长度
elem = this[i];//缓存下来 避免再次查找
if(elem.nodeType === 1 && elem.className){
//如果有value，则从当前className属性中删除
if(value){
className = (" " + elem.className + " ").replace(rclass," ");//前后加空格 将\n \t \r替换为空格
for(c = 0;cl = classNames.length;c<cl:c++){
className = className.replace(" " + classNames[c] + " "," ");//将要删除的className替换为空格
}
// 删除前后的空白符，然后赋值给elem.className
elem.classname = jQuery.trim(className);
}else{
elem.className = "";
}
}
}
return this;
},
.toggleClass():
对匹配元素集中的每个元素增加或删除一个或多个class
增加或删除的行为依赖当前元素是否含有指定的class，或switch参数的值
.toggleClass( className ) 1.0
className 一个或多个class（用空格隔开），在匹配元素集的每个元素上切换class
如果集合中的某个元素含有指定的className，className会被删除；如果没有会添加。
.toggleClass( className, switch ) 1.3
switch 一个布尔值，依据这个布尔值来决定是添加（true）还是删除（false）
.toggleClass( [switch] ) 1.4
switch 一个布尔值，依据这个布尔值来决定是添加还是删除
.toggleClass( function(index, class, switch) [, switch] ) 1.4
function(index, class, switch) 函数返回用于切换的calss名称
index是当前元素是集合中的下标位置， class是当前元素的就class值
核心技巧：调用addClass 或 removeClass 或 直接赋值elem.className
.toggleClass()
toggleClass: function( value, stateVal ) {
var type = typeof value, // value的类型，可以是字符串（一个或多个class），也可以是function，（undefined和boolean是另说）
isBool = typeof stateVal === "boolean";
// 如果是函数，则执行函数，用函数的返回值作为切换的className，迭代调用jQuery.fn.toggleClass
if ( jQuery.isFunction( value ) ) {
return this.each(function( i ) {
// 迭代调用
jQuery( this ).toggleClass( value.call(this, i, this.className, stateVal), stateVal );
});
}
// 遍历当前jQuery对象
return this.each(function() {
// value是字符串，挨个遍历value中的类样式，switch的优先级高于hasClass，hasClass返回false则addClass返回true则removeClass
if ( type === "string" ) {
// toggle individual class names
// 切换单个class
var className,
i = 0,
self = jQuery( this ),
state = stateVal,
classNames = value.split( rspace ); // 可能有多个class，用空白符分割
// 因为不需要在className前后加空格，所以这里可以将取值、自增、判断合并为while循环。很好的技巧。
while ( (className = classNames[ i++ ]) ) {
// check each className given, space seperated list
/*
* 如果state是布尔值，则以state为准，否则检查是否含有className
* 含有 state为false，表示需要addClass；反之需要removeClass
* 这个三元表达式合并了state与self.hasClass的判断，小技巧
*/
state = isBool ? state : !self.hasClass( className );
//删除还是添加
self[ state ? "addClass" : "removeClass" ]( className );
}
/*
* type === "undefined" 未指定参数，即.toggleClass()
* type === "boolean" 省略className，只有switch，即.toggleClass( switch )
*/
// 未指定参数 或 只有switch，则切换整个className
} else if ( type === "undefined" || type === "boolean" ) {
// 如果有className，则缓存下来，以便再次调用时恢复
if ( this.className ) {
// 以内部数据的方式缓存
jQuery._data( this, "__className__", this.className );
}
/*
* 切换整个className
* 又是一个合并了几个判断条件的三元，分解为四个逻辑：
* this.className && value 是 true/undefined ""
* this.className && value 是 false ""
* !this.className && value 是 true/undefined jQuery._data( this, "__className__" ) || ""
* !this.className && value 是 false ""
*
* 分析一下上边的四个逻辑，可以总结如下：（value用switch代替）
* 1. 如果this.className存在，无论switch什么状态（true/false/undefined），都置为空""
* 2. 如果this.className不存在，如果switch为true/undefined，才会恢复className
* 3. 如果this.className不存在，如果switch为false，置空（保持不变）
*
* .toggleClass( switch )的用法可以总结如下：
* 1. switch为true，进行正常的切换，等价于.toggleClass()
* 2. switch为false，总是置空
*/
this.className = this.className || value === false ? "" : jQuery._data( this, "__className__" ) || "";
}
});
},
.hasClass():
检测匹配的元素是否指定了传入的class，只要有一个匹配就返回true
.hasClass() 检测匹配的元素是否指定了传入的class，只要有一个匹配就返回true；元素可能有多个class，在HTML中多个class用空格隔开；
如果遇到某个元素含有指定的className，.hasClass()将会返回true，即便还指定了其他的className。
.hasClass()
hasClass:function(selector){
var className = " " + selector + " ",//前后加空格
i =0,
l = this.length;
for(;i<l:i++){
// 必须是Element，技巧同样是前后加空格，同样是indexOf
if(this[i].nodeType === 1 && ( " " + this[i].className + " ").replcae(rclass," ").indexOf(className) > -1){
return true;
}
}
return false;
}
