.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. CSS深入理解学习笔记之vertical-align

    1.vertical-align基本认识 支持的属性值: ①线类:baseline(默认),top,middle,bottom ②文本类:text-top,text-bottom ③上标下标类:sub ...

  2. SSM与jsp传递实体类

    jsp传controller Controller: @RequestMapping({"/user"}) public void registerUser(User uu) th ...

  3. 在Intellij IDEA 中clean报错:-Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HOME environment variable and mvn script match.

    解决办法:添加VM属性   -Dmaven.multiModuleProjectDirectory=$M2_HOME

  4. JDBC (五)

    1 使用dbutils进行一对多.多对多的开发 1.1 准备 mysql驱动的pom.xml <!-- https://mvnrepository.com/artifact/mysql/mysq ...

  5. 字段的参数 -- Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...

  6. Codeforce B. Polycarp and Letters

    B. Polycarp and Letters time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  7. Python之算法

    一.什么算法 算法:一个计算过程,解决问题的方法 二.时间复杂度 看代码:                                                               ...

  8. JavaScript转unix时间戳

    由于 unix 的时间戳是10位不带毫秒的,所以前端获取到时间戳之后需要做一下处理,才能获取正确的时间. // 假设这里是从服务端获取到的时间戳 var unixTime = data.time; / ...

  9. .Neter玩转Linux系列之四:Linux下shell介绍以及TCP、IP基础

    基础篇 .Neter玩转Linux系列之一:初识Linux .Neter玩转Linux系列之二:Linux下的文件目录及文件目录的权限 .Neter玩转Linux系列之三:Linux下的分区讲解 .N ...

  10. Hadoop学习笔记三

    一.设置HDFS不进行权限检查 默认的HDFS上的文件类似于Linux中的文件,是有权限的.例如test用户创建的文件,root用户如果没有写权限,则不能进行删除. 有2种办法进行修改,修改文件的权限 ...