Rumah > Artikel > hujung hadapan web > Ketahui helah pemilih kanak-kanak dalam jQuery
Ketahui helah pemilih kanak-kanak dalam jQuery
- WBOYasal
- 2024-02-28 10:36:041202semak imbas
Ketahui kemahiran pemilih kanak-kanak dalam jQuery
Dalam proses menggunakan jQuery untuk operasi DOM, menguasai pemilih adalah bahagian yang sangat penting. Antaranya, pemilih kanak-kanak ialah pemilih yang biasa digunakan, digunakan untuk memilih elemen anak langsung sesuatu elemen. Menguasai kemahiran pemilih kanak-kanak membolehkan kami mencari dan mengendalikan elemen DOM dengan lebih tepat dan meningkatkan kecekapan pembangunan. Berikut akan menunjukkan kemahiran mempelajari pemilih kanak-kanak dalam jQuery melalui contoh kod tertentu.
Pertama sekali, kami perlu memperkenalkan perpustakaan jQuery untuk memastikan fungsi yang disediakan oleh jQuery boleh digunakan secara normal semasa menulis kod. Tambahkan kod berikut pada dokumen HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Child选择器技巧</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="parent">
<div class="child">子元素1</div>
<div class="child">子元素2</div>
<div class="child">子元素3</div>
<div class="sibling">兄弟元素</div>
</div>
<script>
// 在这里编写jQuery代码
</script>
</body>
</html>Dalam kod di atas, kami mencipta elemen induk dengan id ibu bapa, yang mengandungi elemen anak dengan kelas anak dan adik beradik. Seterusnya, kami akan menulis kod jQuery untuk menunjukkan penggunaan pemilih kanak-kanak.
Penggunaan pertama adalah untuk memilih semua elemen kanak-kanak. Kita boleh menggunakan sintaks induk > untuk memilih semua elemen anak langsung di bawah elemen induk. Sebagai contoh, jika kita ingin memilih semua elemen kanak-kanak dengan anak kelas, kita boleh menulis seperti ini:
$(document).ready(function(){
$('#parent > .child').css('color', 'red');
});Kod di atas akan memilih semua elemen kanak-kanak dengan anak kelas di bawah elemen induk dan menetapkan warna teksnya kepada merah.
Penggunaan kedua ialah memilih elemen anak pada kedudukan yang ditetapkan. Kita boleh menggunakan :nth-child(n) untuk memilih elemen anak pada kedudukan tertentu di bawah elemen induk. Sebagai contoh, jika kita ingin memilih elemen anak kedua, kita boleh menulis seperti ini:
$(document).ready(function(){
$('#parent > .child:nth-child(2)').css('font-weight', 'bold');
});Kod di atas akan memilih elemen anak kedua dengan anak kelas di bawah elemen induk dan menetapkan teksnya kepada tebal.
Untuk meringkaskan, dengan mempelajari kemahiran pemilih kanak-kanak dalam jQuery, kami boleh mengendalikan elemen DOM dengan lebih fleksibel dan mencapai kesan halaman yang lebih halus. Sudah tentu, sebagai tambahan kepada pemilih kanak-kanak, terdapat banyak jenis pemilih lain yang boleh dipelajari dan digunakan. Saya harap contoh dalam artikel ini dapat membantu pembaca lebih memahami dan menguasai penggunaan pemilih jQuery.
Atas ialah kandungan terperinci Ketahui helah pemilih kanak-kanak dalam jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!