jQuery is a JavaScript Library. jQuery is easy to learn. jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.
Pendahuluan jQuery merupakan javascript library Sebelum mempelajari jQuery minimal harus mengetahui tentang HTML, CSS, Javascript , HTML DOM. Menambahkan library jQuery kedalam halaman web kita : <head> <script type="text/javascript" src="jquery.js"></script> </head> 4/3/2017 By : Suwondo, S.Kom
jQuery Syntax $(selector).action() Syntax dasar : tanda dollar ($) mendefinisikan jQuery Selector merupakan element HTML action() merupakan aksi yang dikerjakan untuk elemen – elemen HTML Contoh : $(this).hide() - menyembunyikan element ini $("p").hide() – menyembunyikan semua paragraphs $("p.test").hide() – menyembunyikan semua paragraphs dengan class="test" $("#test").hide() - menyembunyikan element dengan id="test" 4/3/2017 By : Suwondo, S.Kom
jQuery Syntax Atau syntax jQuery bisa dituliskan juga : $(document).ready(function(){ // jQuery functions go here... }); 4/3/2017 By : Suwondo, S.Kom
jQuery Selector Selector merupakan element dari HTML 4/3/2017 By : Suwondo, S.Kom
jQuery Event Berikut contoh dari beberapa Event 4/3/2017 By : Suwondo, S.Kom
jQuery Event Contoh penggunaan Event : <html> <head> <script type=“text/javascript” src=“jquery.js”></script> <script language=“javascript”> $(“p”).click(function(){ $(“p”).hide(); }); </script> </head> <body> <p>Test Event jQuery</p> </body> </html> 4/3/2017 By : Suwondo, S.Kom
jQuery Effect hide([speed], [callback]) Untuk menyembunyikan element. show([speed], [callback]) Untuk menampilkan element Speed value : “slow”, “fast”, “normal” atau milisecond. Callback memanggil function lain setelah dilakukan penyembunyian atau penampakan dari element. Contoh : $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); 4/3/2017 By : Suwondo, S.Kom
jQuery Effect toggle([speed], [callback]) Digunakan untuk menyembunyikan dan menampilkan element secara bergantian. Speed value : “slow”, “fast”, “normal” atau milisecond. Callback memanggil function lain setelah dilakukan penyembunyian atau penampakan dari element. Contoh : $("button").click(function(){ $("p").toggle(); }); 4/3/2017 By : Suwondo, S.Kom
jQuery Effect slideUp([speed], [callback]) Menampilkan element ke atas secara slide. slideDown([speed], [callback]) Menampilkan element ke bawah secara slide. slideToggle([speed], [callback]) Menampilkan element ke atas dan ke bawah secara slide dan bergantian. Speed value : “slow”, “fast”, “normal” atau milisecond. Callback memanggil function lain setelah slide di jalankan. Contoh : $(".flip").click(function(){ $(".panel").slideDown(); }); $(".flip").click(function(){ $(".panel").slideUp() }); $(".flip").click(function(){ $(".panel").slideToggle(); }); 4/3/2017 By : Suwondo, S.Kom
jQuery Effect fadeIn([speed], [callback]) Merubah kecerahan sebuah element dengan efek fade masuk. fadeOut([speed], [callback]) Merubah kecerahan sebuah element dengan efek fade keluar. fadeTo([speed], [opacity], [callback]) Merubah kecerahan sebuah element dengan tingkat opacity tertentu. Speed value : “slow”, “fast”, “normal” atau milisecond. Callback untuk memanggil function tertentu setelah efek fade di jalankan. Contoh : $("button").click(function(){ $("div").fadeTo("slow",0.25); }); $("button").click(function(){ $("div").fadeOut(4000); }); 4/3/2017 By : Suwondo, S.Kom
jQuery Effect animate({params}, [duration], [easing], [callback]) Digunakan untuk membuat animasi yang dapat ditentukan sendiri. Params : terdiri dari property CSS dan nilainya. Duration : “slow”, “fast”, “normal” atau milisecond. Easing : swing, linear. Callback akan memanggil function lain setelah animate dijalankan. Contoh : <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").animate({height:300},"slow"); $("div").animate({width:300},"slow"); $("div").animate({height:100},"slow"); $("div").animate({width:100},"slow"); }); }); </script> 4/3/2017 By : Suwondo, S.Kom
jQuery Callback Callback digunakan untuk memanggil function lain setelah effect di jalankan. Contoh : $("p").hide(1000,function(){ alert("The paragraph is now hidden"); }); 4/3/2017 By : Suwondo, S.Kom
jQuery HTML html(content) Digunakan untuk merubah isi konten (innerHTML) dari sebuah element HTML. Contoh : $("p").html("W3Schools"); append(content) Digunakan untuk menambahkan isi kontent di depan konten yang sudah ada. $("p").append(" W3Schools"); prepend(content) Digunakan untuk menambahkan isi kontent di belakang konten yang sudah ada. $("p").prepend(" W3Schools"); 4/3/2017 By : Suwondo, S.Kom
jQuery HTML after(content) Digunakan untuk menambahkan html setelah element. Contoh : $("p").after(" W3Schools"); before(content) Digunakan untuk menambahkan html sebelum element. $("p").before(" W3Schools"); 4/3/2017 By : Suwondo, S.Kom
jQuery CSS css digunakan untuk memanipulasi css pada halaman dengan menggunakan jQuery. css(name) digunakan untuk mengembalikan nilai property dari css. css(name, value) mengeset property CSS dan nilai nya. css({properties}) mengeset property CSS dan nilai nya lebih dari satu (multiple). Contoh : $(this).css("background-color"); $("p").css("background-color","yellow"); $("p").css({"background-color":"yellow","font-size":"200%"}); 4/3/2017 By : Suwondo, S.Kom
jQuery CSS height(value) untuk mengeset tinggi dari element yang cocok. width(value) untuk mengeset lebar dari element yang cocok. Contoh : $("#div1").height("200px"); $("#div2").width("300px"); 4/3/2017 By : Suwondo, S.Kom
jQuery AJAX load(url, [data], [callback]) Merupakan method sederhana untuk memuat Ajax. url halaman web untuk data. Data data yang akan dikirimkan ke server. Jika tidak ada dikosongi. Callback function yang akan dipanggil setelah proses load. Atau jika tidak ada dikosongi. 4/3/2017 By : Suwondo, S.Kom