Cara Mengelola Atribut HTML dengan JQuery

Apa itu attribute HTML?

HTML atau Hypertext Markup Language merupakan sebuah bahasa pemrograman web yang digunakan oleh setiap halaman situs di internet. HTML adalah bahasa dasar yang menjadi "muara" oleh setiap bahasa pemrograman web yang berfungsi sebagai penyusun komponen dalam halaman situs. Pada dasarnya hampir setiap jenis aplikasi browser yang digunakan saat ini menampilkan setiap halaman web dalam bentuk HTML.

Dalam bahasa HTML bagian paling mendasar yang perlu diketahui adalah tag. Tag merupakan elemen utama yang membentuk sebuah kode HTML yang mempunyai pembuka dan penutup. Tag dalam HTML merupakan kode yang diawali dengan simbol "lebih kecil dari" (<) dan diakhiri dengan simbol "lebih besar dari" (>).

Selain itu ada pula beberapa komponen yang menyusun sebuah tag HTML diantaranya adalah nama tag (tag name) dan attribute serta nilai dari atribut (attribute). Nama tag merupakan sebuah teks biasa yang terletak di antara simbol "lebih kecil dari" (<) dan simbol "lebih besar dari" (>). Contohnya adalah tag <div> yang disebut tag div. Sedangkan penutup tag div berbentuk </div>, hanya menambahkan simbol / tepat sebelum nama tag.

Selain berisi nama, sebuah tag HTML juga bisa memuat satu atau lebih attribute. Atribut tag HTML terletak tepat setelah nama tag dan sebelum penutup (>). Atribut HTML hanya terletak pada pembuka tag dan tidak ada atribut pada penutup tag, serta nilainya ditunjukkan dengan simbol "sama dengan" (=) dan diapit dengan simbol kutip tunggal ' maupun kutip ganda ".

Attribute biasanya berisi aturan tertentu yang ditujukan kepada elemen yang ada dalam sebuah tag. Contohnya adalah <div title="Halo!" bgcolor="red"> yang mempunyai atribut title dengan nilai Halo! dan atribut bgcolor dengan nilai red. Pada dasarnya, eksistensi dan nilai sebuah atribut HTML tidak dapat berubah dengan HTML murni, tetapi dengan menggunakan bantuan kode Javascript, hal tersebut jadi mungkin terjadi.

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 yang sudah ada beserta nilainya, atau bahkan mengubah nilai sebuah atribut.

Oleh karena itu, dalam posting kali ini akan dibahas tentang cara mengubah attribute dalam tag HTML menggunakan sebuah Javascript Library bernama JQuery, yang pembahasannya dibagi menjadi beberapa poin berikut ini.

Memasang Jquery di Blogger

Sebelum mulai menggunakan JQuery terlebih dahulu kamu perlu memasang sebuah kode yang merupakan library atau perpustakaan di mana setiap fungsi-fungsi dalam jquery tersimpan. Untuk memasang jquery di Blogger, kamu bisa mengikuti langkah-langkah berikut ini.

1. Buka Blogger, lalu pada bagian Tema buka Edit HTML.

2. Temukan kode </head> dan tambahkan kode berikut di atasnya

<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>

3. Setelah itu klik tombol Simpan

Mengelola Atribut HTML dengan Jquery

Setelah memasang jquery dengan cara di atas, kamu sudah bisa menjalankan setiap fungsi jquery pada blog kamu di Blogger. Di sini kita akan membahas fungsi jquery yang digunakan untuk mengelola atribut tag HTML. Ada dua kode dasar yang digunakan untuk mengolah atribut suatu tag, yaitu menambahkan/mengganti dan menghapus atribut. Fungsi .attr() digunakan untuk menambahkan dan mengubah nilai atribut sedangkan fungsi .removeAttr() digunakan untuk menghapus suatu atribut.

Tetapi sebelum mulai menggunakan fungsi tersebut, terlebih dahulu kamu perlu mengetahui tag HTML mana yang akan dipanggil oleh fungsi tersebut, oleh karena itu untuk mengenal beberapa metode pemanggilan tag HTML, silakan simak pembahasannya di bawah ini.

Metode Pemanggilan Tag HTML

Metode pemanggilan tag HTML dalam jquery berguna untuk menentukan tag mana yang akan dikelola dalam sebuah fungsi jquery. Dalam pemanggilan tag HTML menggunakan JQuery kamu bisa menggunakan beberapa cara, yaitu memanggil nama tag, nama class, atau nama id.

#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');

* * *

Menambahkan atribut baru

Dalam mengelola atribut tag, salah satunya adalah menambahkan atribut baru yang belum ada sebelumnya. Sebagai contoh kode berikut ini akan menambahkan atribut title pada semua tag img.

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

Mengubah nilai atribut yang sudah ada

Jika sebuah tag sudah mempunyai atribut, kamu bisa mengubah nilainya dengan cara yang sama seperti menambahkan atribut baru. Kode di atas juga akan bekerja pada elemen img yang sudah punya atribut title, apabila kode di atas digunakan, maka nilai atribut dari semua tag img akan menjadi Maringngerrang, atau dengan kata lain kalau belum ada, ditambahkan, jika sudah ada, maka akan diganti.

Menghapus atribut beserta nilainya

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

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

Mengelola atribut secara massal

Jika atribut yang akan dikelola lebih dari satu, misalnya akan ditambahkan atribut title serta mengubah nilai atribut href pada tag anchor, maka kamu bisa menggunakan kode berikut ini. Pada dasarnya kamu hanya perlu memisahkan tiap atribut yang dikelola dengan simbol koma ,.

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

Menggunakan Jquery di Blogger

Setelah mengetahui penggunaan beberapa fungsi pada jquery dalam mengelola atribut tag HTML, selanjutnya kamu perlu mengetahui bagaimana fungsi tersebut di pasang di blog, dan di mana tempatnya dipasang. Terlebih dahulu kamu perlu memasukkan kode di atas di dalam tag <script>.

Untuk memasang fungsi-fungsi jquery tersebut pada blog kamu di Blogger, silakan ikuti langkah-langkah berikut ini.

1. Buka Blogger, lalu pada bagian Tema buka Edit HTML.

2. Temukan kode </body> dan tambahkan kode berikut di atasnya

<script>
<!-- Masukkan kode Jquery di sini -->
</script>

3. Silakan masukkan kode jquery yang ingin kamu gunakan pada kode di atas, setelah itu klik tombol Simpan dan lihat hasilnya di blog kamu.

Selain menggunakan cara di atas, kamu juga bisa memasang fungsi/kode Jquery melalui menu Tata Letak. Caranya cukup tambahkan sebuah widget HTML/Javascript pada menu tata letak dan isikan dengan kode yang sama seperti cara di atas (menggunakan Edit HTML).

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 mencobanya dan melihat langsung hasilnya pada simulasi HTML Editor, lalu masukkan kode berikut ini dan tampilkan hasilnya.

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

Penutup

Itulah langkah-langkah dan cara yang bisa kamu gunakan untuk mengubah atribut dari sebuah tag HTML, baik menghapus, mengubah nilainya, atau menambah atribut tag HML dengan menggunakan Javascript, atau lebih tepatnya dengan JQuery.

Semoga pembahasan dalam tulisan ini bisa bermanfaat untuk kamu serta bisa memberikan wawasan baru, apabila ada hal-hal yang kurang jelas dan perlu ditanyakan, atau ada hal-hal yang keliru dan perlu diluruskan, silakan sampaikan semuanya pada kolom komentar di bawah atau melalui halaman contact blog ini. Terima kasih dan sampai jumpa!