4/3/2017 By : Suwondo, S.Kom"> 4/3/2017 By : Suwondo, S.Kom">

Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

jQuery is a JavaScript Library.

Presentasi serupa


Presentasi berjudul: "jQuery is a JavaScript Library."— Transcript presentasi:

1 jQuery is a JavaScript Library.
jQuery is easy to learn. jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.

2 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

3 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

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

5 jQuery Selector Selector merupakan element dari HTML 4/3/2017
By : Suwondo, S.Kom

6 jQuery Event Berikut contoh dari beberapa Event 4/3/2017
By : Suwondo, S.Kom

7 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

8 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

9 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

10 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

11 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

12 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

13 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

14 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

15 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

16 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

17 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

18 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


Download ppt "jQuery is a JavaScript Library."

Presentasi serupa


Iklan oleh Google