Materi
Roadmap
Proyek
Sertifikat
Skillance Code Lab
Jalankan »
Skillance Code Lab Editor
Editor
Hasil
Split
Editor Kode Sumber
Tekan
Ctrl + Enter
untuk Menjalankan
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <style> body { font-family: sans-serif; padding: 20px; background: #f8fafc; } input { width: 100%; padding: 10px 14px; border: 1px solid #cbd5e1; border-radius: 6px; box-sizing: border-box; margin-bottom: 15px; } .ref-item { background: white; padding: 12px 15px; border-radius: 6px; border: 1px solid #e2e8f0; margin-bottom: 8px; display: flex; justify-content: space-between; } code { color: #00758f; font-weight: bold; } </style> </head> <body> <h3>Kamus Cepat Method jQuery</h3> <input type="text" id="filterInput" placeholder="Cari nama method (contoh: fade, click, parent)..."> <div id="daftarRef"> <div class="ref-item"><code>hide() / show()</code> <span>Menyembunyikan / menampilkan elemen</span></div> <div class="ref-item"><code>fadeIn() / fadeOut()</code> <span>Transisi memudarkan opasitas</span></div> <div class="ref-item"><code>slideDown() / slideUp()</code> <span>Efek geser naik atau turun</span></div> <div class="ref-item"><code>click() / on()</code> <span>Menangkap aksi klik pengguna</span></div> <div class="ref-item"><code>parent() / children()</code> <span>Navigasi struktur pohon hierarki DOM</span></div> <div class="ref-item"><code>load() / $.post()</code> <span>Operasi asinkron server AJAX</span></div> </div> <script> $(document).ready(function() { $('#filterInput').on('keyup', function() { const keyword = $(this).val().toLowerCase(); $('#daftarRef .ref-item').filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(keyword) > -1); }); }); }); </script> </body> </html>
Hasil Tampilan (Browser Preview)
Muat Ulang