Scribd
Unggah
38 tayangan2 halaman

Modifikasi DOM Dengan Jquery

Dokumen ini memberikan penjelasan tentang cara memodifikasi DOM menggunakan jQuery dengan berbagai metode seperti menambahkan, menghapus, dan mengubah elemen, atribut, class, teks, event handling, dan CSS. Juga memberikan contoh soal dan kode jQuery untuk menyembunyikan elemen, menangani klik tombol, mendapatkan pilihan dropdown, menambahkan class saat mouseover, dan menampilkan hasil pencarian.

Diunggah oleh

Muhammad Rijal
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
38 tayangan2 halaman

Modifikasi DOM Dengan Jquery

Dokumen ini memberikan penjelasan tentang cara memodifikasi DOM menggunakan jQuery dengan berbagai metode seperti menambahkan, menghapus, dan mengubah elemen, atribut, class, teks, event handling, dan CSS. Juga memberikan contoh soal dan kode jQuery untuk menyembunyikan elemen, menangani klik tombol, mendapatkan pilihan dropdown, menambahkan class saat mouseover, dan menampilkan hasil pencarian.

Diunggah oleh

Muhammad Rijal
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 2

Web Lanjutan dan Library | Hoshizora

Modifikasi DOM dengan jQuery

Ingat “$(‘class atau id yang akan ditunjuk’).fungsinya(‘nilai dari parameter fungsi’)

Untuk memodifikasi DOM (Document Object Model) dengan jQuery, Anda dapat menggunakan berbagai
metode dan fungsi yang disediakan oleh jQuery. Berikut adalah beberapa contoh cara umum untuk
memodifikasi DOM menggunakan jQuery:

1. Menambahkan elemen baru:

// Menambahkan elemen baru dengan tag <div> ke dalam elemen dengan id "container"

$('#container').append('<div>New element</div>');

2. Menghapus elemen:
// Menghapus elemen dengan id "myElement"
$('#myElement').remove();
3. Mengubah atribut elemen:
// Mengubah nilai atribut "src" dari elemen gambar dengan id "myImage"
$('#myImage').attr('src', 'newimage.jpg');
4. Menambahkan class atau menghapus class pada elemen:
// Menambahkan class "highlight" pada elemen dengan id "myElement"
$('#myElement').addClass('highlight');

// Menghapus class "highlight" dari elemen dengan id "myElement"


$('#myElement').removeClass('highlight');
5. Mengubah isi teks elemen:
// Mengubah teks pada elemen dengan id "myElement"
$('#myElement').text('New text');
6. Menangani event:
// Menambahkan event click pada elemen dengan id "myButton"
$('#myButton').click(function() {
// Kode yang akan dijalankan saat elemen diklik
});
7. Mengubah CSS elemen:
// Mengubah warna latar belakang elemen dengan id "myElement" menjadi merah
$('#myElement').css('background-color', 'red');
8. Menampilkan atau menyembunyikan elemen:
// Menyembunyikan elemen dengan id "myElement"
$('#myElement').hide();

// Menampilkan kembali elemen dengan id "myElement"


$('#myElement').show();
Web Lanjutan dan Library | Hoshizora

SOAL

1. Tulis kode jQuery untuk menyembunyikan semua elemen dengan class "info" saat halaman
dimuat.

2. Buat fungsi jQuery yang akan dipicu saat tombol dengan id "btn-click" diklik. Fungsi ini harus
mengubah teks tombol menjadi "Clicked!".

3. Buat sebuah dropdown dengan id "color-dropdown" yang berisi pilihan warna (misalnya merah,
hijau, biru). Tulis kode jQuery untuk mendapatkan nilai warna yang dipilih saat dropdown
berubah.

4. Tulis fungsi jQuery untuk menambahkan class "highlight" ke semua elemen dengan class "item"
saat mouse masuk ke elemen tersebut.

5. Buat elemen input dengan id "search-input" dan tombol dengan id "search-button". Ketika
tombol ditekan, tulis kode jQuery untuk mendapatkan nilai input dan menampilkannya dalam
sebuah elemen dengan id "result".

Anda mungkin juga menyukai