JQuery中的样式切换

最新推荐文章于 2023-10-07 23:55:20 发布

刘小筛

最新推荐文章于 2023-10-07 23:55:20 发布

阅读量4k

点赞数

分类专栏： JQuery Javascript 文章标签： jquery 样式转换

本文链接：https://blog.csdn.net/LHJBK/article/details/51548095

版权

JQuery 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

Javascript

19 篇文章 0 订阅

订阅专栏

在做某些效果的时候，可能会针对同一节点的某一个样式不断的切换，也就是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>

执行结果：

这里写图片描述

刘小筛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQuery中的样式切换

在做某些效果的时候，可能会针对同一节点的某一个样式不断的切换，也就是addClass与removeClass的互斥切换，比如隔行换色效果。jQuery提供一个toggleClass方法用于简化这种互斥的逻辑，通过toggleClass方法动态添加删除Class，一次执行相当于addClass，再次执行相当于removeClass。.toggleClass( )方法：在匹配的元素集合中的每个元素上添
复制链接

扫一扫