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.- Buka Blogger, lalu pada bagian Tema buka Edit HTML.
- Temukan kode
</head>
dan tambahkan kode berikut di atasnya - Setelah itu klik tombol Simpan
<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
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 atributtitle
. 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 yaituid
. 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 atributtitle
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 elemenimg
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 atributtitle
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 atributtitle
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.
- Buka Blogger, lalu pada bagian Tema buka Edit HTML.
- Temukan kode
</body>
dan tambahkan kode berikut di atasnya - Silakan masukkan kode jquery yang ingin kamu gunakan pada kode di atas, setelah itu klik tombol Simpan dan lihat hasilnya di blog kamu.
<script>
<!-- Masukkan kode Jquery di sini -->
</script>
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 atributsrc
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!
Posting Komentar untuk "Cara Mengelola Atribut HTML dengan JQuery"
Silakan sampaikan komentar kamu dengan mematuhi syarat dan ketentuan berikut:
Diperbolehkan menggunakan link, selama tidak mengarah pada situs yang mengandung perjudian, pornografi, dan konten ilegal lain. Tidak diperbolehkan promosi jualan, produk, jasa, dsb.
Tidak boleh menggunakan kata-kata yang kasar, tidak pantas, mengandung SARA, atau penghinaan. Diharapkan saling menghargai satu sama lain.
Setiap komentar segera diterbitkan setelah moderasi, pastikan komentar kamu sudah benar sebelum dipublikasikan dan backlink tidak akan dihilangkan oleh admin. Admin berhak menghapus komentar yang melanggar.
Blogwalking dan saling memberi salam diperbolehkan. Menerima pemasangan backlink dofollow, tautan ada di menu navigasi.
Gunakan <i rel="code">Text here</i> untuk komentar yang berisi kode singkat.
Gunakan <i rel="pre">Text here</i> untuk komentar yang berisi kode panjang.
Setiap komentar yang mengandung kode/sintaks dengan rel code/pre di atas, wajib di-parse terlebih dahulu pada menu Alat > Script Parse di menu navigasi di atas.
Kamu juga bisa memberikan komentar bergaya <b>cetak tebal</b> maupun <i>cetak miring</i>. Komentar dengan kode HTML selain cetak tebal/miring atau link tidak diperbolehkan untuk dipublikasikan.