.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');