Tutoriel Jquery : Implémentation de la fonction de changement de couleur entrelacé des pages Web

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.

1. Présentez la bibliothèque jQuery

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>

2. Écrivez le code jQuery

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> : </script>

$(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");
});

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.

3. Exemple de code

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é :

    
    
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    


    
隔行变色示例
    

        

            
姓名
            
年龄
        
        

            
小明
            
18
        
        

            
小红
            
20
        
        

            
小亮
            
22
        
        

            
小刚
            
25
        
    

    <script>
        $(document).ready(function(){
            $("table tr:even").css("background-color", "#f5f5f5");
            $("table tr:odd").css("background-color", "#ffffff");
        });
    </script>

Grâce à l'exemple de code ci-dessus, vous pouvez implémenter le code entrelacé. fonction de changement de couleur dans vos propres pages Web, améliorant les visuels et l'expérience utilisateur de la page. J'espère que ce tutoriel vous sera utile, merci d'avoir lu !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!