Jejak pengalaman belajar dan sharing IT saya, semua tertuang disini.

Login Member

Materi Mata Kuliah

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

03 jam 10 menit 00 detik

02 jam 10 menit 00 detik

02 jam 09 menit 00 detik

02 jam 01 menit 00 detik

00 jam 50 menit 00 detik

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 38 menit 00 detik

00 jam 10 menit 00 detik

00 jam 50 menit 00 detik

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

Event & Efek pada jQuery

Pada bagian ini, kita akan mempelajari bagaimana jQuery digunakan untuk:

  • Menangani event (interaksi pengguna)
  • Menambahkan efek dan animasi pada website

Dengan kombinasi event dan efek, website menjadi lebih interaktif, menarik, dan user-friendly.

1. Event pada jQuery

Event digunakan untuk merespon aksi pengguna seperti klik, hover, atau input.

Contoh Event Click

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

Event yang Sering Digunakan

Event Fungsi
click Klik
dblclick Klik 2x
mouseenter Mouse masuk
mouseleave Mouse keluar
keyup Keyboard dilepas
submit Form dikirim

Contoh Event Hover

 
$("#box").mouseenter(function() {
$(this).css("background", "yellow");
});

$("#box").mouseleave(function() {
$(this).css("background", "white");
});
 

2. Efek Dasar jQuery

a. hide() dan show()

 
$("#sembunyi").click(function() {
$("#teks").hide();
});

$("#tampil").click(function() {
$("#teks").show();
});
 

b. toggle()

 
$("#btn").click(function() {
$("#teks").toggle();
});
 

👉 Menampilkan dan menyembunyikan secara bergantian.

3. Efek Fade

a. fadeIn()

 
$("#teks").fadeIn();
 

b. fadeOut()

 
$("#teks").fadeOut();
 

c. fadeToggle()

 
$("#teks").fadeToggle();
 

4. Efek Slide

a. slideUp()

 
$("#teks").slideUp();
 

b. slideDown()

 
$("#teks").slideDown();
 

c. slideToggle()

 
$("#teks").slideToggle();
 

5. Contoh Program Interaktif

 
<!DOCTYPE html>
<html>
<head>
<title>Efek jQuery</title>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button id="btn">Toggle Konten</button>
<p id="teks">Ini adalah konten yang bisa disembunyikan</p>

<script>
$(function() {
$("#btn").click(function() {
$("#teks").slideToggle();
});
});
</script>

</body>
</html>
 

6. Contoh Efek Fade

 
<button id="fadeBtn">Fade</button>
<p id="teks">Teks ini akan menghilang</p>

<script>
$(function() {
$("#fadeBtn").click(function() {
$("#teks").fadeToggle();
});
});
</script>
 

7. Kelebihan Efek jQuery

  • Mudah digunakan
  • Tidak perlu banyak kode
  • Animasi sederhana cepat dibuat
  • Cocok untuk pemula

Kesalahan Umum

  1. Salah penulisan selector
  2. Tidak memuat jQuery (CDN)
  3. Tidak menggunakan $(document).ready()
  4. Menggunakan efek berlebihan (mengganggu UX)

Kesimpulan

Event dan efek pada jQuery memungkinkan developer membuat website yang lebih interaktif dan menarik dengan cara yang sederhana. Dengan memahami event seperti click dan efek seperti hide, fade, dan slide, mahasiswa dapat menambahkan interaksi dan animasi tanpa kode yang kompleks. Materi ini menjadi penutup penting dalam pembelajaran dasar JavaScript dan jQuery sebelum masuk ke pengembangan web yang lebih lanjut.

Report Error