√ Cara Mengubah Atribut Html Dengan Jquery (100% Berhasil)

Apa itu attribute HTML?

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

Setelah simbol < akan ada "nama tag". Sehingga pola tag HTML yakni <div> yang disebut sebagai (pembuka) tag div yang mempunyai epilog </div>.

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

Attribute biasanya berisi hukum tertentu yang ditujukan kepada tag di mana atribut tersebut diletakkan. Contohnya yakni <div title="√ Cara Mengubah Atribut HTML dengan JQuery (100% Berhasil)" bgcolor="red"> yang mempunyai atribut title dengan nilai "Halo!" dan atribut bgcolor dengan nilai "red".

Mengubah atribut tag HTML tanpa mengedit tag

Jika kau 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 melaksanakan hal tersebut, yang diharapkan hanyalah sintaks Javascript Jquery. Terlebih dahulu kau perlu memasang "perpustakaan" Jquery di blog kau sebelum menggunakannya. Ikuti cara berikut

1. Buka Blogger
2. Pada bab Tema klik tombol Edit HTML
3. Temukan isyarat </head> dan tambahkan isyarat berikut di atasnya

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

4. Klik tombol Simpan

Memanipulasi atribut elemen HTML dengan Jquery

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

Metode pemanggilan tag

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

Elemen tujuan tersebut dapat 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 memakai nama yang sama akan ditambahkan atribut baru. Misalnya semua gambar yang tampil di blog akan ditambahkan atribut title. Jika isyarat HTML yang dipakai yakni sebagai berikut:

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

Maka sintaks Jquery yang dipakai adalah:

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

2. Menggunakan nama class

Metode ini cocok dipakai untuk mengubah atribut beberapa elemen saja, sehingga elemen lain dengan nama tag yang sama dapat tidak terdampak. Kode yang dipakai yakni sebagai berikut, dengan mengganti .nama-class

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

Sintaks Jquery yang dipakai adalah:

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

3. Menggunakan nama id

Salah satu atribut elemen HTML yaitu id. Contohnya <div id="saya">. Atribut tersebut gunanya untuk memperlihatkan identitas terhadap suatu elemen yang cuma dapat dipakai satu kali. Makara dihentikan ada elemen HTML yang memakai id yang sama.

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

Sintaks Jquery yang dipakai adalah:

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

Cara menambahkan atribut baru

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

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

Cara mengubah nilai atribut yang sudah ada

Jika sebuah elemen sudah mempunyai atribut, kau dapat mengubahnya dengan cara yang sama menyerupai menambahkan atribut baru. Kode di atas juga akan bekerja pada elemen img yang sudah punya atribut title. Makara nilai atribut dari semua elemen img tersebut akan diubah menjadi .

Menghapus atribut yang sudah ada

Kode berikut ini akan menghapus atribut title beserta nilainya pada semua tag img. Untuk menghapus atribut suatu elemen, kau dapat memakai isyarat berikut ini:

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

Manipulasi atribut secara massal

Jika atribut yang dimanipulasi lebih dari satu, contohnya menambahkan title dan mengubah href pada tag anchor, maka kau dapat memakai isyarat berikut untuk memudahkan ketika mengedit.

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

Cara penggunaan di Blogger

Terlebih dahulu kau perlu memasukkan isyarat di atas di dalam tag script. Untuk memakai metode-metode di atas pada blog kau di Blogger, kau dapat mengikuti langkah-langkah berikut ini.

1. Buka Blogger
2. Pada bab Tema klik tombol Edit HTML
3. Temukan isyarat </body> dan tambahkan isyarat berikut di atasnya

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

4. Klik tombol Simpan

Contoh penggunaan

Sebagai pola isyarat berikut akan menampilkan sebuah gambar yang ketika di klik maka gambar tersebut akan berubah, kita hanya memakai isyarat JQuery untuk mengganti atribut src ketika di klik. Kamu dapat melihat dan mencoba pribadi kesudahannya di sini.

<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script> <img onclick="maringngerrang()" title="√ Cara Mengubah Atribut HTML dengan JQuery (100% Berhasil)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQbJ88KL7xS08SAy8edu_HZufncbzI6-OikNsA_2uCYHqjE41pxGCl0noCKeHG0iSp3j7fefO3C3Fr8ytO8mcPCsvzR_1n9gPXJoni-buFtcrF-wrRXvrGfDhyphenhyphensUp2tzP1ZF7TavPXRII/s1600/MusikTulus.jpg"/> <script> function maringngerrang(){ $('img').attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9-GGlOy1st_nBz7alikfRQfcKpN2dz0FTcjxEOLGUHsWY5iGK19H6UtuVR385Y7OUdHsgJU4HT1ZjymEFiYK2xMKhnMUxb0JzG-L6eH9Le4OqJduipOVPkcdyOwFB6WjVa-TqnuXsw2k/s1600/MusikTulus.png'); } </script>

Penutup

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

Jika ada hal yang kurang jelas, maka jangan sungkan untuk memperlihatkan komentar kau di bawah atau melalui halaman contact blog ini. Terima kasih dan hingga jumpa!
Sumber http://www.maringngerrang.com/