Cara Menggunakan Metode Chaining Pada jQuery

Cara Menggunakan Metode Chaining Pada jQuery

Halo teman – teman, apa kabar semuanya..?? Selamat datang di website tips dan triki Dumet School, pada kesempatan kali ini saya akan memberikan tips dan trik tentang Cara Menggunakan Metode Chaining Pada jQuery. Sebelum kita mulai kita akan singgung sedikit tentang metode chaining..??

Metode Chaining memungkinkan kita untuk menjalankan beberapa metode jQuery (dari unsur yang sama) dalam satu pernyataan, dimana dari beberapa fungsi dapat kita gabungkan menjadi satu fungsi. Dengan cara ini, browser tidak harus mencari element yang sama lebih dari sekali. Artinya browser akan menjalankan sekali saja dari metode chaining, latihan kali ini kita akan menggabungkan fungsi dengan urutan  css(), slideUp() , dan slideDown(). Yang nantinya kita gunakan fungsi ini untuk di berikan di tag p yang mempunyai id=”p1″ pertama berubah menjadi merah, lalu slide up, dan kemudian slide down.

Baik lanjut pada tips dan trik Cara Menggunakan Metode Chaining Pada jQuery, teman – teman siapkan text editornya dan ketikkan script html nya seperti gambar di bawah ini

Cara Menggunakan Metode Chaining Pada jQuery

Save dengan nama index.html, langkah berikutnya kita berikan library jQuery nya terlebih dahulu

https://code.jquery.com/jquery-3.2.1.min.js

Baru kita akan berikan metode chaining nya dengan menggabungkan tiga fungsi dalam 3 pernyataan

$(document).ready(function(){
	    $("button").click(function(){
	        $("#p1").css("color", "red");
			$("#p1").slideUp(2000);
			$("#p1").slideDown(2000);
	    });
	});

Cara Menggunakan Metode Chaining Pada jQuery

Jika sudah save dan jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini

Cara Menggunakan Metode Chaining Pada jQuery

Maka jika berhasil, jika di klik maka text “Metode Chaining” akan berubah berwarna merah lalu meluncur keatas dan kemudian meluncur kebawah kembali ke posisi awal, yang berikutnya kita akan menggabungkan dari fungsi .css(), .slideUp() dan .slideDown() menjadi satu pernyataan. Dari script yang kita ketikkan

Cara Menggunakan Metode Chaining Pada jQuery

Kita rubah ke metode chaining menjadi

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

Cara Menggunakan Metode Chaining Pada jQuery

Maka yang terjadi adalah hasilnya akan sama dengan hasil pertama kali kita jalankan, nah itulah metode chining yang memudahkan bagi kita untuk menempatkan fungsi – fungsi ke dalam satu pernyataan. Dengan begitu  dengan menggunakan jQuery kita bisa melakukan apa saja dengan mengkolaborasikan fungsi yang menghasilkan suatu output.

Baik, mungkin sekian pada artikel kali ini tentang Cara Menggunakan Metode Chaining Pada jQuery kita berjumpa kembali pada tips dan trik yang akan datang. Teman – teman bisa eksperimen sendiri ya dengan metode chining supaya lebih terbiasa dalam menggabungkan fungsi – fungsi pada jQuery. Terimakasih dan Sampai Jumpa.

Cara Menggunakan Fungsi children Pada jQuery

Cara Menggunakan Fungsi children Pada jQuery

Selamat datang pada website tips dan trik Dumet School, pada artikel sebelumnya kita sudah membahas tentang beberapa fungsi – fungsi yang ada pada jQuery. Dan pada kesempatan kali ini juga kita masih membahas dan mengimplementasikan fungsi – fungsi yang ada pada jQuery yaitu tentang Cara Menggunakan Fungsi children Pada jQuery. Tentunya kalian tahu arti kata children jika di terjemahkan ke bahas indonesia adalah anak – anak, (more…)