Memahami Manipulasi DOM dengan jQuery

Manipulasi DOM adalah keterampilan inti dalam membangun situs web atau aplikasi modern. Pernah mendengar tentang jQuery Nah, selama beberapa tahun terakhir Anda memiliki perpustakaan yang membuat hal ini sangat mudah: ini adalah kenyamanan murni, baik dengan sintaks dan apa yang dapat Anda lakukan dengan elemen HTML. Namun, banyak proyek yang masih menggunakan jQuery, meskipun fitur dan kerangka kerja JavaScript yang lebih baru telah muncul. Artikel ini membahas beberapa manipulasi DOM dasar dengan jQuery, dan mengapa jQuery masih menjadi alat yang sangat berguna bagi para pengembang.

Apa yang dimaksud dengan Manipulasi DOM?

DOM - Model Objek Dokumen - adalah representasi struktur dan konten halaman web. Fungsionalitas yang disengaja memungkinkan bahasa pemrograman, termasuk JavaScript, untuk berinteraksi dengan elemen-elemen halaman web: Misalnya, memperbarui teks, menambahkan gaya, atau merespons peristiwa pengguna.

Ini terdiri dari menangani elemen HTML, mengubah atribut atau konten mereka dan mengubah perilaku atau gaya mereka secara dinamis. Sebagai contoh, Anda mungkin ingin mengubah teks dari sebuah tombol ketika diklik, atau menyorot bagian dari halaman ketika diklik.Ini menguraikan operasi umum menjadi fungsi-fungsi yang mencakup hal ini sehingga Anda perlu.

Memulai dengan jQuery

Untuk menggunakan jQuery, tambahkan pustaka ke dalam proyek Anda. Cara termudah untuk menambahkannya adalah dengan menggunakan CDN:

Anda dapat menggunakan metode jQuery ketika Anda menyertakannya. Simbol $ adalah metode default untuk memilih dan memanipulasi elemen DOM.

sunber: digiclass.id

Memilih Elemen

Manipulasi dimulai dengan memilih elemen di dalam DOM. Dengan jQuery, ini adalah proses yang intuitif dan fleksibel:

Berdasarkan ID:

$('#elementId');

Berdasarkan Kelas:

$('.className');

Berdasarkan Nama Tag:

$('.tagName');

Menggabungkan Selektor:

$('div.className');

Ini mengembalikan objek jQuery untuk dimanipulasi lebih lanjut.

Metode untuk Memanipulasi DOM

jQuery memiliki seperangkat metode untuk bekerja dengan elemen DOM:

1. Mengubah Konten:

html(): Mendapatkan atau mengatur HTML bagian dalam sebuah elemen.

$('#example').html('<p>Updated content</p>');

text(): Untuk mendapatkan atau mengatur hanya konten teks.

$('.message').text('Hello, world!');

2. Memodifikasi Atribut:

attr(): Mendapatkan atau menyetel nilai atribut

$('img'). attr('src', 'newImage. jpg');

removeAttr(): Menghapus atribut.

$('#link'). removeAttr('target');

3. Elemen Penataan:

css(): Mengatur properti css.

$('p').css('color', 'blue');

4. Menambahkan dan Menghapus Elemen:

append(): Menambahkan konten ke akhir elemen.

$('#list').append('<li>New item</li>');

remove(): Menghapus elemen.

$('.to-delete').remove();

5. Menangani Kelas:

addClass() removeClass() toggleClass()

$('#box').addClass('highlight');

Penanganan Event

Salah satu manfaat jQuery adalah sintaks sederhana dalam penanganan event. Sebagai contoh:

Klik Event:

$('#button').click(function() {

alert('Button clicked!');

});

Peristiwa Melayang:

$('.item').hover(
function() { $(this).addClass('hover'); },
function() { $(this).removeClass('hover'); }
);

Manfaat Menggunakan jQuery

Sintaks yang Lebih Sederhana: jQuery menyederhanakan aktivitas DOM yang rumit.

Kompatibilitas Lintas Browser: Mengatasi ketidakcocokan antar browser.

Ekosistem Plugin yang Kaya: Berbagai macam plugin yang memperluas fungsionalitasnya.

Kesimpulan

Manipulasi DOM sangat penting untuk membuat situs web menjadi interaktif dan responsif. Dengan alat yang lebih baru, seperti React dan vanilla JavaScript ES6, yang semakin terkenal, banyak pengembang merasa jQuery menjadi kurang populer, meskipun serbaguna dan mudah didekati. Baik Anda mempertahankan proyek lama, atau membuat prototipe cepat, jQuery tetap menjadi alat pengembangan web yang berharga.

kembali ke>>>> Membangun Situs Web Interaktif dengan jQuery