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/

posted @ 2013-06-26 01:01  程序猿小卡  阅读(2475)  评论(0编辑  收藏  举报