addClass、removeClass、toggleClass属性(方法)

大家来想一想jQuery的addClass、removeClass、toggleClass操作HTMLDOM的属性(方法)

小时可以不懂事,大时需懂事。小时不懂事有父母,大时不懂事您还有谁…
学习完新的课程有必要回头复习一下以前的课程知识基础,巩固个人的程序IT基础知识,有助于提高
个人学习能力,和以后的编程效率。
学习过前端的程序员都知道jQuery是什么,也许都也经历了由迷茫到掌握的过程++++
在刚开始学习jQuer的时候,我很迷茫,不知到底在学的是什么知识。老师说过一遍就得靠自己,因此就得自己去复习喽
重温jQuery
什么是 jQuery ?
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
jQuery库主要包含以下功能:
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
这次我在复习jQuery属性与样式中的addClass、removeClass、toggleClass三个方法
Class有很多种意思,在Html是类的意思 ,如果通过动态改变类名(class),可以让其修改元素呈现出不同的效果。但是在HTML结构中里,多个class以空格分隔,当一个节点(或称为一个标签)含有多个class时,DOM元素响应的className属性获取的不是class名称的数组,而是一个含有空格的字符串,这就使得多class操作变得很麻烦。
在这里插入图片描述
在jQuery中就增加了一个.addClass()方法,用于动态增加class类名
一、addClass()方法,增加样式、用于动态增加class类名
1、.addClass(className) :为每一个匹配的元素增加一个或多个样式名
2、.addClass(function(index,currentClass)) :以函数形式返回一个或多个将要增加的样式名
在这里插入图片描述
请您注意:addClass()方法不是替换元素上面的样式名,只是简单的添加一个样式类名到元素上。

二、removeClass()方法、删除样式、,用于动态删除class类名
1、.removeClass([className]) : 为每一个匹配的元素移除一个或多个样式名
2、.removeClass(function(index , currentClass)): 以函数形式返回一个或多个将要移除的样式名
在这里插入图片描述
请您注意:如果当一个样式类名作为一个参数时,这样式类会被从匹配的元素集合中删除 。
如果当没有样式名作为参数时,那么所有的样式类将被移除。

三、toggleClass()方法、切换样式、包含addClass()方法、removeClass()方法的效果;
例如:在做某些效果的时候,可能会针对同一节点的某一个样式要不断的切换,也就是addClass与removeClass的互斥切换,比如隔行换色效果
toggleClass方法就简化了这种互斥的逻辑,通过toggleClass方法动态添加和删除Class,
一次执行相当于addClass,再次执行相当于removeClass

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

2、toggleClass( className ):在为匹配的元素集合中的每个元素上用来切换的一个或多个样式类名
3、toggleClass( className, switch ):布尔值,用于判断样式是否应该被添加或移除
4、toggleClass( [switch ] ):用来判断样式类添加还是移除的 布尔值
5、toggleClass( function(index, class, switch) [, switch ] ):以函数返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数
在这里插入图片描述
请您注意:
1、toggleClass是一个互斥的逻辑,也就是通过判断对应的元素上是否存在指定的Class名,如果有就删除,如果没有就增加
2、toggleClass会保留原有的Class名后新增

定义类:用于添加、移除、切换
在这里插入图片描述
请您注意: ddClass、removeClass、toggleClass三个方法添加、移除、切换类时,必须是存在
这个类才能使用。如果用于添加、移除、切换的类是没定义的,是无法使用的,所用的的类必须存在

原始页面,点击botton按钮时,按钮的边框会亮起
在这里插入图片描述
toggleClass()方法、切换样式、包含addClass()方法、removeClass()方法的效果;
在这里插入图片描述
如果你来实验的话,点击上面的按钮你认为会有什么样的效果呢还是代码无效呢。
肯定有效果的啦

  • 7
    点赞
  • 44
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值