Heim > Artikel > Web-Frontend > So erzielen Sie mit jQuery einen Interlaced-Farbeffekt
So erzielen Sie mit jQuery einen Interlaced-Farbeffekt
- WBOYOriginal
- 2022-06-09 11:00:592581Durchsuche
Methode: 1. Verwenden Sie den Selektor „:odd“ und die Methode css(), um die Farbe der ungeraden Zeilenelemente festzulegen. Die Syntax lautet „$(“:odd“).css(“color attribute“, "color value") "; 2. Verwenden Sie den Selektor „:even" und die Methode css(), um die Farbe der geraden Zeilenelemente festzulegen. Die Syntax lautet „$(":even").css("color Attribut", "Farbwert")".
Die Betriebsumgebung dieses Tutorials: Windows10-System, JQuery3.4.1-Version, Dell G3-Computer.
So verwenden Sie jQuery, um einen Interlaced-Farbwechseleffekt zu erzielen
1. Legen Sie die Farbe von Zeilenelementen mit ungeraden Indexnummern fest
: Der ungerade Selektor wählt jedes Element mit einer ungeraden Indexnummer aus (zum Beispiel: 1, 3, 5). , usw.) .
Indexwerte beginnen bei 0, das erste Element ist eine gerade Zahl (0), das zweite Element ist eine ungerade Zahl (1) und so weiter.
Die häufigste Verwendung: Wird mit anderen Selektoren verwendet, um jedes ungerade Element in der angegebenen Kombination auszuwählen.
Die Syntax lautet:
$(":odd")css()-Methode legt ein oder mehrere Stilattribute des ausgewählten Elements fest oder gibt sie zurück.
2. Legen Sie die Farbe von Zeilenelementen mit geraden Indexnummern fest
: Der gerade Selektor wählt jedes Element mit einer geraden Indexnummer aus (zum Beispiel: 0, 2, 4 usw.).
Indexwerte beginnen bei 0, das erste Element ist eine gerade Zahl (0), das zweite Element ist eine ungerade Zahl (1) und so weiter.
Die häufigste Verwendung: wird mit anderen Selektoren verwendet, um jedes gerade nummerierte Element in der angegebenen Kombination auszuwählen.
Die Syntax lautet:
$(":even")Das Beispiel lautet wie folgt:
<!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>Ausgabeergebnis:
Empfohlenes Video Tutorial: jQuery-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit jQuery einen Interlaced-Farbeffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!