jQuery的属性与样式

开发工具与关键技术：VS，jQuery
作者：陈梅
撰写时间：2019年5月16日
所有代码来源与老师教学
这次分享的是jQuery的属性与样式中的三个属性，addClass、removeClass、toggleClass这三个属性。其中addClass为增加样性的属性，可以以动态的形式改变类的名字，可以让其修改元素呈现出不同的效果出来。addClass方法是不会替换一个样式的类名，它只是简单的添加一个样式类名到元素上。addClass()可以有两种形式，一是addClass(className)，这个是为了匹配每个元素，所要添加一个或多个样式名；二是addClass(function(index,currentClass))，这个是函数返回一个或跟多用空格隔开的要增加的样式名。而removeClass是删除样式，与addClass一起使用，在使用removeClass之前它会自动去判断，想要删除的盒子或文字是否已经显示出来的，如果显示出来才能使用removeClass的功能。removeClass的方法中，如果一个类名作为一个参数，只有这样的样式类才能被从匹配到的元素中删除掉，如果没有这样的样式名作为参数，就会出现所有的样式类都会被删除掉。接下来我们来看一下布局和效果吧！


在这里我设计的添加内容的背景是红色，点击添加是红色的盒子就会出来。而RemoveClass是去实现关闭红色盒子的功能。点击删除的按钮时，红色的盒子就会被删除掉，变成什么都没有的空白盒子。


这就是addClass和removeClass的效果，这两个方法就好要结合一起使用，才能显示明显的效果。如果不想那么麻烦使用两个按钮才能实现添加和删除。那就使用toggleClass方法。toggleClass是实现了添加和删除的切换功能，是addClass和removeClass的结合。toggleClass会在做某些效果的时候，有可能会针对同一节点的某一个样式不断地去切换，就是添加和删除的相互切换，jQuery提供了toggleClass这个方法，是通过动态的方法进添加和删除类名，一次执行就是addClass的添加功能，再执行就是removeClass的删除功能。toggleClass是一个相互的逻辑，可以通过判断对应的元素上是否存在指定的类名，如果有就删除，如果没有就增加；最重要的是toggleClass会保留原来就有的类名，通过空格隔开这个类名。toggleClass的使用方法就比较多一点，有四种，分别是toggleClass(className),这个功能是匹配元素中的每一个元素上用来切换的一个或多个样式类，要看这个样式类是否存在或值切换属性;toggleClass(className,switch)，这个是一个布尔值，用于判断样式是否应该被添加或删除;toggleClass([switch])，这个功能是用来判断样式类添加还是删除的布尔值; toggleClass(function(index,class,switch)[,
switch]),这个功能是用来返回匹配到的元素中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。我们最后来看一下toggleClass的效果。


在这里为了区分toggleClass和addClass的功能，我给toggleClass添加时，使用的盒子时蓝色。点击按钮，就会添加一个蓝色盒子出来，再次点击按钮，蓝色盒子就会删除掉。剩下空白的盒子。这样toggleClass的功能就完成。addClass、removeClass和toggleClass的元素就分享完毕。