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

  

 

.addClass(),.removeClass(),.toggleClass()的区别的更多相关文章

  1. jQuery addClass removeClass toggleClass hasClass is(.class)用法

    jQuery addClass removeClass toggleClass hasClass is(.class)用法 <%@ page language="java" ...

  2. addClass, removeClass, toggleClass(从jquery中抠出来)

    <div id="d3" class="cur"></div> var mylibs = (function(){ var rtrim ...

  3. class 添加样式,删,开关 【选择】addClass,removeClass,toggleClass

    <1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...

  4. class 添加样式,删除,开关 【选择】addClass,removeClass,toggleClass

    <1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...

  5. 原生JS实现addClass,removeClass,toggleClass

    jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...

  6. 原声js实现addClass removeClass toggleClass效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Jquery重新学习之三[属性addClass(),removeClass(),toggleClass()]

    1:属性.addClass(class|fn)及.removeClass(class|fn) 1.1 .addClass(class) 参数class一个或多个要添加到元素中的CSS类名,请用空格分开 ...

  8. jQuery addClass removeClass toggleClass方法概述

    通过动态改变类名(class),可以让其修改元素呈现出不同的效果.在HTML结构中里,多个class以空格分隔,当一个节点(或称为一个标签)含有多个class时,DOM元素响应的className属性 ...

  9. 原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. 深入浅出docker

    笔者在海外工作多年,所以文中多用英文单词,有些时候是为了更精准的描述,请见谅.希望这篇随笔能帮大家入门docker.由于在海外连博客园有些慢,所以我图片用的比较少,以后再考虑一下如何更好的解决图片上传 ...

  2. enum 操作

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  3. javascript属性之get/set

    var o = { get x(){ return 7; }, set x(val){ console.info("不能设置x的值"); } } o.x //7 读取x值的时候,会 ...

  4. 什么是bgp线路

    https://www.douban.com/note/319956581/ BGP(边界网关协议)主要用于互联网AS(自治系统)之间的互联,BGP的最主要功能在于控制路由的传播和选择最好的路由.中国 ...

  5. python 程序退出方式

    sys.exit() 执行该语句会直接退出程序,这也是经常使用的方法,也不需要考虑平台等因素的影响,一般是退出Python程序的首选方法. 该方法中包含一个参数status,默认为0,表示正常退出,也 ...

  6. 用Python实现几种排序算法

    #coding=utf-8 # 1 快速排序算法 def qksort(list): if len(list)<=1: return list else: pivot = list[0] les ...

  7. 函数式编程--lambda表达式对比匿名内部类

    从前面的整理中我们看出了,Lambda表达式其实是匿名内部类的一种简化,因此它可以部分取代匿名内部类. 1,Lambda表达式与匿名内部类存在如下相同点: 1),Lambda表达式与匿名内部类一样,都 ...

  8. asp.net core如何自定义端口/修改默认端口

    .net core运行的默认端口是5000,但是很多时候我们需要自定义端口.有两种方式 写在Program的Main方法里面 添加 .UseUrls() var host = new WebHostB ...

  9. 日常API之图灵聊天机器人

    机器人是什么?可以吃吗? 嗯,他可以和你聊天,不能吃哦. 首先需要到www.tuling123.com注册一只KEY,你才能调用机器人API哦 一.布局 (控制台程序可以跳过这一步)本文以WPF为示例 ...

  10. 是否编码输出html字符

    template.config(name, value)方法用于更改引擎的默认配置. 其中字段escape,类型为boolean,默认为true. 首先,我们不修改配置信息输出一段带有html标签的字 ...