Bab 3: Tutorial Struktur Dasar jQuery Paling Mudah Dipahami

Bab 3: Tutorial Struktur Dasar jQuery Paling Mudah Dipahami

Setelah mempelajari cara menggunakan jQuery (CDN & lokal), langkah penting berikutnya adalah memahami struktur dasar jQuery. Struktur ini menjadi fondasi utama sebelum kita mulai menggunakan selector, event, dan efek jQuery lainnya.

Dengan memahami struktur dasar jQuery, Anda akan lebih mudah membaca, menulis, dan mengembangkan kode jQuery dengan benar.

Struktur Dasar jQuery

Secara umum, struktur dasar jQuery ditulis sebagai berikut:

$(selector).aksi();

Struktur ini terdiri dari tiga bagian utama:

  1. $ (jQuery)
  2. selector
  3. aksi (method / fungsi)

1. Simbol $ pada jQuery

Simbol $ adalah singkatan dari jQuery. Simbol ini digunakan untuk mengakses semua fungsi jQuery.

Contoh:

$("p")

Artinya: memilih semua elemen <p> di halaman HTML.

Catatan: Anda juga bisa menulis jQuery() вместо $(), namun $ lebih umum digunakan.

2. Selector pada jQuery

Selector digunakan untuk memilih elemen HTML yang akan dimanipulasi.

Contoh Selector Dasar:

SelectorKeterangan
"p"Memilih semua <p>
"#id"Memilih elemen dengan id
".class"Memilih elemen dengan class
"div p"Memilih <p> di dalam <div>

Contoh penggunaan:

$("#judul")
$(".kotak")
$("p")

3. Aksi (Method) pada jQuery

Setelah elemen dipilih, kita dapat melakukan aksi menggunakan method jQuery.

Contoh Method jQuery:

.hide()
.show()
.css()
.click()
.text()
.html()

Contoh lengkap:

$("#judul").hide();

Artinya: menyembunyikan elemen dengan id judul.

Contoh Struktur Dasar jQuery Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Struktur Dasar jQuery</title>
</head>
<body>

<h1 id="judul">Belajar Struktur Dasar jQuery</h1>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $("#judul").css("color", "green");
</script>

</body>
</html>

Menggunakan $(document).ready()

Agar jQuery dijalankan setelah seluruh halaman selesai dimuat, gunakan fungsi:

$(document).ready(function(){
  // kode jQuery ditulis di sini
});

Contoh:

$(document).ready(function(){
  $("p").hide();
});

Versi Singkat (Shorthand)

$(function(){
  $("p").hide();
});

Kedua cara di atas memiliki fungsi yang sama.

Struktur jQuery dengan Event

Struktur jQuery sering digunakan bersama event seperti klik.

$(document).ready(function(){
  $("#btn").click(function(){
    alert("Tombol diklik!");
  });
});

Struktur ini sangat umum digunakan dalam pembuatan website interaktif.

Kesalahan Umum dalam Struktur jQuery

Beberapa kesalahan yang sering dilakukan pemula:

  • ❌ Lupa menambahkan file jQuery
  • ❌ Salah penulisan selector (# atau .)
  • ❌ Menulis kode di luar document.ready()
  • ❌ Lupa tanda ;

Kesimpulan

Pada Bab 3: Struktur Dasar jQuery, kita telah mempelajari bentuk dasar penulisan jQuery, mulai dari simbol $, selector, hingga method. Struktur ini adalah dasar utama sebelum mempelajari selector lanjutan, event handling, dan animasi jQuery.

Pada bab berikutnya, kita akan membahas Selector jQuery secara lebih detail dan mendalam.

Related Posts