Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

JQuery. Pendahuluan  jQuery merupakan javascript library  Sebelum mempelajari jQuery minimal harus mengetahui tentang HTML, CSS, Javascript, HTML DOM.

Presentasi serupa


Presentasi berjudul: "JQuery. Pendahuluan  jQuery merupakan javascript library  Sebelum mempelajari jQuery minimal harus mengetahui tentang HTML, CSS, Javascript, HTML DOM."— Transcript presentasi:

1 jQuery

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 : 6/26/20142By : Suwondo, S.Kom

3 jQuery Syntax Syntax dasar : $(selector).action()  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" 6/26/2014By : Suwondo, S.Kom3

4 jQuery Syntax Atau syntax jQuery bisa dituliskan juga : $(document).ready(function(){ // jQuery functions go here... }); 6/26/2014By : Suwondo, S.Kom4

5 jQuery Selector Selector merupakan element dari HTML 6/26/2014By : Suwondo, S.Kom5

6 jQuery Event Berikut contoh dari beberapa Event 6/26/2014By : Suwondo, S.Kom6

7 jQuery Event Contoh penggunaan Event : $(“p”).click(function(){ $(“p”).hide(); }); Test Event jQuery 6/26/2014By : Suwondo, S.Kom7

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(); }); 6/26/2014By : Suwondo, S.Kom8

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(); }); 6/26/2014By : Suwondo, S.Kom9

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(); }); 6/26/2014By : Suwondo, S.Kom10

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); }); 6/26/2014By : Suwondo, S.Kom11

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 : $(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"); }); }); 6/26/2014By : Suwondo, S.Kom12

13 jQuery Callback Callback digunakan untuk memanggil function lain setelah effect di jalankan. Contoh : $("p").hide(1000,function(){ alert("The paragraph is now hidden"); }); 6/26/2014By : Suwondo, S.Kom13

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. Contoh : $("p").append(" W3Schools"); prepend(content) Digunakan untuk menambahkan isi kontent di belakang konten yang sudah ada. Contoh : $("p").prepend(" W3Schools"); 6/26/2014By : Suwondo, S.Kom14

15 jQuery HTML after(content) Digunakan untuk menambahkan html setelah element. Contoh : $("p").after(" W3Schools"); before(content) Digunakan untuk menambahkan html sebelum element. Contoh : $("p").before(" W3Schools"); 6/26/2014By : Suwondo, S.Kom15

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%"}); 6/26/2014By : Suwondo, S.Kom16

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"); 6/26/2014By : Suwondo, S.Kom17

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. 6/26/2014By : Suwondo, S.Kom18


Download ppt "JQuery. Pendahuluan  jQuery merupakan javascript library  Sebelum mempelajari jQuery minimal harus mengetahui tentang HTML, CSS, Javascript, HTML DOM."

Presentasi serupa


Iklan oleh Google