JQuery中的样式切换

原创 2016年05月31日 18:31:20
在做某些效果的时候,可能会针对同一节点的某一个样式不断的切换,也就是addClass与removeClass的互斥切换,比如隔行换色效果。

jQuery提供一个toggleClass方法用于简化这种互斥的逻辑,通过toggleClass方法动态添加删除Class,一次执行相当于addClass,再次执行相当于removeClass。

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

toggleClass方法简介:

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

注意:
1.toggleClass是一个互斥的逻辑,也就是通过判断对应的元素上是否存在指定的Class名,如果有就删除,如果没有就增加
2.toggleClass会保留原有的Class名后新增,通过空格隔开

实战操练:

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>隔行换色</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style type="text/css">
    body,
    table,
    td,
    {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    }

    .h {
        background: #f3f3f3;
        color: #000;
    }

    .c {
        background: #ebebeb;
        color: #000;
    }
    </style>
</head>

<body>
    <h4>.toggleClass(className)和.toggleClass(className,switch)</h4>
    <table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
        <tr>
            <td>慕课jQuery入门</td>
            <td>慕课jQuery入门</td>
        </tr>
        <tr>
            <td>慕课jQuery入门</td>
            <td>慕课jQuery入门</td>
        </tr>
        <tr>
            <td>慕课jQuery入门</td>
            <td>慕课jQuery入门</td>
        </tr>
        <tr>
            <td>慕课jQuery入门</td>
            <td>慕课jQuery入门</td>
        </tr>
        <tr>
            <td>慕课jQuery入门</td>
            <td>慕课jQuery入门</td>
        </tr>
    </table>
    </div>
    <script type="text/javascript">
    //给所有的tr元素加一个class="c"的样式
    $("#table tr").toggleClass("c");
    </script>
    <script type="text/javascript">
    //给所有的偶数tr元素切换class="c"的样式
    //所有基数的样式保留,偶数的被删除
    $("#table tr:odd").toggleClass("c");
    </script>
    <script type="text/javascript">
    //第二个参数判断样式类是否应该被添加或删除
    //true,那么这个样式类将被添加;
    //false,那么这个样式类将被移除
    //所有的奇数tr元素,应该都保留class="c"样式
    $("#table tr:even").toggleClass("c", true); //这个操作没有变化,因为样式已经是存在的

</body>

</html>

执行结果:

这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jquery 点击按钮切换样式on方法使用

$('.teaching .tab a').on('click',function(){ $(this).siblings().removeClass('cur') $(this).addCl...
  • shaka0
  • shaka0
  • 2014-05-19 17:06
  • 2076

使用JQ来回切换样式的三种方法

方法一:使用JQ添加和删除相应样式 html> html lang="en"> head> meta charset="UTF-8"> style> div{ ...

jQuery动态设置样式(style、css)

一、jQuery设置css样式 测试jQuery动态获取padding-left 1、用css()方法返回元素的一个或多个样式属性 $("div").css("padding-left")); ...

Jquery实现内容切换选项卡

/** * TAB选项卡 */ function ToggleTab(n){ var tag = $(n.tag); var tab = $(n.tab); var e = n.e || '...

jQuery改变label/input的值,改变class,改变img的src

jQuery改变label/input的值,改变class,改变img的src jQuery改变label的值:$('#aID').text("New Value");jQuery改变input...

jquery 点击函数切换 toggle()

toggle(fn,fn) 每次点击时切换要调用的函数。 如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番...

-jQuery图片九宫格样式鼠标悬停图片滑动切换效果

最近写的jquery实例--jQuery图片九宫格样式鼠标悬停图片滑动切换效果          有兴趣的同学可以参考一下,这幅效果,个人觉得挺不错的 [html] vie...

JQuery在两个或者多个不同样式Calss之间切换

在项目中,根据元素个数,进行两个或多个切换样式。在多个样式表之间切换需要将原来的样式全部清除,否则样式会叠加。 css.red{ color: red; } .blue{ color...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)