Attributs et styles jQuery (5)

Lors de l'exécution de certains effets, un certain style du même nœud peut être commuté en permanence, c'est-à-dire la commutation mutuellement exclusive entre addClass et removeClass, comme l'effet de changement de couleur entrelacé

jQuery fournit une méthode toggleClass Utilisé pour simplifier cette logique mutuellement exclusive, ajoutez et supprimez dynamiquement une classe via la méthode toggleClass. Une exécution est équivalente à addClass et une autre exécution est équivalente à la méthode removeClass

toggleClass() : chaque élément de l'ensemble d'éléments correspondant. Ajoutez ou supprimez une ou plusieurs classes de style, selon que la classe de style existe ou selon la valeur de l'attribut toggle. C'est-à-dire : si elle existe (n'existe pas), supprimez (ajoutez) une classe

toggleClass( className ) : une ou plusieurs (séparées par des espaces) utilisées pour basculer sur chaque élément de l'ensemble d'éléments correspondant) Style nom de classe

toggleClass( className, switch ) : Une valeur booléenne utilisée pour déterminer si le style doit être ajouté ou supprimé

toggleClass( [switch ] ) : Une valeur booléenne utilisée pour déterminer si le style le style doit être ajouté ou supprimé Valeur booléenne indiquant si la classe est ajoutée ou supprimée

toggleClass( function(index, class, switch) [, switch ] ) : utilisée pour renvoyer la classe de style utilisée pour basculer sur chaque élément dans l'élément correspondant, définissez le nom d'une fonction. Reçoit la position d'index de l'élément et l'ancienne classe de style de l'élément en tant que paramètres

Remarque :

toggleClass est une logique mutuellement exclusive, c'est-à-dire en jugeant si le nom de classe spécifié existe sur l'élément correspondant, S'il y en a, supprimez-le, sinon ajoutez-le

toggleClass conservera le nom de classe d'origine et l'ajoutera, séparé par des espaces

Écrivons un exemple ci-dessous

<!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>

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

Attributs et styles jQuery (5)

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]