j Query is easy to learn j Query

j. Query is easy to learn. j. Query is a Java. Script Library. j. Query greatly simplifies Java. Script programming.

Pendahuluan j. Query merupakan javascript library Sebelum mempelajari j. Query minimal harus mengetahui tentang HTML, CSS, Javascript , HTML DOM. Menambahkan library j. Query kedalam halaman web kita : 3/17/2018 By : Suwondo, S. Kom 2

j. Query Syntax dasar : $(selector). action() tanda dollar ($) mendefinisikan j. Query ü 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" 3/17/2018 By : Suwondo, S. Kom 3

j. Query Syntax Atau syntax j. Query bisa dituliskan juga : $(document). ready(function(){ // j. Query functions go here. . . }); 3/17/2018 By : Suwondo, S. Kom 4

j. Query Selector merupakan element dari HTML 3/17/2018 By : Suwondo, S. Kom 5

j. Query Event Berikut contoh dari beberapa Event 3/17/2018 By : Suwondo, S. Kom 6

j. Query Event Contoh penggunaan Event :

Test Event j. Query

j. Query 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(); }); 3/17/2018 By : Suwondo, S. Kom 8

j. Query 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(); }); 3/17/2018 By : Suwondo, S. Kom 9

j. Query Effect slide. Up([speed], [callback]) Menampilkan element ke atas secara slide. Down([speed], [callback]) Menampilkan element ke bawah secara slide. Toggle([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"). slide. Down(); }); $(". flip"). click(function(){ $(". panel"). slide. Up() }); $(". flip"). click(function(){ $(". panel"). slide. Toggle(); }); 3/17/2018 By : Suwondo, S. Kom 10

j. Query Effect fade. In([speed], [callback]) Merubah kecerahan sebuah element dengan efek fade masuk. fade. Out([speed], [callback]) Merubah kecerahan sebuah element dengan efek fade keluar. fade. To([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"). fade. To("slow", 0. 25); }); $("button"). click(function(){ $("div"). fade. Out(4000); }); 3/17/2018 By : Suwondo, S. Kom 11

j. Query 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 : 3/17/2018 By : Suwondo, S. Kom 12

j. Query Callback digunakan untuk memanggil function lain setelah effect di jalankan. Contoh : $("p"). hide(1000, function(){ alert("The paragraph is now hidden"); }); 3/17/2018 By : Suwondo, S. Kom 13

j. Query HTML html(content) Digunakan untuk merubah isi konten (inner. HTML) dari sebuah element HTML. Contoh : $("p"). html("W 3 Schools"); append(content) Digunakan untuk menambahkan isi kontent di depan konten yang sudah ada. Contoh : $("p"). append(" W 3 Schools"); prepend(content) Digunakan untuk menambahkan isi kontent di belakang konten yang sudah ada. Contoh : $("p"). prepend(" W 3 Schools"); 3/17/2018 By : Suwondo, S. Kom 14

j. Query HTML after(content) Digunakan untuk menambahkan html setelah element. Contoh : $("p"). after(" W 3 Schools"); before(content) Digunakan untuk menambahkan html sebelum element. Contoh : $("p"). before(" W 3 Schools"); 3/17/2018 By : Suwondo, S. Kom 15

j. Query CSS css digunakan untuk memanipulasi css pada halaman dengan menggunakan j. Query. css(name) digunakan untuk mengembalikan nilai property dari 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%"}); 3/17/2018 By : Suwondo, S. Kom 16

j. Query CSS height(value) untuk mengeset tinggi dari element yang cocok. width(value) untuk mengeset lebar dari element yang cocok. Contoh : $("#div 1"). height("200 px"); $("#div 2"). width("300 px"); 3/17/2018 By : Suwondo, S. Kom 17

j. Query 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. 3/17/2018 By : Suwondo, S. Kom 18