#JQuery - #JQuery Dasar

Belajar JQuery Part 6 : Chaining Function Pada JQuery

Notice: Trying to access array offset on value of type null in /home/u5799550/public_html/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Notice: Trying to access array offset on value of type null in /home/u5799550/public_html/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

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

<!DOCTYPE html>

<html>

<head>

<title>Tutorial belajar JQuery Part 6 : Chaining Function Pada JQuery</title>

</head>

<body>

<h1>Chaining Function Pada JQuery | www.malasngoding.com</h1>

</body>

$(document).ready(function(){

$('#tombol').click(function(){

$('.box').fadeIn(800).slideUp(900).slideDown(300);

});

</script>

</html>

style.css

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.0

akan di jelaskan sedikit di sini pada contoh belajar jquery chaining function pada jquery ini. perhatikan pada syntax jquery pada contoh.

Referensi source code untuk belajar

Source Code Sistem Informasi Inventaris Sekolah Dengan PHP dan MySQLi

$(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.

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.