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（）方法的效果；

如果你来实验的话，点击上面的按钮你认为会有什么样的效果呢还是代码无效呢。
肯定有效果的啦

addClass、removeClass、toggleClass属性（方法）相关推荐

原生JS实现addClass,removeClass,toggleClass
jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...
js 实现 hasClass(), addClass(), removeClass() 方法
js 实现 hasClass(), addClass(), removeClass() 方法 HTML5-classList classList 方法有 contains('className') / ...
原生js实现addClass,removeClass,hasClass方法
第一部分:原生js实现addClass,removeClass,hasClass方法 function hasClass(elem, cls) {cls = cls || '';if (cls.rep ...
深入学习jquery源码之addClass()和toggleClass()与hasClass()
深入学习jquery源码之addClass()和toggleClass()与hasClass() addClass(class|fn) 概述为每个匹配的元素添加指定的类名. 参数 class Str ...
ES6语法~解构赋值、箭头函数、class类继承及属性方法、map、set、symbol、rest、new.target、 Object.entries......
2015年6月17日 ECMAScript 6发布正式版本前面介绍基本语法, 后面为class用法及属性方法.set.symbol.rest等语法. 一.基本语法: 1. 定义变 ...
ASP.NET基础教程-DataTable类对象-属性方法和事件
DataTable类对象可以表示表格,也可以在DataSet中存储多个DataTable对象. 该对象的属性方法和事件列表如下: 转载于:https://blog.51cto.com/chenxing ...
js如何操作表格（常用属性方法汇总）
js如何操作表格(常用属性方法汇总) 一.总结一句话总结: 二.表格相关的属性和方法 1.1 Table 对象集合 cells[] 返回包含表格中所有单元格的一个数组. 语法:tableObject ...
一个用户实体应该有它自己的实体验证,即一个实体应该有它的属性,方法,扩展属性及验证机制组成...
一个存储验证信息的公用类: /// <summary> /// 验证信息实体类 /// </summary> public class RuleV ...
静态方法、类方法、属性方法
静态方法:通过加@staticmethod实现,只是名义上归类管理,实际上在静态方法里访问不了类或实例中的任何属性. class Person(object):@staticmethoddef per ...
python删除类方法_python中向类中动态添加新特性及删除属性方法
class Foo(object): pass obj = Foo() # 添加对象属性(对象名追加对象属性) obj.a = 100 # print(obj.a) # 添加类属性(类名称追加类属性) ...

addClass、removeClass、toggleClass属性（方法）

addClass、removeClass、toggleClass属性（方法）相关推荐

最新文章

热门文章