Maison > interface Web > Questions et réponses frontales > Comment utiliser jQuery pour obtenir un effet de couleur entrelacée

Comment utiliser jQuery pour obtenir un effet de couleur entrelacée

WBOY
Libérer: 2022-06-09 11:00:59
original
2692 Les gens l'ont consulté

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")".

Comment utiliser jQuery pour obtenir un effet de couleur entrelacée

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")
Copier après la connexion

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")
Copier après la connexion

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>
Copier après la connexion

Résultat de sortie :

Comment utiliser jQuery pour obtenir un effet de couleur entrelacée

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal