Mengenal Getter dan Setter pada jQuery

Beberapa metode pada jQuery dapat digunakan untuk menetapkan atau membaca beberapa nilai pada suatu pilihan. Beberapa metode tersebut adalah text(), html(), attr(), dan val().

Ketika metode tersebut dipanggil tanpa argumen maka itu dapat disebut sebagai Getter, karena mendapatkan (atau membaca) nilai dari suatu elemen. Ketika metode tersebut dipanggil dengan nilai sebagai argumen maka itu disebut sebagai Setter, karena mengatur (atau menetapkan) nilainya.


Metode text()

Metode text() dapat digunakan untuk mendapatkan konten teks gabungan dari elemen yang dipilih, termasuk turunannya (Child), atau mengatur teks konten dari elemen yang dipilih.

Mendapatkan Konten dengan Metode text()

Berikut adalah contoh yang akan menampilkan cara untuk mendapatkan konten dari teks paragraf:

<script>
    $(document).ready(function(){
        // Mendapatkan kombinasi teks dari semua paragraf
        $(".tombol-satu").click(function(){
            var string = $("p").text();
            alert(string);
        });

        // Mendapatkan teks dari paragraf pertama
        $(".tombol-dua").click(function(){
            var string = $("p:first").text();
            alert(string);
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Catatan: text() dapat mengambil semua nilai pada elemen yang dipilih (yaitu teks gabungan), sedangkan Getter lainnya seperti text(), html(), attr(), dan val() hanya mengembalikan nilai dari elemen pertama.

Mengatur Konten dengan Metode text()

Berikut adalah contoh untuk mengatur konten teks paragraf:

<script>
    $(document).ready(function(){
        // Mengatur teks dari semua paragraf
        $(".tombol-satu").click(function(){
            $("p").text("Contoh teks 1.");
        });

        // Mengatur teks dari paragraf pertama
        $(".tombol-dua").click(function(){
            $("p:first").text("Contoh teks lain.");
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Catatan: Ketika metode text(), html(), attr(), dan val() dipanggil dengan suatu nilai sebagai argumen, metode tersebut akan menetapkan nilai tersebut untuk setiap elemen yang cocok.

Metode html()

Metode html() dapat digunakan untuk mendapatkan atau mengatur konten pada elemen HTML.

Mendapatkan Konten HTML dengan Metode html()

Berikut adalah contoh yang akan menunjukkan kepada kalian cara mendapatkan konten HTML dari elemen paragraf serta elemen Container <div>:

<script>
    $(document).ready(function(){
        // Mendapatkan konten HTML dari paragraf pertama
        $(".btn-one").click(function(){
            var str = $("p").html();
            alert(str);
        });

        // Mendapatkan konten HTML dari elemen yang memiliki id="container"
        $(".btn-two").click(function(){
            var str = $("#container").html();
            alert(str);
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Catatan: Jika terdapat beberapa elemen yang dipilih, metode html() hanya akan mengembalikan konten HTML dari elemen pertama dari set elemen yang cocok.

Mengatur Konten HTML dengan Metode html()

Berikut adalah contoh untuk mengatur konten dari elemen <body>:

<script>
    $(document).ready(function(){
        // Mengatur konten HTML untuk elemen body
        $("button").click(function(){
            $("body").html("<p>Halo Semuanya</p>");
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Metode attr()

Kalian bisa menggunakan metode attr() untuk mendapatkan nilai atribut dari elemen atau mengatur satu atau beberapa atribut pada elemen yang dipilih.

Mendapatkan Nilai Atribut dengan Metode attr()

Berikut adalah contoh yang akan mendapatkan atribut href dari hyperlink yaitu elemen <a> serta atribut alt dari elemen <img>:

<script>
    $(document).ready(function(){
        // Mendapatkan nilai dari atribut href
        $(".tombol-satu").click(function(){
            var str = $("a").attr("href");
            alert(str);
        });

        // Mendapatkan nilai dari atribut alt
        $(".tombol-dua").click(function(){
            var str = $("img#elc").attr("alt");
            alert(str);
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Catatan: Jika terdapat beberapa elemen yang dipilih, metode attr() hanya akan mengembalikan nilai atribut pada elemen pertama dari set elemen yang cocok.

Mengatur Atribut dengan Metode attr()

Berikut adalah contoh yang menunjukkan cara mengatur atribut yang dicentang dari Checkbox.

<script>
    $(document).ready(function(){
        // Memeriksa semua checkboxe
        $("button").click(function(){
            $('input[type="checkbox"]').attr("checked", "checked");
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Metode attr() juga dapat kita gunakan untuk mengatur beberapa atribut sekaligus. Berikut adalah contoh yang akan menunjukkan cara mengatur atribut class dan title pada elemen <img>:

<script>
    $(document).ready(function(){
        // Menambahkan Atribut Class dan Title pada semua elemen gambar
        $("button").click(function(){
            $("img").attr({
                "class" : "elc",
                "title" : "EL Creative Academy"
            });
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Metode val()

Metode val() utamanya digunakan untuk mendapatkan atau menetapkan nilai dari elemen form HTML seperti <input>, <select> dan <textarea>.

Mendapatkan Nilai dari Form dengan Metode val()

Berikut adalah contoh yang menunjukkan cara mendapatkan nilai dari form:

<script>
    $(document).ready(function(){
        // Mendapatkan nilai dari input dengan id="nama"
        $("button.dapatkan-nama").click(function(){
            var nama = $('input[type="text"]#nama').val();
            alert(nama);
        });

        // Mendapatkan nilai dari textarea dengan id="komentar"
        $("button.dapatkan-komentar").click(function(){
            var komentar = $("textarea#komentar").val();
            alert(komentar);
        });

        // Mendapatkan nilai dari Select Box dengan id="kota"
        $("button.dapatkan-kota").click(function(){
            var kota = $("select#kota").val();
            alert(kota);
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Catatan: Jika terdapat beberapa elemen form yang dipilih, metode val() hanya akan mengembalikan nilai elemen pertama dari set elemen yang cocok.

Mengatur Nilai dari Form dengan Metode val()

Berikut adalah contoh yang akan menunjukkan cara mengatur nilai dari form:

<script>
    $(document).ready(function(){
        // Mengatur nilai dari semua input
        $("button").click(function(){
            var text = $(this).text();
            $('input[type="text"]').val(text);
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

0 Komentar