Halo selamat datang kembali di website tips dan trik Dumet School, pada kesempatan kali ini kita masih lanjutkan pada artikel sebelumnya yang membahas tentang fungsi – fungsi pada jQuery. Nah kali ini kita akan belajar tentang Cara Menggunakan Fungsi click dan clone Pada jQuery dimana fungsi ini banyak sekali digunakan oleh para designer website. Untuk fungsi .click() sendiri di dalam jQuery berfungsi untuk klik pada mouse, jika di klik maka baris program di dalamnya akan di jalankan. Kemudian untuk fungsi .clone() atau biasa kita artikan sebagai duplikasi dari yang asli juga ada di dalam fungsi jQuery, berfungsi untuk kloning atau menduplikasi.
Baik, selanjutnya kita implementasikan Cara Menggunakan Fungsi click dan clone Pada jQuery dengan studi case yang sederhana terlebih dahulu. Pastikan teman – teman menyiapkan text editornya, dan ketikkan script html nya sepeti gambar di bawah ini
Save dengan nama index.html, kemudian masukkan css nya untuk membedakan hasilnya nanti
<style><br> p {<br> color: red;<br> margin: 5px;<br> cursor: pointer;<br> }<br> p:hover {<br> background: yellow;<br> }<br> </style>
Jika sudah save dan jalankan pada browsernya, maka hasil sementara seperti gambar di bawah ini
Jika mouse di arahkan maka ada hover background warna kuning, langkah berikutnya kita berikan fungsi .click() nya, sebelumnya berikan terlebih dahulu library jQuery nya di dalam tag head
Kemudian masukkan script jQuery nya di bawah ini
<script><br>$( "p" ).click(function() {<br> $( this ).css({"background":"green"});<br>});<br></script>
Jika sudah save dan refresh pada browsernya, jika berhasil maka jika di klik pada paragraf akan di berikan background berwarna hijau.
Langkah berikutnya kita tambahkan fungsi .clone(), teman – teman tambahkan tag html
Kemudian tambahkan fungsi .clone() nya
$( "b" ).clone().prependTo( "p" );
Jika sudah save dan refresh, maka tag b akan di duplikat dan tampil berada sebelum tag p
Bangaimana, sangat mudah bukan..??
Baik sekian pada tips dan trik kali ini tentang Cara Menggunakan Fungsi click dan clone Pada jQuery kita berjumpa kembali pada artikel yang akan datang, mudah – mudahan tips dan trik kali ini bermanfaat untuk teman – teman yang khusus nya baru belajar jQuery dan menjadi tambahan pengetahuannya untuk jQuery nya.
Terimakasih dan Sampai Jumpa.