jQuery的属性与样式之增加样式、删除样式、切换样式

开发工具与关键技术：Visual Studio ASP.NET MVC

作者：刘剑鸿
撰写时间：2019年06月14日 星期五

          jQuery的属性与样式之增加样式、删除样式、切换样式

1 .addClass增加样式

在HTML结构中里，多个class以空格分隔，当一个节点（或称为一个标签）含有多个class时，DOM元素响应的className属性获取的不是class名称的数组，而是一个含有空格的字符串，这就使得多class操作变得很麻烦。

同样的jQuery开发者也考虑到这种情况，增加了一个.addClass()方法，用于动态增加class类名。

addClass操作方法很简单，语法：$("#mydiv").addClass(“backRed”);

但一个或多个要添加到元素中的CSS类名，请用空格分开。如：$(“p”).addClass(“selected1
selected2”);

.addClass(
function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名

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

2 .removeClass()删除样式

概述：从所有匹配的元素中删除全部或者指定的类。同样要执行多个被删除的类，请用空格分开。removeClass操作方法很简单，语法：$(“p”).removeClass(“selected”);

.removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名

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

3 .toggleClass()切换样式

在设计页面时，要想达到某个切换效果，也许会对同一节点的某一个样式不断的切换，也就是addClass与removeClass的切换，.toggleClass()就是综合addClass和removeClass效果达到类似开关的功能。jQuery提供这个toggleClass（）方法用于简化这种互斥的逻辑，通过toggleClass方法动态添加删除Class, 一次执行相当于addClass，再次执行相当于removeClass。

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

同样，.toggleClass()的语法也很简单：

.toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名。

.toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除

.toggleClass( [switch ] )：一个用来判断样式类添加还是移除的布尔值

.toggleClass( function(index, class,
switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数

参数class,switch 描述: 每点击三下加上一次 ‘highlight’ 类。

jQuery 代码:

var count = 0;


$("p").click(function(){

  $(this) .toggleClass
("highlight", count++ % 3 == 0);

 });

在日常的操作里，有了.toggleClass方法使用起来十分方便。

如上图的流程，在空白的文本框里添加一个橙色的背景。然后不要时就点击去掉，达到切换效果。

在没有toggleClass方法的使用下，只能通过两个按钮，在两个按钮分别点击触发addClass和removeClass方法。达到切换效果。操作代码：

 function AddClass()//设置背景颜色为红色

    { 

        $("#mydiv").addClass("backRed");

    }

    function RemoveClass()//移除.backRed

    {

        $("#mydiv").removeClass("backRed");

    }

而是用toggleClass方法，就比较简单易懂。直接使用一个按钮就可以达到切换效果。

接下来是toggleClass按钮触发的方法：

function ToggleClass()//蓝色背景切换

    {

        $("#mydiv").toggleClass("backBlue");

    }