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

Heim

Web-Frontend

Front-End-Fragen und Antworten

So erzielen Sie mit jQuery einen Interlaced-Farbeffekt

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 09, 2022 am 11:00 AM

jquery

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

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:

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!

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel