.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. Spring Boot实战:拦截器与过滤器

    一.拦截器与过滤器 在讲Spring boot之前,我们先了解一下过滤器和拦截器.这两者在功能方面很类似,但是在具体技术实现方面,差距还是比较大的.在分析两者的区别之前,我们先理解一下AOP的概念,A ...

  2. python_开发规范

    对于python有哪些开发规范? 1. 每行代码不超过80字符 2. 不要在逗号, 分号, 冒号前加空格, 应该之后加空格 3. 列表, 索引,切片的左括号前不加空格 4. 比较运算前后 加一个空格 ...

  3. elasticsearch java和_head插件对索引文档的增删改查

    利用head插件: 1,创建索引并添加一条数据(yananindex:索引名称,yanantype:索引类型,1:索引id) 2.修改索引数据(索引id1不变,_version是对该索引数据执行了几次 ...

  4. Asp.net core 2.0.1 Razor 的使用学习笔记(三)

    ASP.net core 2.0.0 中 asp.net identity 2.0.0 的基本使用(二)—用户账户及cookie配置 修改用户账户及cookie配置 一.修改密码强度和用户邮箱验证规则 ...

  5. su鉴定故障

    su切换用户鉴定故障 [yolo1@izqfsfqp8ejn9zz ~]$ su root密码:su: 鉴定故障[yolo1@izqfsfqp8ejn9zz ~]$ sudo root 我们信任您已经 ...

  6. php之快速排序

     <?phpfunction shell_sort(array $arr){        $right=$left = array();    $Rights=$Lefts = array() ...

  7. Java NIO 之 Buffer

    Java NIO 之 Buffer Java NIO (Non Blocking IO 或者 New IO)是一种非阻塞IO的实现.NIO通过Channel.Buffer.Selector几个组件的协 ...

  8. API函数详解:API大全总目录(按字母排列)

    API函数详解 http://www.feiesoft.com/api/api.html

  9. java之过滤器Filter

    Java三大器之过滤器(Filter)的工作原理和代码演示   一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术之一,WEB开发人员通过Filter技术,对w ...

  10. 通俗化理解Spring3 IoC的原理和主要组件(spring系列知识二总结)

    ♣什么是IoC? ♣通俗化理解IoC原理 ♣IoC好处 ♣工厂模式 ♣IoC的主要组件 ♣IoC的应用实例 ♣附:实例代码 1.什么是IoC(控制反转)? Spring3框架的核心是实现控制反转(Io ...