tutorial pengembangan web terbaru
 

jQuery - Dapatkan Konten dan Atribut


jQuery berisi metode yang kuat untuk mengubah dan memanipulasi elemen HTML dan atribut.


jQuery DOM Manipulasi

Salah satu bagian yang sangat penting dari jQuery adalah kemungkinan untuk memanipulasi DOM.

jQuery datang dengan banyak metode DOM terkait yang membuatnya mudah untuk mengakses dan memanipulasi elemen dan atribut.

Object Model DOM = Dokumen

DOM mendefinisikan standar untuk mengakses HTML dan XML dokumen:

"W3C Document Object Model (DOM) adalah antarmuka platform dan bahasa-netral yang memungkinkan program dan script untuk mengakses dan memperbarui konten, struktur, dan gaya dokumen dinamis."


Dapatkan Konten - text(), html() , dan val()

Tiga sederhana, namun bermanfaat, metode jQuery untuk manipulasi DOM adalah:

  • text() - Mengatur atau mengembalikan konten teks elemen yang dipilih
  • html() - Mengatur atau mengembalikan isi dari elemen yang dipilih (termasuk markup HTML)
  • val() - Mengatur atau mengembalikan nilai kolom formulir

Contoh berikut menunjukkan bagaimana untuk mendapatkan konten dengan jQuery text() dan html() metode:

Contoh

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

Contoh berikut menunjukkan bagaimana untuk mendapatkan nilai dari sebuah field input dengan jQuery val() metode:

Contoh

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

Dapatkan Atribut - attr()

JQuery attr() metode yang digunakan untuk mendapatkan nilai atribut.

Contoh berikut menunjukkan bagaimana untuk mendapatkan nilai href atribut dalam link:

Contoh

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

Bab berikutnya menjelaskan cara mengatur (perubahan) konten dan atribut nilai.


Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4»


jQuery HTML Referensi

Untuk gambaran lengkap dari semua metode jQuery HTML, silahkan ke kami Referensi / CSS jQuery HTML .