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
  • 2211

jQuery实现单击变换样式

jQuer实现点击变换样式 *{margin: 0;padding: 0;} ul{width: 700px;margin:200px auto;} ul li{display:inline...

JQuery 样式设置、追加、移除与切换

获取与设置样式 获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class,JQuery代码如下: var p_class = $("p")....

jQuery 之 两个div之间切换

1.HTML代码: 预登记编码入场 短信验证码入场...
  • DXB601
  • DXB601
  • 2017年06月21日 18:06
  • 822

jquery的样式修改

附:所有参数列表 intervalTime:5, //设置间隔时间为5秒 【单位:秒】 [默认为5秒] moveSpeedTime:400 //切换一张图片所需时间,【单位:毫秒】[...

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

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

jQuery设置文字样式

p     {         background-color:#eee; font-size:30px;         }         .classadd         {  ...

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

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

界面切换之元素共享

在开发过程中,免不了需要对activity或Fragment的切换动画进行设置,系统自带的切换效果经常不能满足需求,在google推出的Material Design中也定义了一些界面切换的效果...

DIV和SPAN之间的切换

如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。也就是说,可以用...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery中的样式切换
举报原因:
原因补充:

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