.addClass(),.removeClass(),.toggleClass()的区别
.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()的区别的更多相关文章
- jQuery addClass removeClass toggleClass hasClass is(.class)用法
jQuery addClass removeClass toggleClass hasClass is(.class)用法 <%@ page language="java" ...
- addClass, removeClass, toggleClass(从jquery中抠出来)
<div id="d3" class="cur"></div> var mylibs = (function(){ var rtrim ...
- class 添加样式,删,开关 【选择】addClass,removeClass,toggleClass
<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...
- class 添加样式,删除,开关 【选择】addClass,removeClass,toggleClass
<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...
- 原生JS实现addClass,removeClass,toggleClass
jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...
- 原声js实现addClass removeClass toggleClass效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery重新学习之三[属性addClass(),removeClass(),toggleClass()]
1:属性.addClass(class|fn)及.removeClass(class|fn) 1.1 .addClass(class) 参数class一个或多个要添加到元素中的CSS类名,请用空格分开 ...
- jQuery addClass removeClass toggleClass方法概述
通过动态改变类名(class),可以让其修改元素呈现出不同的效果.在HTML结构中里,多个class以空格分隔,当一个节点(或称为一个标签)含有多个class时,DOM元素响应的className属性 ...
- 原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
随机推荐
- es7重点笔记
1,函数绑定运算符,用来取代call,apply,bind调用,写法:并排的双冒号(::),左边是对象,右边是函数 foo :: bar; // 等同于bar.bind(foo); 双冒号返回的还是原 ...
- Java this 关键字的用法
this 关键字的用法 this 在类中就是代表当前对象,可以通过 this 关键字完成当前 对象的成员属性.成员方法和构造方法的调用. 那么何时用 this? 当在定义类中的方法时,如果需要调用该类 ...
- java面向对象的三大特性——封装
封装 封装从字面上来理解就是包装的意思,专业点就是信息隐藏,是指利用抽象数据类型将数据和基于数据的操作封装在一起,使其构成一个不可分割的独立实体,数据被保护在抽象数据类型的内部,尽可能地隐藏内部的细节 ...
- CentOS7.x机器安装Azure CLI2.0
安装Azure CLI 2.0的前提是:机器中必须有 Python 2.7.x 或 Python 3.x.如果机器中没有其中任何一个Python的版本,请及时安装 1.准备一台CentOS 7.3的机 ...
- python_分支循环
什么是分支+循环? --不同条件进行不同逻辑处理 -- 分支 --满足条件进行反复相同逻辑处理 -- 循环 分支的形式? -- if 条件: 执行体 else: 执 ...
- linux ssh登录的小知识
查看服务器的各个端口: # netstat -tulnp 或者 #netstat -tnip 筛选在后面添加 |grep *** 准许root登录 #vi /etc/ssh/sshd_config 找 ...
- 用CSS写气泡
新学到的一个小效果 用CSS实现如下图效果,其中demo结构为:<div id="square"></div> 实现这个效果需要用到两个知识点: 1.用bo ...
- 达尔稳usb转RJ45的接口转换器(usb2.0接口)在ubuntu16.04中驱动(r8152)编译安装与使用
淘宝买了usb转RJ45的接口转换器:https://detail.tmall.com/item.htm?id=524808012954&ali_refid=a3_430582_1006:11 ...
- python-day2数据类型
内容介绍 数据类型 字符编码 文件处理 1.什么是数据? x=10 , 10是我们要存储的数据. 2.为何数据要分不同的类型 数据是用来表示状态的,不同的状态就应该用不同的类型的数据去表示 3.数据类 ...
- Java - 双冒泡法排序
最开始的代码 我采用的是我原来进行快速排序所用的方法,一直做不出来. 为什么我会采用原来快速排序的方法?因为我的记忆中好像就是这样的,因此我根据记忆中的快速排序在进行改变,然而,却无法真正的写出双冒泡 ...