Cara menggunakan jQuery untuk mencapai kesan warna berjalin-Soal Jawab bahagian hadapan-php.cn

Cara menggunakan jQuery untuk mencapai kesan warna berjalin

WBOY

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

asal

2671 orang telah melayarinya

Kaedah: 1. Gunakan pemilih ":odd" dan kaedah css() untuk menetapkan warna elemen baris bernombor ganjil Sintaksnya ialah "$(":odd").css(" atribut warna"," Nilai warna ")"; 2. Gunakan pemilih ":even" dengan kaedah css() untuk menetapkan warna elemen baris bernombor genap ialah "$(":even"). css("atribut warna", "nilai warna ")".

Cara menggunakan jQuery untuk mencapai kesan warna berjalin

Persekitaran pengendalian tutorial ini: sistem windows10, versi jquery3.4.1, komputer Dell G3.

Cara menggunakan jQuery untuk mencapai kesan warna berjalin

1. Tetapkan warna elemen baris dengan nombor indeks ganjil

:pemilih ganjil memilih item. dengan indeks ganjil Setiap elemen nombor (contohnya: 1, 3, 5, dsb.).

Nilai indeks bermula dari 0, elemen pertama ialah nombor genap (0), elemen kedua ialah nombor ganjil (1), dan seterusnya.

Penggunaan yang paling biasa: digunakan dengan pemilih lain untuk memilih setiap elemen bernombor ganjil dalam gabungan yang ditentukan.

Sintaksnya ialah:

$(":odd")

Salin selepas log masuk

Kaedah css() menetapkan atau mengembalikan satu atau lebih atribut gaya bagi elemen yang dipilih.

2. Tetapkan warna elemen dalam baris dengan nombor indeks genap

:even Pemilih memilih setiap elemen dengan nombor indeks genap (contohnya: 0, 2 , 4 dll).

Nilai indeks bermula dari 0, elemen pertama ialah nombor genap (0), elemen kedua ialah nombor ganjil (1), dan seterusnya.

Penggunaan yang paling biasa: digunakan dengan pemilih lain untuk memilih setiap elemen bernombor genap dalam kombinasi yang ditentukan

Sintaksnya ialah;

$(":even")

Salin selepas log masuk

Contohnya adalah seperti berikut :

<!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>

Salin selepas log masuk

Hasil keluaran:

Cara menggunakan jQuery untuk mencapai kesan warna berjalin

Cadangan tutorial video: Tutorial video jQuery

Atas ialah kandungan terperinci Cara menggunakan jQuery untuk mencapai kesan warna berjalin. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!