.addClass(),.removeClass(),.toggleClass()的区别

.addClass("className")方法是用来给指定元素增加类名，也就是说给指定的元素追加样式；

可以同时添加多个类名，空格符隔开

1

$("selector").addClass("className1 className2");

.removeClass("className")方法是用来给指定的元素移除类名，也就是说给指定元素移除样式；

可以同时移除多个类名，空格符隔开


$("selector").removeClass("className1 className2");

 

$("selector").removeClass();//这种方法将移除选择定元素的所有类名

.toggleClass("className")方法是用来给指定的元素添加或者移除类名（如果类名存在则移除，不存在则增加）

toggleClass()方法和addClass()方法一样，可以同时加多个或同时移除多个类名，不过他们之间需要用空格隔开，如：



$("selector").toggleClass("className1 className2");

//上面表达式等于

$("selector").toggleClass("className1").toggleClass("className2");

无参数时，自动删除、恢复全部className，也可以传递一个布尔值，true为恢复class，false为删除class

三者之间的关系如下：



$("selector").toggleClass("className");

//等同于

if($("selector").hasClass("className")){

　　　　$(this).removeClass("className");

} else {

　　　　$(this).addClass("className");

}

//也等同于

$("selector").hasClass('className') ? $("selector").removeClass('className') : $("selector").addClass('className');