So erzielen Sie mit jQuery einen Interlaced-Farbeffekt-Front-End-Fragen und Antworten-php.cn

So erzielen Sie mit jQuery einen Interlaced-Farbeffekt

WBOY

Freigeben： 2022-06-09 11:00:59

Original

2684 Leute haben es durchsucht

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

So erzielen Sie mit jQuery einen Interlaced-Farbeffekt

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

Ausgabeergebnis:

So erzielen Sie mit jQuery einen Interlaced-Farbeffekt

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!