Tutorial Belajar jQuery Part 12: Cara Mengubah Atribut HTML dengan jQuery

Posted on

Untuk mendesain halaman yang interaktif, kadang kita mesti mengubah atribut dari sebuah faktor HTML. Inilah yang akan saya bahas di panduan belajar jQuery kali ini, yakni bagaimana cara mengambil dan mengubah atribut HTML dengan jQuery.


Cara Mengambil Atribut HTML dengan jQuery

Untuk “berurusan” dengan atribut faktor HTML, jQuery menyediakan method attr(). Method ini dapat diisi dengan 1 atau 2 argumen. Kalau diisi dengan 1 argumen, berarti kita ingin mengambil atribut dari element tersebut.

Selaku contoh, untuk mengambil nilai atribut title dari sebuah tag HTML yang mempunyai id=”paragraf”, saya dapat menulis kode jQuery berikut:

Sekarang ini ini, variabel nilai akan berisi nilai atribut title.

Untuk kode program yang lebih “real” mari masuk ke contoh praktek berikut ini:

Di halaman ini saya mempunyai sebuah link yang dikerjakan dari tag <a>. Perhatikan link ini mempunyai 3 atribut: href, title, dan target. Dibawahnya terdapat sebuah tombol Ambil Atribut yang dikerjakan dengan tag <button id=”ambil”>. Element terakhir yaitu sebuah paragraf kosong yang mempunyai id=”tekape”.

Disini saya ingin mengambil ketiga atribut dari tag <a>, lalu menampilkan hasilnya ke <p id=”tekape”>. Ini saya lakukan dengan 4 baris berikut:

Perhatikan bagaimana cara mengambil nilai setiap atribut. Variabel nilai1, nilai2 dan nilai3 akan berisi nilai atribut href, title dan target dari tag <a>.

Untuk jQuery selector tag <a>, saya mencarinya dengan menggunakan “a[title]”. Di di CSS, selector seperti ini dikenal selaku atribut selector. Artinya, saya mencari sebuah tag <a> yang mempunyai atribut title. Karena di halaman ketika ini hanya terdapat 1 tag <a>, tag inilah yang akan diambil. Ini hanya sekedar alternatif dari atribut id yang selalu kita gunakan hingga ketika ini.

Terakhir saya menggunakan method html() untuk memindahkan ketiga nilai atribut kedalam tag <p id=”tekape”></p>.

Silahkan kamu coba lewat link codepen dibawah ini:

See the Pen Cara Mengambil Atribut HTML dengan method attr() jQuery by duniailkom (@duniailkom) on CodePen.10206


Cara Mengubah dan Menambahkan Atribut HTML dengan jQuery

Bagus, kita telah mempelajari cara mengambil nilai element HTML. Sekarang ini ini, bagaimana cara mengubahnya?

Kita masih tetap menggunakan method attr(). Namun kali ini dengan menulis 2 argumen. Argumen pertama-tama berfungsi selaku nama atribut, sedangkan argumen kedua yaitu nilai dari atribut tersebut.

Selaku contoh, untuk mengubah atau menambahkan atribut title= “Sedang belajar jQuery” ke di faktor HTML dengan id=”paragraf”, saya dapat menulis kode berikut:

Mari kita lihat contoh prakteknya:

See the Pen Cara Menambah Atribut HTML dengan method attr() jQuery by duniailkom (@duniailkom) on CodePen.10206

Di ketika halaman HTML pertama-tama kali dijalankan, tag <a> tak mempunyai atribut apa-apa selain id=”link_jquery”. Tag <a> ini belum berupa link, karena tak mempunyai atribut href.

Ketika tombol Tambah Atribut di klik, saya akan menambah 2 buah atribut baru dengan command berikut:

Sekarang ini ini, tag <a id=”link_jquery”> telah mendapat atribut href dan title. Artinya, tag <a> tersebut berubah menjadi sebuah link ke duniailkom. Kamu dapat melihat efeknya dengan perubahan warna font menjadi biru dan mempunyai garis bawah, persis seperti link normal.

Di panduan ini kita telah membahas mengenai method attr() yang dapat digunakan untuk mengambil, mengubah, dan menambah atribut baru ke di sebuah element HTML. Berikutnya, saya akan membahas cara mengambil dan menambah kode CSS ke elemen HTML menggunakan jQuery.


Sumber https://www.duniailkom.com/