Pada pembahasan kali ini kita akan belajar tentang bagaimana cara menambahkan atribut pada element html dengan method attr pada jquery,
seperti yang kita tau, method pada jquery sangatlah banyak, dan masing-masingnya memiliki fungsinya masing-masing, saya telah membahas sedikit banyak method-method yang ada pada jquery, dan kali ini kita belajar fungsi method attr().
Fungsi dari attr() sendiri ialah untuk menambahkan atribut pada element yang kita tentukan sebagai selektor, nah mungkin untuk lebih jelasnya kita langsung saja praktek, pertama teman-teman silahkan buat sebuah file dan ketikan script berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <style> .merah{color:red} </style> </head> <body> <p>Selamat Pagi Juara</p> <button>Ubah</button> </body> </html> |
Pada script diatas saya membuat sebuah p dan tombol dimana p inilah nanti yang akan saya berikan atribut dengan fungsi method attr(), lalu disitu juga saya mengatur css internah class merah berwarna tulisan text merah, jika sudah teman-teman bisa save dan coba jalankan pada browser.
Hasilnya masih seperti biasa, element p yang saya buat belum ada style apapun, nah sekarang coba teman-teman tambahkan script jquery berikut ini:
|
1 2 3 4 5 6 7 8 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").attr("class", "merah"); }); }); </script> |
Pertama hal wajib yang harus kita lakukan untuk memulai script jquery adalah mereload library dari web resmi jquery yaitu jquery.com, Setalah itu saya membuat sebuah event click pada tombol dimana ketika tombol itu kita klik, maka element p akan mempunyai class dengan nilai mreah, sehingga dapat membaca script css yang kita buat tadi dan tulisan element p nya akan berubah jadi merah ketika tombol kita click.
Gimana teman-teman cukup mudah bukan, saya rasa untuk tutorial kali ini tentang menambahkan atribut pada element html dengan method attr pada jquery cukup sampai sini dulu, sampai bertemu lagi pada tutorial jquery berikutnya,
Terima kasih