Rumah > Artikel > hujung hadapan web > Cara menggunakan jQuery untuk mencapai kesan warna berjalin
Cara menggunakan jQuery untuk mencapai kesan warna berjalin
- WBOYasal
- 2022-06-09 11:00:592675semak imbas
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 ")".
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")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")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>Hasil keluaran:
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!