Hai teman-teman, bertemu lagi pada tutorial dumet school, pada tutorial kali ini kita akan belajar bagaimana cara menambahkan class dengan fungsi addclass pada jquery.
Mungkin teman-teman yang sudah lama terjun pada dunia website terutama bagian programming pasti sudah kenal dengan yang namanya javascript, dan pada saat ini liblary dari javascript sangtlah berkembang pesat, terlihat dari banyaknya liblary yang dikembangkan pada saat ini seperti angular ionic jquery dan lain-lain.
Nah pada pembahasan kali ini kita akan sedikit belajar jquery yaitu menambahkan class dengan fungsi addclass, oke untuk lebih jelasnya kita langsung saja praktekkan, silahkan teman-teman buat sebuah file dan ketikan script berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!doctype HTML> <html> <head> <title>belajar add class</title> <style> .coba{color:red;} </style> <script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script> </head> <body> <script type="text/javascript"> $(document).ready(function(){ $("p").addClass("coba"); }); </script> <p>nama saya rizal</p> </body> </html> |
Saya akan jelaskan script di atas, pertama saya mereload liblary dari jquery yang saya ambil dari jquery.com, lalu saya membuat sebuah element html p yaitu paragraf, dan saya membuat fungsi penambahan class pada element p seperti ini :
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(document).ready(function(){ $("p").addClass("coba"); }); </script> |
dimana element p saya pasang sebagai target yang akan saya tambahkan class coba, lalu saya mengatur css class coba itu berwarna merah seperti berikut ini :
|
1 2 3 |
<style> .coba{color:red;} </style> |
Jika sudah silahakan jalankan pada browser dan lihat hasilnya, element p akan berwarna merah karena kita telah mengatur cssnya.
Gimana teman-teman cukup mudah bukan, untuk tutorial kali ini tentang menambahkan class dengan fungsi addclass pada jquery cukup sampai sini dulu, semoga tutorial yang singkat ini bermanfaat untuk teman-teman semuanya, sampai bertemu lagi pada tutorial berikutnya.
Terimakasih.