Tutoriel jQuery : Implémentation de la fonction de changement de couleur entrelacé sur les pages Web
Dans le développement Web, nous rencontrons souvent le besoin de changement de couleur entrelacé d'éléments tels que des tableaux et des listes pour améliorer la lisibilité et l'esthétique de la page. Il est très simple d'utiliser jQuery pour réaliser la fonction de changement de couleur entrelacée des pages Web. La méthode d'implémentation spécifique sera présentée ci-dessous, avec des exemples de code joints.
Pour utiliser jQuery dans une page Web, vous devez d'abord présenter la bibliothèque jQuery. Il peut être importé via CDN ou téléchargé localement. Ajoutez le code suivant dans la balise
:<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
Ensuite, écrivez le code jQuery pour implémenter la fonction de changement de couleur entrelacée de la page Web. Ajoutez le code suivant dans la balise <script> : </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>$(document).ready(function(){ // 选取需要进行隔行变色的元素，例如表格中的每一行 $("table tr:even").css("background-color", "#f5f5f5"); $("table tr:odd").css("background-color", "#ffffff"); // 或者选取列表中的每个列表项 $("ul li:even").css("background-color", "#f5f5f5"); $("ul li:odd").css("background-color", "#ffffff"); });</pre><div class="contentsignin">Copier après la connexion</div></div><p>Le code ci-dessus utilise le sélecteur de jQuery pour sélectionner les lignes paires et impaires dans le tableau ou la liste, et définit différentes couleurs d'arrière-plan pour elles, obtenant ainsi l'effet de changer les couleurs sur alternées. Lignes. L'idée d'implémentation spécifique est d'utiliser les sélecteurs de pseudo-classe :even et :odd pour sélectionner respectivement les lignes impaires et les lignes paires, et de définir des styles différents pour elles. </p><h3>3. Exemple de code</h3><p>Ce qui suit est un exemple de code complet de page Web, comprenant l'introduction de la bibliothèque jQuery et le code d'implémentation de la fonction de changement de couleur entrelacé : </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行变色示例</title> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <style> table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #dddddd; padding: 8px; text-align: center; } </style> </head> <body> <h2>隔行变色示例</h2> <table> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>小明</td> <td>18</td> </tr> <tr> <td>小红</td> <td>20</td> </tr> <tr> <td>小亮</td> <td>22</td> </tr> <tr> <td>小刚</td> <td>25</td> </tr> </table> <script> $(document).ready(function(){ $("table tr:even").css("background-color", "#f5f5f5"); $("table tr:odd").css("background-color", "#ffffff"); }); </script>
