jQuery ialah perpustakaan JavaScript yang sangat popular yang boleh membantu pembangun dengan mudah menulis halaman web yang sangat interaktif dan responsif. Dalam jQuery, memilih elemen adalah operasi yang sangat biasa, dan memilih baris semasa (juga dipanggil penonjolan baris semasa) adalah keperluan penting dalam proses pembangunan. Dalam artikel ini, kami akan meneroka cara memilih dan menggayakan baris semasa menggunakan jQuery.
1. Analisis Keperluan
Dalam pembangunan web, kami biasanya menggunakan jadual untuk memaparkan data. Apabila kami menggerakkan tetikus ke baris (tr) jadual, kami berharap baris itu akan diserlahkan untuk mengingatkan pengguna tentang baris yang dipilih pada masa ini. Oleh itu, kita perlu menulis sekeping kod jQuery untuk mencapai keperluan ini.
2. Pelaksanaan Kod
Dalam proses merealisasikan keperluan ini, kita boleh menggunakan kaedah on() jQuery dan kaedah siblings() untuk memilih baris semasa dan menambah gaya padanya. Langkah-langkah pelaksanaan khusus adalah seperti berikut:
-
Ikat tetikus pada acara untuk setiap baris (tr) jadual dan peristiwa itu dicetuskan apabila tetikus bergerak ke baris tertentu.
$('table tr').on('mouseover', function() { // 鼠标滑过事件处理逻辑 }); -
Dalam logik pemprosesan acara, gunakan kaedah adik-beradik() untuk memilih elemen adik-beradik baris semasa, dan kemudian tambah gaya padanya.
$('table tr').on('mouseover', function() { $(this).siblings().removeClass('currentRow'); // 移除其他行的样式 $(this).addClass('currentRow'); // 为当前行添加样式 }); -
Tentukan kelas .currentRow dalam CSS untuk menetapkan gaya baris semasa.
.currentRow { background-color: #f0f0f0; }
Prinsip pelaksanaan kod ini ialah apabila tetikus meluncur ke atas baris tertentu, mula-mula gunakan kaedah siblings() untuk memilih elemen adik-beradik baris semasa, iaitu, baris lain, dan kemudian gunakan kaedah removeClass( ) untuk mengalih keluar gaya sedia ada baris lain, dan akhirnya gunakan kaedah addClass() untuk menambah gaya sorotan pada baris semasa.
3. Contoh
Berikut ialah contoh mudah untuk menunjukkan cara menggunakan jQuery untuk memilih baris semasa dan menambah gaya padanya.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery选择当前行</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table th, table td {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
}
.currentRow {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
<td>北京市海淀区</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>女</td>
<td>上海市浦东新区</td>
</tr>
<tr>
<td>王五</td>
<td>22</td>
<td>男</td>
<td>广州市天河区</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('table tr').on('mouseover', function() {
$(this).siblings().removeClass('currentRow');
$(this).addClass('currentRow');
});
</script>
</body>
</html>Dalam contoh di atas, kami mengikat acara peralihan tetikus pada setiap baris jadual Apabila tetikus bergerak ke baris tertentu, gunakan kaedah adik beradik() untuk memilih elemen lain baris semasa (iaitu. baris lain ), alih keluar gaya sedia ada dan akhir sekali tambahkan gaya sorotan pada baris semasa.
4. Ringkasan
Memilih baris semasa ialah operasi yang sangat biasa dalam pembangunan web dan boleh dilaksanakan dengan mudah menggunakan jQuery. Dengan menggunakan kaedah on() dan kaedah siblings(), kita boleh memilih baris semasa dan menambah gaya padanya. Pada masa yang sama, apabila menambah gaya pada baris semasa, anda harus memberi perhatian untuk menentukan kelas gaya yang sepadan dalam CSS untuk memastikan kemudahan mengubah suai gaya.
Atas ialah kandungan terperinci Bagaimana untuk memilih baris semasa dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
CSS: Bolehkah saya menggunakan pelbagai ID dalam DOM yang sama?May 14, 2025 am 12:20 AMTidak, youdouldn'tusemultipleidsinthesamedom.1) idsmustbeuniquperhtmlspecification, andingduplicatescancauseonsistentbrowsbehavior.2)
Tujuan HTML5: Mewujudkan Web yang lebih kuat dan boleh diaksesMay 14, 2025 am 12:18 AMHtml5aimstoenhanceWebcapabilities, makeitmoredynamic, interaktif, dan boleh diakses.1) itsupportsmultimeDiaelementsLikeand, menghapuskanTheTheneedforplugins.2) semantikelementsImproveAccessibilityandcodeReadability.3) Ciri -ciri
Matlamat penting HTML5: Meningkatkan Pembangunan Web dan Pengalaman PenggunaMay 14, 2025 am 12:18 AMHtml5aimstoenhancewebdevelopmentanduserexperiencetroughsemanticstructure, multimediaintegration, andperformanceimprovements.1)
HTML5: Adakah ia selamat?May 14, 2025 am 12:15 AMHtml5isnotinherentlyinsecure, butitsfeaturescanleadtosecurityriskssifmisusedorimproperlyimplemented.1) usethesandboxattributeiniframestocontrolembeddedcontentandpreventvulnerabilitieSlIKeClickjacking
Matlamat HTML5 berbanding dengan versi HTML yang lebih lamaMay 14, 2025 am 12:14 AMHtml5aimedtoenhanceWebdevelopmentbyintroducingsemanticelements, nativemultimediasupport, peningkatan prestasi, danflineCapabilities, kontrasingwiththelimitationsofhtml4andxhtml.1) iTintroducedSemanTictagsike,
CSS: Adakah buruk menggunakan pemilih ID?May 13, 2025 am 12:14 AMMenggunakan pemilih ID tidak sememangnya buruk dalam CSS, tetapi harus digunakan dengan berhati -hati. 1) Pemilih ID sesuai untuk elemen unik atau cangkuk JavaScript. 2) Untuk gaya umum, pemilih kelas harus digunakan kerana ia lebih fleksibel dan dapat dipelihara. Dengan mengimbangi penggunaan ID dan kelas, seni bina CSS yang lebih mantap dan cekap dapat dilaksanakan.
HTML5: Matlamat pada tahun 2024May 13, 2025 am 12:13 AMHtml5'sgoalsin2024focusonrefinementandoptimization, notnewfeatures.1) enhanceperformanceandeficiencythroughoptimizedrendering.2) ImproveAccessibilityWithreFinedAttributeseMelements.3)
Apakah kawasan utama di mana HTML5 cuba memperbaiki?May 13, 2025 am 12:12 AMHtml5aimedtoimproveWebdevelopmentinfourkeyareas: 1) Multimediasupport, 2) Semantik, 3) Formcapabilities, dan4) OfflineandStorageOptions.1)
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
ZendStudio 13.5.1 Mac
Persekitaran pembangunan bersepadu PHP yang berkuasa
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
