Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

jQuery 属性与样式（五）

在做某些效果的时候，可能会针对同一节点的某一个样式不断的切换，也就是addClass与removeClass的互斥切换，比如隔行换色效果

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

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

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

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

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

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

注：

    toggleClass是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定的Class名，如果有就删除，如果没有就增加

    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>
    <table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
        <tr>
            <td>php中文网</td>
            <td>php.cn</td>
        </tr>
        <tr>
            <td>php中文网</td>
            <td>php.cn</td>
        </tr>
        <tr>
            <td>php中文网</td>
            <td>php.cn</td>
        </tr>
        <tr>
            <td>php中文网</td>
            <td>php.cn</td>
        </tr>
        <tr>
            <td>php中文网</td>
            <td>php.cn</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); //这个操作没有变化，因为样式已经是存在的
    </script>
</body>

</html>


Weiter lernen
||
<!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> <table id="table" width="50%" border="0" cellpadding="3" cellspacing="1"> <tr> <td>php中文网</td> <td>php.cn</td> </tr> <tr> <td>php中文网</td> <td>php.cn</td> </tr> <tr> <td>php中文网</td> <td>php.cn</td> </tr> <tr> <td>php中文网</td> <td>php.cn</td> </tr> <tr> <td>php中文网</td> <td>php.cn</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); //这个操作没有变化，因为样式已经是存在的 </script> </body> </html>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492834 spielt ab