Rekomendasi kursus:

Mengambil konten dan atribut jQuery

jQuery memiliki metode kuat untuk mengoperasikan elemen HTML dan atribut.

Operasi DOM jQuery

Bagian yang sangat penting di jQuery adalah kemampuan untuk mengoperasikan DOM.

jQuery menyediakan berbagai metode yang berhubungan dengan DOM, yang mempermudah mengakses dan mengoperasikan elemen dan atribut.Pemberitahuan:

DOM = Document Object Model (Model Objek Dokumen)

“W3C Document Object Model (DOM) adalah antarmuka yang independen dari platform dan bahasa, yang memungkinkan program dan skrip mengakses dan memperbarui konten, struktur, dan gaya dokumen secara dinamis.”

Dapatkan konten - text(), html() serta val()

Tiga metode jQuery sederhana dan praktis untuk operasi DOM:

  • text() - Atur atau kembalikan konten teks elemen yang dipilih
  • html() - Atur atau kembalikan konten elemen yang dipilih (termasuk tanda markup HTML)
  • val() - Atur atau kembalikan nilai field formulir

Contoh di bawah ini menunjukkan bagaimana mendapatkan konten melalui metode jQuery text() dan html():

Contoh

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

Coba sendiri

Contoh di bawah ini menunjukkan bagaimana mendapatkan nilai input field melalui metode jQuery val():

Contoh

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

Coba sendiri

Mengambil atribut - attr()

Metode attr() jQuery digunakan untuk mendapatkan nilai atribut.

Contoh di bawah ini menunjukkan bagaimana mendapatkan nilai atribut href di dalam tautan:

Contoh

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

Coba sendiri

Di bab berikutnya akan dijelaskan bagaimana untuk mengatur (mengubah) konten dan nilai atribut.

Referensi HTML jQuery

Untuk referensi lengkap tentang metode HTML jQuery, silakan kunjungi referensi berikut: