通过动态改变类名(class),可以让其修改元素呈现出不同的效果。在HTML结构中里,多个class以空格分隔,当一个节点(或称为一个标签)含有多个class时,DOM元素响应的className属性获取的不是class名称的数组,而是一个含有空格的字符串,这就使得多class操作变得很麻烦。同样的jQuery开发者也考虑到这种情况,增加了一个.addClass()方法,用于动态增加class类名

.addClass( className )方法

  1. .addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
  2. .addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名

注意事项:

.addClass()方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上

.removeClass( )方法

  1. .removeClass( [className ] ):每个匹配元素移除的一个或多个用空格隔开的样式名
  2. .removeClass( function(index, class) ) : 一个函数,返回一个或多个将要被移除的样式名

注意事项

  如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数,那么所有的样式类将被移除

.toggleClass( )方法:在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类

  1. .toggleClass( className ):在匹配的元素集合中的每个元素上用来切换的一个或多个(用空格隔开)样式类名
  2. .toggleClass( className, switch ):一个布尔值,用于判断样式是否应该被添加或移除
  3. .toggleClass( [switch ] ):一个用来判断样式类添加还是移除的 布尔值
  4. .toggleClass( function(index, class, switch) [, switch ] ):用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数

注意事项:

  toggleClass是一个互斥的逻辑,也就是通过判断对应的元素上是否存在指定的Class名,如果有就删除,如果没有就增加

  toggleClass会保留原有的Class名后新增,通过空格隔开

jQuery 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()的区别

    .addClass("className")方法是用来给指定元素增加类名,也就是说给指定的元素追加样式: 可以同时添加多个类名,空格符隔开 $("selector&quo ...

  3. html5的classList属性介绍和原生js实现jQuery的addClass,removeClass,hasClass方法

    其实html5已经扩展了class操作的相关API,其中classList属性就以及实现了class的增删和判断. classList属性的方法有: add(value) 添加类名,如果有则不添加 c ...

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. instruction set汇总

    1 aarch64 它armv8-A架构的一种执行状态,之所以说它是一种执行状态是因为,armv8-A还有aarch32这个执行状态.aarch64是64位执行状态,aarch32是32位的执行状态. ...

  2. hexSHA1散列加密解密(不可逆)

    1.maven引入codec和commons依赖: <dependency> <groupId>commons-codec</groupId> <artifa ...

  3. (17)会话之Cookie的使用详解

    Cooke技术 1,特点 Cookie技术:会话数据保存在浏览器客户端. 2,Cookie技术核心 Cookie类:用于存储会话数据  1)构造Cookie对象 Cookie(java.lang.St ...

  4. 三角函数补充(反三角函数与 sec)

    1. sec=1cos Secant (sec) - Trigonometry function secx=HA

  5. Python进程、线程、协程的对比

    1. 执行过程 每个线程有一个程序运行的入口.顺序执行序列和程序的出口.但是线程不能够独立执行,必须依存在进程中,由进程提供多个线程执行控制.每个线程都有他自己的一组CPU寄存器,称为线程的上下文,该 ...

  6. 洛谷 P1071 潜伏者 —— 模拟

    题目:https://www.luogu.org/problemnew/show/P1071 按题意模拟即可. 代码如下: #include<iostream> #include<c ...

  7. ChartCtrl源码剖析之——CChartAxisLabel类

    CChartAxisLabel类用来绘制轴标签,上.下.左.右都可以根据实际需要设置对应的轴标签.它处于该控件的区域,如下图所示: CChartAxisLabel类的头文件. #if !defined ...

  8. Ruby module里的self

    创建: 2018/03/15 更新: 2018/03/22 把标题ruby首字母大写 都知道def self.方法名 来定义类方法 class SampleClass def self.class_m ...

  9. java多线程模拟龟兔赛跑

    让乌龟和兔子在同一个赛道从1开始跑到100,看看谁更快. public class Racer implements Runnable{ private static String winner;// ...

  10. mysql case 列名 when 和 case when的区别

    最近写了一个sql,才发现有些情况不能用case 列名 when ( and then and and 7.9 then '中' else '差' END ) score_type, 我发现这样写查出 ...