jQuery学习笔记—— .addClass()/.removeClass()/.toggleClass()
作者：大漠 日期：2011-08-24 点击：5097
在平时的页面交互制作中，我们常常要使用jQuery或javaScript来动态改变页面中某个或部分元素的样式，为了实现这样的功能，我们往往都是使用jQuery或javaScript来控制HTML中DOM的类名（class）从而实现增加或删除某一样式，今天我们所要看得是如何使用jQuery来实现这个功能。在jQuery中提供了三种方法来实现这样的效果：.addClass()方法，.removeClass()方法，.toggleClass()方法。下面我们主要看他们是如何实现这样的功能以及他们之间的区别。
一、addClass()——添加className
jQuery中的.addClass()方法主要是用来给选定的Dom元素添加一个或多个指定的类名，他有两种方法实现：
$("selector").addClass("className");
也可以同时给元素添加多个类名，同时添加多个类名时，他们之间需要用空格隔开：
$("selector").addClass("className1 className2");
上面说是第一种方法给指定的元素添加类名，我们还可以使用函数的方法来给指定的元素添加类名：
$("selector").addClass(function(index,class){});
这种方法城要注意一点，此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。更详细的使用可以点击这里。
我们来看一个简单的例子：
HTML Code:
<p id="myElement">test</p>
jQuery Code:
$(document).ready(function(){
$("#myElement").click(function(){
$(this).addClass("myClassName");
});
});
上在代码表示的是：当在p#myElement上单击后，会给这个段落p元素加上一个"myClassName"的类名。
二、removeClass——移除className
jQuery中的.removeClass()方法和前面的.addClass()方法刚好是相反的，.removeClass()主要是用来给选定的DOM元素移除一个或多个指定的类名。他同样有两种方法：
$("selector").removeClass("className");
也可以同时移除多个指定的类名：
$("selector").removeClass("className1 className2");
这里有一点需要特别注意：如果.removeClass()中没有带任何参数，表示的是把指定元素中的所有类名移除。
$("selector").removeClass();//这种方法将移除选择定元素的所有类名
.removeClass()方法像.addClass()方法一样，可以使用函数的形式：
$("selector").removeClass(function(index,class){});//此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。
有关于removeClass()更详细的介绍可以点击这里，下在我们一起来看一个简单的实例：
HTML Code:
<p id="myElement" class="myClassName">test</p>
jQuery Code:
$(document).ready(function(){
$("#myElement").click(function(){
$(this).removeClass("myClassName");
});
});
上面代码表示是：单击段落p#myElement元素后，其类名myClassName将会被移除。
三、toggleClass——添加或者移除className
前面的addClass()和removeClass()分别只能添加和者移除className，但是这个toggleClass()方法却不同，如果元素有这个类名，它将补移除；反之，如果元素没有这个类名，那么将加上这个类名。我们来看看其实现的几种方法：
$("selector").toggleClass("className")
上面表示的是：如果元素selector存在类名className时，将删除禾className;反之如果元素selector不存在className类名，将增加className类名。看个实例：
$("#foo li").click(function() {
$(this).toggleClass("active");
});
点击ul#foo中的li元素后，如果被点击的li元素中包含了"active"则删除“active”，反之没有将增加"active"。接下来看第二种实现方法
$("selector").toggleClass(class, switch);//其中class为要切换的类名，switch是boolean值，用来决定是否切换class.
上在所表示的意思是：当switch为真时就给选定的元素增加class类名，如果switch为假时就移除选定的元素的类名。我们一起来看jQuery API的一个实例，在p元素上点击三次加上一个高亮的背景：
HTML Code:
<div class="demo2"> <p class="blue">Click to toggle (<span>clicks: 0</span>)</p> <p class="blue highlight">highlight (<span>clicks: 0</span>)</p> <p class="blue">on these (<span>clicks: 0</span>)</p> <p class="blue">paragraphs (<span>clicks: 0</span>)</p> </div>
CSS Code:
.blue {color: blue;}
.highlight {
background-color: orange;
}
jQuery Code:
var count = 0;
$(".demo2 p").each(function(){
var $thisParagraph = $(this);
var count = 0;
$thisParagraph.click(function(){
count++;
$thisParagraph.find("span").text("clicks:" + count);
$thisParagraph.toggleClass("highlight", count%3 == 0);
});
});
上在代码表示的是在段落p元素上点击三次就会加上“highlight”样式，换句话说是点击的次数是3的掊九时，段落会加上"highlight"高亮背景。我们这里是通过表达式“count%/3==0”来进行判断元素是否需要切换"highlight"样式。
toggleClass除了上面两种方法之外，还有一种就是通过function来实现
$("selector").toggleClass(function(index, class), [switch])
//其中function(index,class)是一个function:返回class名的一个函数，接受两个参数，index为元素在集合中的索引位置，class为原先元素的class值。
// 而switch是一个boolean值，用于决定元素是否包含class的布尔值。
如果开关switch参数为true则加上对应的class，否则就删除。如：
HTML Code
<div id="testToggleClass"> <p>test</p> </div>
CSS Code
.happy {background-color:green;}
.sad {background-color: #000;color: #fff;}
jQuery Code:
$("#testToggleClass p").toggleClass(function(){
if($(this).parent().hasClass("blue")){
return "happy";
} else {
return "sad";
}
});
toggleClass()方法和addClass()方法一样，可以同时加多个或同时移除多个类名，不过他们之间需要用空格隔开，如：
$("selector").toggleClass("className1 className2");
//上面表达式等于
$("selector").toggleClass("className1").toggleClass("className2");
无参数时，自动删除、恢复全部class，也可以传递一个布尔值，true为恢复class，false为删除class 也可以第一个参数为class名，第二个参数为布尔值，具体用法如下:
HTML Code:
<div class=”a b c”>test toggleClass("a b c")</div>
CSS Code:
.a{background-color: blue;}
.b{background-color:green;}
.c{background-color:orange;}
jQuery Code:
$("div").toggleClass(); //点击第一次时： <div class=””>test toggleClass("a b c")</div>
$("div").toggleClass(); //点击第二次时：<div class=”a b c”>test toggleClass("a b c")</div>
$("div").toggleClass( false ); //点击第一次时：<div class=””>test toggleClass("a b c")</div>后面点击也是一样的
$("div").toggleClass( true ); //点击第一次时<div class=”a b c”>test toggleClass("a b c")</div>
// 删除、恢复多个 class
$("div").toggleClass( “a b” ); //点击第一次时<div class=”c”>test toggleClass("a b c")</div>
$("div").toggleClass( “a c” ); //点击第一次时：<div class=”b”>test toggleClass("a b c")</div>
$("div").toggleClass( “a b c”, false ); //点击第一次时： <div class=””>test toggleClass("a b c")</div>
$("div").toggleClass( “a b c”, true ); //点击第一次时：<div class=”a b c”>test toggleClass("a b c")</div>
其实toggleClass()方法就类似于这样的，如：
$("selector").toggleClass("className");
等同于
if($("selector").hasClass("className")){
$(this).removeClass("className");
} else {
$(this).addClass("className");
}
也等同于
$("selector").hasClass('className') ? $("selector").removeClass('className') : $("selector").addClass('className');
有关于toggleClass()方法更多的介绍大家可以点这里,或者查看这里的demo
上在简单的介绍了这几种方法的使用，最后总结一下：jQuery中有三种方法能元素的类进行操作，这三种方法分别是：.addClass(),.removeClass(),.toggleClass()。这三种方法共同点都是能对元素的类进行操作，那么他们不同之处是：
- .addClass("className")方法是用来给指定元素增加类名，也就是说给指定的元素追加样式；
- .removeClass("className")方法是用来给指定的元素移除类名，也就是说给指定元素移除样式；
- .toggleClass("className")方法是用来给脂定的元素增加或移除类名（如果元素的类名存在就移除，如果不存在就增加），也就是说用来给指定的元素进行样式切换（如果元素存在样式则去掉，如果不存在则加上样式）。
在jQuery中还有几种对样式的操作，比如说：获取样式attr("class")和设置样式attr("class","myclass");另外可以通过.hasClass("className")和.is("className")判断指定的元素是否存在样式。大这相了解更详细的话可以点击：attr和前在介绍的《JQuery学习笔记—— .Is() VS .HasClass()》。
那么有关于addClass,removeClass,toggleClass的介绍就说到这里了，刚学习jQuery，如果有不对之处，烦请大家指点。谢谢。
如需转载烦请注明出处：W3CPLUS
