jQuery 源码分析 Class 操作

Question

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

$('#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：是否有某个类

直接上例子；下面例子中需要注意的是：只要集合中的任意一个元素（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 就问题不大，这里就略过了。