Cara Manipulasi Tag Html Dengan Jquery
- JQuery mempunyai kemampuan untuk memanipulasi tag HTML, menyerupai menghapus, menduplikat, dan menyisipkan tag baru.
Cara memanipulasi tag HTML dengan jQuery ada banyak sekali macam cara.
Belajar JQuery: Cara Manipulasi Tag HTML dengan jQuery
Berikut beberapa perintah jQuery yang dipakai untuk memanipulasi tag HTML:
clone() : dipakai untuk menduplikat suatu tag yang dipilih oleh selector.
Tentu masih ingat ya, bagaimana cara menuliskan instruksi selector dan event nya, ada di artikel Memahami Event dalam jQuery.
wrap() : dipakai untuk membungkus sebuah tag yang dipilih oleh selector dengan suatu tag baru.
unwrap() : dipakai untuk menghilangkan tag HTML yang membungkus tag yang dipilih oleh selector.
prepend() : dipakai untuk menyisipkan tag gres didalam tag yang dipilih oleh selector pada bagian awal.
append() : dipakai untuk menyisipkan tag gres didalam tag yang dipilih oleh selector pada bagian akhir.
prependTo() : dipakai untuk menyisipkan tag yang disebutkan oleh selector kedalam suatu tag pada bagian awal.
appendTo() : dipakai untuk menyisipkan tag yang disebutkan oleh selector kedalam suatu tag pada bagian akhir.
text() : dipakai untuk mengambil atau mengubah tulisan(text) / string didalam suatu tag.
html() : dipakai untuk mengambil atau mengubah script HTML didalam suatu tag.
val() : dipakai untuk mengambil atau mengubah nilai suatu input form.
before() : dipakai untuk menambahkan tag gres sebelum
tag yang dipilih oleh selector.
after() : dipakai untuk menambahkan tag gres setelah tag yang dipilih oleh selector.
replaceWith() : dipakai untuk mengganti tag yang dipilih oleh selector dengan tag baru.
next() : dipakai untuk menentukan tag yang terletak setelah tag yang dipilih oleh selector.
prev() : dipakai untuk menentukan tag yang terletak sebelum tag yang dipilih oleh selector.
parent() : dipakai untuk menentukan tag yang membungkus tag yang dipilih oleh selector.
Sebagai contoh, kita akan menciptakan perintah Before() dan After() jQuery:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("#button1").click(function(){ $("p").before("<b>Before</b>"); }); $("#button2").click(function(){ $("span").after("<i>After</i>"); }); }); </script> </head> <body> <p style="color:red;"></p> <span style="color:blue;"></span> <br/><br/> <button id="button1">Klik before</button> <button id="button2">Klik after</button> </body> </html> Dengan perintah Before(), akan menciptakan tag gres sebelum tag HTML yang dipilih, dan After(), akan menciptakan tag gres sehabis tag HTML yang dipilih.
Untuk menandakan dari kasus diatas, coba buat instruksi diatas dan tampilkan dibrowser lalu di "Inspect Element". Kalau benar maka akan membentuk instruksi gres menyerupai pengertian fungsi Before dan After diatas.
Hasil inspect element:
Dan tag yang ditambahkan oleh fungsi "after()" akan membentuk tag gres sehabis tag yang dipilih, dilambangkan dengan gambar "merah".
Cara Manipulasi Tag HTML dengan jQuery
Selain memanipulasi tag HTML, jQuery juga mempunyai kemampuan untuk memanipulasi atribut suatu tag. Perintah yang dipakai untuk memanipulasi tag HTML ialah sebagai berikut:
attr() : dipakai untuk mengambil atau mengubah nilai atribut dari tag yang dipilih oleh selector.
removeAttr() : dipakai untuk menghapus atribut dari tag yang disebutkan oleh selector.
addClass() : dipakai untuk menambah class kedalam tag yang dipilih oleh selector.
removeClass() : dipakai untuk menghapus class yang disebutkan didalam kurung pada tag yang dipilih oleh selector.
toggleClass() : dipakai untuk menambah class gres pada tag yang dipilih oleh selector jikalau sebelumnya belum ada dan menghapusnya jikalau sebelumnya sudah ada.
Contoh instruksi toggleClass() jQuery:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("h1, h2, p").toggleClass("blue"); }); }); </script> <style> .blue { color: blue; } </style> </head> <body> <h1>Heading h1</h1> <h2>Heading h2</h2> <p>Belajar jQuery bersama www.senikoding.com</p> <p>Belajar Pemrogramman bersama www.senikoding.com</p> <button>Toggle class</button> </body> </html> Hasil browser:
Selain Cara Manipulasi Tag HTML dengan jQuery diatas jQuery masih mempunyai banyak cara lagi, kunjungi web resminya www.jquery.com.
Selamat mencoba dan terus belajar, supaya bermanfaat.
- salam -