Bagaimana untuk mencapai perubahan warna berjalin dalam jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk mencapai perubahan warna berjalin dalam jquery

青灯夜游

Lepaskan： 2022-04-22 17:25:07

asal

2005 orang telah melayarinya

Kaedah pelaksanaan: 1. Gunakan "$("Element:nth-of-type(keyword)")" untuk memilih elemen dalam baris genap dan baris ganjil, tetapkan "genap" untuk memilih elemen genap dan "ganjil" "Elemen bernombor ganjil pilihan; 2. Gunakan "css("atribut warna", "nilai warna")" untuk menambah gaya warna berbeza pada baris bernombor genap dan elemen baris bernombor ganjil.

Bagaimana untuk mencapai perubahan warna berjalin dalam jquery

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

jquery menyedari perubahan warna berjalin

Kaedah pelaksanaan:

Gunakan<span style="font-family:Microsoft Yahei, Hiragino Sans GB, Helvetica, Helvetica Neue, å¾®è½¯é›…é»‘, Tahoma, Arial, sans-serif">使用</span>:nth-of-type():nth-of-type() Pemilih memilih baris bernombor genap dan baris bernombor ganjil
Gunakan css() untuk menambah gaya masing-masing pada baris bernombor genap dan baris bernombor ganjil, dan tetapkan berbeza warna

Contoh pelaksanaan:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					
					$("tr:nth-of-type(even)").css("background","red");
					$("tr:nth-of-type(odd)").css("background","pink");
				});
			});
		</script>
	</head>
	<body>
		<table border="1">
			<tr>
				<th>商品</th>
				<th>价格</th>
			</tr>
			<tr>
				<td>T恤</td>
				<td>￥100</td>
			</tr>
			<tr>
				<td>牛仔褂</td>
				<td>￥250</td>
			</tr>
			<tr>
				<td>牛仔库</td>
				<td>￥150</td>
			</tr>
		</table><br>
		<button>隔行变色</button>

	</body>
</html>

Salin selepas log masuk

Bagaimana untuk mencapai perubahan warna berjalin dalam jquery

Penerangan:

:nth -of-type(n) selector selection Semua elemen yang merupakan anak ke-n jenis tertentu daripada induknya.

Apabila digunakan dengan kata kunci genap dan ganjil, anda boleh memilih baris genap dan ganjil

genap memilih setiap elemen anak genap.
ganjil Pilih setiap elemen anak ganjil.

[Pembelajaran yang disyorkan: tutorial video jQuery, video bahagian hadapan web]

Atas ialah kandungan terperinci Bagaimana untuk mencapai perubahan warna berjalin dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!