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

Posted 2020-09-02

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

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

$("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‘);