Belajar JQuery Part 6 : Chaining Function Pada JQuery

Belajar JQuery Chaining Function Pada JQuery
Pada tutorial sebelumnya anda telah mempelajari tutorial-tutorial jquery mengenal jquery dasar, cara penggunaan jquery, mengenal effect dan event pada jquery, dan mengenal callback function pada jquery. pada tutorial belajar jquery chaining function pada jquery ini kita akan mempelajari tentang apa itu chaining function, bagaimana cara kerjanya dan bagaimana cara penulisan chaining function pada jquery. berikut silahkan simak penjelasan tentang pengertian chaining function pada jquery.
Chaining function pada jquery adalah metode menghubungkan action atau method jquery pada sebuah element atau lebih dengan sebuah statement. jadi pada JQuery kita dapat mejalankan banyak event atau method secara sekaligus. berikut ini contoh cara membuat chaining function pada jquery.
Pada contoh ini kita akan membuat sebuah tombol lagi. kenapa di setiap tutorial belajar jquery kita menggunakan tombol untuk contoh, karena metode ini tergolong mudah untuk di pahami pada saat mempelajari jquery dasar. yang di kemudiannya bisa di kembangkan sendiri sesuai keinginan. setelah membuat sebuah tombol kita juga membuat sebuah kotak yang akan kita beri efek ganda atau chaining function.
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>Tutorial belajar JQuery Part 6 : Chaining Function Pada JQuery</title> <script type="text/javascript" src="jquery.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Chaining Function Pada JQuery | www.malasngoding.com</h1> <button id="tombol">KLIK</button> <div class="box"></div> </body> <script type="text/javascript"> $(document).ready(function(){ $('#tombol').click(function(){ $('.box').fadeIn(800).slideUp(900).slideDown(300); }); }); </script> </html> |
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
body{ font-family: sans-serif; } h1{ text-align: center; } .box{ height: 300px; width:300px; background: orange; display: none; } #tombol{ padding:10px; color: #fff; background: #34495E; border: none; } |

belajar jquery chaining function pada jquery
dan perhatikan hasil dari chaining function yang sudah kita buat seperti di atas.
See the Pen GordYo by Malas Ngoding (@malasngoding) on CodePen.
akan di jelaskan sedikit di sini pada contoh belajar jquery chaining function pada jquery ini. perhatikan pada syntax jquery pada contoh.
1 2 3 4 5 |
$(document).ready(function(){ $('#tombol').click(function(){ $('.box').fadeIn(800).slideUp(900).slideDown(300); }); }); |
pada contoh di atas kita memberikan event click pada tombol yang kemudian akan memberikan effect fadeIn(), sildeUp() dan slideDown() sekaligus pada element .box. sekian tutorial belajar jquery chaining function pada jquery.
Tutorial Menarik Lainnya

Membuat Pencarian Tanpa Reload Dengan PHP Dan Ajax JQuery


Membuat Halaman Web Ajax Tanpa Reload dengan JQuery


Show Hide Form Password Dengan JQuery

