Maison > Article > interface Web > Comment utiliser jQuery pour obtenir un effet de couleur entrelacée
Comment utiliser jQuery pour obtenir un effet de couleur entrelacée
- WBOYoriginal
- 2022-06-09 11:00:592667parcourir
Méthode : 1. Utilisez le sélecteur ":odd" et la méthode css() pour définir la couleur des éléments de ligne impairs. La syntaxe est "$(":odd").css("color attribut", "color value") "; 2. Utilisez le sélecteur ":even" et la méthode css() pour définir la couleur des éléments de ligne pairs. La syntaxe est "$(":even").css("color attribut", "valeur de couleur")".
L'environnement d'exploitation de ce tutoriel : système windows10, version jquery3.4.1, ordinateur Dell G3.
Comment utiliser jQuery pour obtenir un effet de changement de couleur entrelacé
1. Définissez la couleur des éléments de ligne avec des numéros d'index impairs
: le sélecteur impair sélectionne chaque élément avec un numéro d'index impair (par exemple : 1, 3, 5). , etc.) .
Les valeurs d'index commencent à 0, le premier élément est un nombre pair (0), le deuxième élément est un nombre impair (1), et ainsi de suite.
L'utilisation la plus courante : utilisé avec d'autres sélecteurs pour sélectionner chaque élément impair dans la combinaison spécifiée.
La syntaxe est la suivante : La méthode
$(":odd")css() définit ou renvoie un ou plusieurs attributs de style de l'élément sélectionné.
2. Définissez la couleur des éléments de ligne avec des numéros d'index pairs
: le sélecteur pair sélectionne chaque élément avec un numéro d'index pair (par exemple : 0, 2, 4, etc.).
Les valeurs d'index commencent à 0, le premier élément est un nombre pair (0), le deuxième élément est un nombre impair (1), et ainsi de suite.
Utilisation la plus courante : utilisé avec d'autres sélecteurs pour sélectionner chaque élément pair dans la combinaison spécifiée
La syntaxe est
$(":even")L'exemple est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("tr:odd").css("background-color","yellow");
$("tr:even").css("background-color","pink");
});
</script>
</head>
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>123131</td>
</tr>
<tr>
<td>李四</td>
<td>456464</td>
</tr>
<tr>
<td>王五</td>
<td>78979879</td>
</tr>
<tr>
<td>赵钱</td>
<td>147741</td>
</tr>
<tr>
<td>周吴</td>
<td>852258</td>
</tr>
</table>
</body>
</html>Résultat de sortie :
Vidéo recommandée tutoriel : Tutoriel vidéo jQuery
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!