jQuery源码-class操作

写在前面

本文写作基于jQuery 1.9.1版本，源码分析系列目录：http://www.cnblogs.com/chyingp/archive/2013/06/03/jquery-souce-code-study.html

jQuery中class操作相关的方法

jQuery中共提供了四个操作class的方法，除了toggleClass外，其他从方法名就可以知道方法是干嘛的，下文会分别举具体例子

.addClass(className)：添加className

.removeClass(className)：删除className

.hasClass(className)：是否有className

.toggleClass(className)：如果没有className，则添加className；如果有，则删除className

.addClass：添加class

3种用法，直接上例子

$('#aa').addClass('green'); // 添加green类
$('#cc').addClass('red green'); // 添加red green类

// index：元素在集合中的位置，从0开始
// className：元素当前className
// 返回值：添加到元素上的class
$('div').addClass(function(index, className){
    if(index>1){
        return 'red';
    }else{
        return 'green';
    }
});

.removeClass：删除class

4种用法，跟.addClass极为类似，如下：

$('#aa').removeClass('green'); // 添加green类
$('#aa').removeClass('red green'); // 添加red green类
$('#aa').removeClass();  // 删除所有class

// index：元素在集合中的位置，从0开始
// className：元素当前className
// 返回值：从元素上删除的class
$('div').removeClass(function(index, className){
    if(index>1){
        return 'red';
    }else{
        return 'green';
    }
});

.hasClass：是否有某个类

1种用法，直接上例子；下面例子中需要注意的是：只要集合中的任意一个元素（div）有red类，它就返回true

$('div').hasClass('red');  // 是否存在div，它有red类

.toggleClass：切换类

$('div').toggleClass('red');  // 切换red类
$('div').toggleClass('red green');  // 切换red、green类，相当于连续调两次toggleClass，分别传入red、green

var flag = false;
$('div').toggleClass('red', flag);  // 如果flag为true，添加red类；否则，删除red类

$('div').toggleClass(function(index, className){  // 参数参照 .addClass
    if(index>1){
        return 'red';  // 这里返回的类会被拿去toggle~~~
    }else{
        return 'green';
    }
});

$('div').toggleClass(function(index, className, flag){  // 跟上面的区别在于多了一个flag，其实就是本例子最后一个参数false
    if(index>1){
        return 'red';
    }else{
        return 'green';
    }
}, false);

源码分析

class操作的源码比较简单，字符串查找、相加、替换神马的，只要了解基本的正则，熟悉jQuery.fn.each就问题不大，这里就略过了~~~有问题的可以在下面丢个回复~~~ :)

写在后面

jQuery官方文档：http://api.jquery.com/category/manipulation/class-attribute/