Monday, January 4, 2016

Cara Memanipulasi Atribut HTML dengan JQuery

Cara Memanipulasi Atribut HTML dengan JQuery

Assalamu'alaikum warohmatullahi wabarokatuh, nah dalam posting kali ini saya akan membahas tentang bagaimana cara mengubah attribut suatu elemen kode HTML dengan menggunakan JQuery. JQuery yang merupakan bagian dari JavaScript ini bisa digunakan dalam berbagai fungsi sehingga sangat berguna bagi orang yang suka bermain coding.

Baiklah langsung saja, sebelum itu pertama silahkan pasang link JQuery berikut ini di blog sobat, copy lalu paste di atas </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>

Dasar

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

Lanjutan

Kode berikut ini akan mencari tag img (tag HTML untuk gambar) kemudian menambahkan atribut title dengan nilai Maringngerrang jika gambar tersebut tidak memiliki atribut title. Tetapi kalau tag img tersebut sudah memiliki atribut title dengan nilai tertentu maka kode JQuery berikut akan mengganti nilai title dengan Maringngerrang.

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

Jika yang ingin diberi atribut bukanlah sebuah tag HTML kita bisa menggunakan atribut ID. Misal pada sebuah elemen <div id='hadi'>Catatan Kaki Blog</div> ingin diberi atribut title dengan nilai Maringngerrang, maka bentuk kode JQuery yang digunakan adalah :

$('#hadi').attr('title', 'Maringngerrang');

Kode berikut ini akan mencari nilai atribut alt dari tag img dan memasukkan nilainya dalam variabel judul.

var judul = $('img').attr('alt');

Kode berikut ini akan menghapus atribut title beserta nilainya pada semua elemen tag img.

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

Kode berikut ini digunakan untuk menambahkan atribut secara massal, artinya menambahkan lebih dari satu atribut sekaligus. Kode berikut ini akan mencari elemen a (tag HTML untuk link) kemudian menambahkan atribut href dengan nilai # dan menambahkan atribut title dengan nilai Blank Link.

$('a').attr({
  'href':'#',
  'title':'Blank Link'
});

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.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>

<img onclick="hadi()" title="hadi" 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');
}
</script>

Mungkin cukup sekian dari saya, semoga bisa bermanfaat, kalau ada saran, kritik, maupun pertanyaan silahkan sampaikan pada kotak komentar dibawah ini atau bisa juga melalui halaman contact blog ini yang bisa dibuka melalui menu blog dibagian paling atas. Terima kasih, assalamu'alaikum.

Sumber : http://www.dte.web.id/2011/12/jquery-attr-dan-removeattr.html
Disqus Comment
Parse Tool