Cara Mengubah Atribut HTML dengan JQuery (100% Berhasil)

Cara Mengubah Atribut HTML dengan JQuery (100% Berhasil)

Apa itu attribute HTML?

Dalam bahasa pemrograman web, bagian paling dasar yang perlu diketahui adalah tag. Tag dalam HTML merupakan kode yang diawali dengan simbol "lebih kecil dari" (<) dan diakhiri dengan simbol "lebih besar dari" (>).

Setelah simbol < akan ada "nama tag". Sehingga contoh tag HTML adalah <div> yang disebut sebagai (pembuka) tag div yang mempunyai penutup </div>.

Selain berisi nama, dalam sebuah tag bisa diisi dengan berbagai attribute yang mempunyai nilai masing-masing dan juga diletakkan sebelum simbol > dalam pembuka sebuah tag.

Attribute biasanya berisi aturan tertentu yang ditujukan kepada tag di mana atribut tersebut diletakkan. Contohnya adalah <div title="Halo!" bgcolor="red"> yang mempunyai atribut title dengan nilai "Halo!" dan atribut bgcolor dengan nilai "red".

Mengubah atribut tag HTML tanpa mengedit tag

Jika kamu bertanya, bisakah mengubah atribut HTML tanpa mengedit tag HTML tersebut? Jawabannya, tentu saja bisa! Mengubah atribut tag HTML di sini maksudnya adalah:
  • Menambahkan atribut baru
  • Menghapus atribut
  • Mengubah nilai atribut

Memasang Jquery di Blogger

Untuk melakukan hal tersebut, yang diperlukan hanyalah sintaks Javascript Jquery. Terlebih dahulu kamu perlu memasang "perpustakaan" Jquery di blog kamu sebelum menggunakannya. Ikuti cara berikut
  1. Buka Blogger
  2. Pada bagian Tema klik tombol Edit HTML
  3. Temukan kode </head> dan tambahkan kode berikut di atasnya
  4. <script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
  5. Klik tombol Simpan

Memanipulasi atribut elemen HTML dengan Jquery

Ada dua kode dasar yang digunakan untuk mengolah atribut suatu elemen HTML, yaitu menambahkan/mengganti dan menghapus atribut. .attr() digunakan untuk menambahkan dan mengubah nilai atribut sedangkan .removeAttr() digunakan untuk menghapus suatu atribut.

Metode pemanggilan tag

Untuk (misalnya) menambahkan atribut baru ke dalam suatu elemen/tag HTML, terlebih dahulu perlu didefinisikan tujuan tag akan ditambahkan atribut baru (bisa juga disebut memanggil tag mana yang ingin ditambahkan atribut baru).

Elemen tujuan tersebut bisa dipanggil dalam 3 cara, yaitu dengan memanggil nama tag, nama class, atau nama id. Berikut penjelasannya masing-masing.

1. Menggunakan nama tag
Dengan cara ini semua tag yang menggunakan nama yang sama akan ditambahkan atribut baru. Misalnya semua gambar yang tampil di blog akan ditambahkan atribut title. Jika kode HTML yang digunakan adalah sebagai berikut:

<img src="/image/image.jpg" />

Maka sintaks Jquery yang digunakan adalah:

$('img').attr('title', 'Maringngerrang');

2. Menggunakan nama class
Metode ini cocok digunakan untuk mengubah atribut beberapa elemen saja, sehingga elemen lain dengan nama tag yang sama bisa tidak terdampak. Kode yang digunakan adalah sebagai berikut, dengan mengganti .nama-class

<div class="nama-class">Halo</div>

Sintaks Jquery yang digunakan adalah:

$('.nama-class').attr('title', 'Maringngerrang');

3. Menggunakan nama id
Salah satu atribut elemen HTML yaitu id. Contohnya <div id="saya">. Atribut tersebut gunanya untuk memberikan identitas terhadap suatu elemen yang cuma bisa digunakan satu kali. Jadi tidak boleh ada elemen HTML yang menggunakan id yang sama.

<div id="nama-id">Halo</div>

Sintaks Jquery yang digunakan adalah:

$('#nama-id').attr('title', 'Maringngerrang');

Cara menambahkan atribut baru

Kode berikut ini akan menambahkan atribut title pada semua tag img.

$('img').attr('title', 'Maringngerrang');

Cara mengubah nilai atribut yang sudah ada

Jika sebuah elemen sudah memiliki atribut, kamu bisa mengubahnya dengan cara yang sama seperti menambahkan atribut baru. Kode di atas juga akan bekerja pada elemen img yang sudah punya atribut title. Jadi nilai atribut dari semua elemen img tersebut akan diubah menjadi Maringngerrang.

Menghapus atribut yang sudah ada

Kode berikut ini akan menghapus atribut title beserta nilainya pada semua tag img. Untuk menghapus atribut suatu elemen, kamu bisa menggunakan kode berikut ini:

$('img').removeAttr('title');

Manipulasi atribut secara massal

Jika atribut yang dimanipulasi lebih dari satu, misalnya menambahkan title dan mengubah href pada tag anchor, maka kamu bisa menggunakan kode berikut untuk memudahkan saat mengedit.

$('a').attr({
  'href':'https://www.maringngerrang.com',
  'title':'Maringngerrang'
});

Cara penggunaan di Blogger

Terlebih dahulu kamu perlu memasukkan kode di atas di dalam tag script. Untuk menggunakan metode-metode di atas pada blog kamu di Blogger, kamu bisa mengikuti langkah-langkah berikut ini.
  1. Buka Blogger
  2. Pada bagian Tema klik tombol Edit HTML
  3. Temukan kode </body> dan tambahkan kode berikut di atasnya
  4. <script><!-- Masukkan kode Jquery di sini --></script>
  5. Klik tombol Simpan

Contoh penggunaan

Sebagai contoh kode berikut akan menampilkan sebuah gambar yang ketika di klik maka gambar tersebut akan berubah, kita hanya menggunakan kode JQuery untuk mengganti atribut src ketika di klik. Kamu bisa melihat dan mencoba langsung hasilnya di sini.

<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
<img onclick="maringngerrang()" title="Maringngerrang" src="https://1.bp.blogspot.com/-hqYrBybHmPw/VnyZpEA4JZI/AAAAAAAAAn4/_lyhBmeOCGo/s1600/MusikTulus.jpg"/>
<script>
function maringngerrang(){
$('img').attr('src', 'https://1.bp.blogspot.com/-dl-QQiLqPHU/VnygiRo721I/AAAAAAAAAoQ/z2PliRECi7A/s1600/MusikTulus.png');
}
</script>

Penutup

Itulah langkah-langkah dan cara yang bisa kamu gunakan untuk mengubah atribut tag HTML, baik menghapus, mengubah nilai, atau menambah atribut tag HML dengan menggunakan Javascript, atau JQuery dengan mudah dan lengkap. Semoga artikel ini bisa bermanfaat untuk kamu.

Jika ada hal yang kurang jelas, maka jangan sungkan untuk memberikan komentar kamu di bawah atau melalui halaman contact blog ini. Terima kasih dan sampai jumpa!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel