jQuery Overview

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