Menambah Memilih Merubah Dan Menghapus Atribut Dengan JQuery

Pada tutorial kali ini kita akan membahas tentang cara untuk menambah, memilih, merubah, dan menghapus atribut dengan JQuery, atribut yang hendak kita rubah adalah atribut yang dimiliki elemen HTML.

Dalam hal mengakses dan memanipulasi elemen menggunakan JQuery, anda juga dapat menambah atau menghapus atribut yang dimiliki elemen tersebut. Pada tutorial ini akan berfokus dalam hal menambah dan juga menghapus attribute yang dimiliki elemen HTML.

Atribut adalah sifat yang dimiliki oleh setiap elemen, dimana pada atribut sendiri juga memiliki nilainya masing – masing. Di bawah ini, pada code yang saya hitamkan dan saya tebalkan tulisannya, adalah contoh dari atribut beserta nilainya yang dimiliki setiap elemen :

Pada JQuery anda dapat menambah, merubah, memilih, dan juga menghapus atribut dengan menggunakan method :

  • attr(), untuk menambah, merubah dan memilih attribute.
  • removeAttr() untuk menghapus atribut.

Membaca Atribut Yang Dimiliki Elemen

Untuk membaca nilai dari suatu atribut, anda dapat menggunakan method attr(). Pertama – tama buat variable untuk menampung nilai dari atribut yang dimiliki sebuah elemen yang ingin anda ambil nilai atributnya. Misal terdapat elemen seperti ini :

Dan saya ingin mendapatkan nilai atributnya ( https://www.google.com ), maka sintaks JQuery – nya adalah seperti ini :

Berikut source code lengkapnya :

Di bawah ini adalah hasil dari source code di atas :

memilih atribut elemen

Live Preview :

See the Pen
Memilih elemen pada JQuery
by Lautankode (@lautankode)
on CodePen.


Menambah Dan Merubah Atribut Dengan JQuery

Untuk menambah dan merubah atribut dengan JQuery sangatlah mudah, caranya sama seperti cara sebelumnya, yakni dengan menggunakan method attr(), namun dalam hal ini anda harus menambahkan parameter tambahan yakni nama atribut yang di tuju.

Maka secara otomatis atribut baru akan ditambahkan ke dalam elemen beserta nilainya, apabila atribut ini belum ada sebelumnya. Namun apabila atribut ini sudah ada sebelumnya, maka nilai nya saja yang akan berubah.

Di bawah ini adalah output, tapi ketika anda belum melakukan klik pada button add/update attribute.

memasukan atribut pada jquery

Dan apabila anda melakukan klik pada button di atas, maka atribut href akan berubah menjadi https://www.facebook.com, dan secara otomatis juga akan menambahkan atribut target=”_blank”.

merubah atribut dengan jquery

Live Preview :

See the Pen
Menambah dan Merubah Atribut Dengan JQuery
by Lautankode (@lautankode)
on CodePen.

Menghapus Atribut Sebuah Elemen

Terakhir adalah cara menghapus atribut pada elemen. Untuk menghapus atribut yang dimiliki sebuah elemen, anda dapat menggunakan method removeAttr.

Di bawah ini adalah hasil dari source code di atas, ketika button belum di klik.

menghapus attribut elemen

Dan di bawah ini adalah hasil ketika button sudah di klik, yakni akan menghapus atribut target=”blank”.

menghapus attribut pada jquery


Demikian tutorial dari

Leave a comment

Your email address will not be published. Required fields are marked *

× Contact Us