Your SlideShare is downloading. ×
0
SEJARAH JQUERY
Jquery Pertama kali dikembangkan oleh Jhon Resig pertama
kali pada tahun 2005, saat itu dia terinspirasi da...
APA ITU JQUERY ?
jQuery merupakan javascript Library atau kumpulan
kode / fungsi Javascript siap pakai, sehingga
mempermud...
APA SAJA YANG ADA DALAM
JQUERY ?
1.
2.
3.
4.
5.
6.
7.
8.

Kemudahan mengakses elemen-elemen HTML
Memanipulasi elemen HTML
...
JQUERY SELECTOR

JQuery Element
Selectors
JQuery Selector

JQuery Attribute
Selectors
JQUERY ELEMENT SELECTORS
jQuery mirip CSS dalam hal memilih elemen HTML. Berikut
contohnya :
$("p") memilih semua elemen <...
JQUERY ATTRIBUTE SELECTORS
JQuery mirip XPath dalam hal memilih elemen berdasarkan atribut
yang ada. Berikut contohnya :
$...
JQUERY ENENT
Hampir-hampir mirip dengan Visual Basic, biasanya suatu kode
dijalankan apabila ada sesuatu yang terjadi (eve...
JQUERY EFFECT
Salah satu kemampuan jquery adalah, adanya fungsifungsi efek yang siap pakai. Biasanya untuk
membuat efek me...
MACAM-MACAM JQUERY
SLIDESHOW
1.
2.
3.
4.
5.
6.

JQZoom Evolution
JQuery EOGallery
JQuery Dynamic Drive Image Gallery
JQuer...
JQZOOM EVOLUTION
jQzoom adalah script yang besar dan sangat mudah
digunakan untuk memperbesar apa yang Anda inginkan.
Cont...
JQUERY EOGALLERY
EOGallery adalah slideshow galeri animasi Web yang dibuat
dengan jQuery . Hanya menggunakan fungsi jQuery...
JQUERY DYNAMIC DRIVE IMAGE
GALLERY
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

Lightbox image viewer
Lightbox Gamb...
LIGHTBOX IMAGE VIEWER
Lightbox JS adalah, skrip mencolok yang
berbasis elegan untuk melapisi versi yang lebih
besar dari g...
LIGHTBOX GAMBAR PENAMPIL
V2.03A
Lightbox Image Viewer 2.0 memperluas dari versi
sebelumnya yaitu Lightbox Image Viewer den...
FACEBOX IMAGE AND CONTENT
VIEWER
Facebox adalah lightbox Facebook gaya
ringan yang dapat menampilkan
gambar, divs, atau se...
SIMPLE CONTROL GALLERY

Untuk menambahkan kemampuan
menampilkan galeri gambar saja setelah
semua gambar dalam galeri telah...
TOUCH IMAGE GALLERY
Touch Image Gallery adalah galeri gambar
sederhana yang melayani browser mobile dan
sejenisnya, dengan...
TOOLTIP DESCRIPTION
Penggunaan Tooltip Description adalah dengan Gerakkan
mouse di atas link dan muncul gambar yang telah ...
PHOTO ALBUM SCRIPT

Photo Album skrip sangat ideal untuk
menampilkan beberapa gambar sekaligus,
dengan link ke siklus mela...
PHP PHOTO ALBUM SCRIPT
PHP Photo Album Script adalah Photo Album
yang ditingkatkan script PHPnya untuk
mengotomatisasi pen...
LANGKAH CAROUSEL VIEWER
Langkah Carousel Viewer menampilkan gambar atau
HTML bahkan sisi-sisinya dapat bergulir ke kiri at...
FROGJS GALLERY
FrogJS adalah galeri foto sekuensial yang mendukung
deskripsi opsional dan link untuk masing-masing gambar....
CMOTION GALLERY
CMotion Image Gallery adalah galeri skrip serbaguna
yang menggunakan input paling intuitif, mouse
pengguna...
CMOTION GALLERY II
CMotion Galeri II didasarkan pada pendahulunya Cmotion
Gallery skrip, dimodifikasi oleh jscheuer1 untuk...
THUMBNAIL IMAGE VIEWER
Thumbnail Image Viewer adalah penampil gambar
sederhana yang dapat diterapkan untuk setiap link
pad...
THUMBNAIL IMAGE VIEWER II
Serupa dengan fungsi pendahulunya Thumbnail
Image Viewer, script ini dapat menampilkan
gambar ya...
CHOICE DYNAMIC IMAGE
Choice Dynamic Image adalah pemilih gambar
yang memungkinkan browser untuk melihat
gambar dengan memi...
JQUERY FLICK GALLERY

FlickrGallery adalah plugin jQuery yang
menyediakan cara untuk menanamkan
gambar flickr ke situs web...
JQUERY GALLERIA

Galleria adalah gambar kerangka galeri
JavaScript yang menyederhanakan
proses menciptakan galeri gambar y...
JQUERY GALLERY VIEW
Gallery View adalah upaya untuk menuliskan sebuah plugin
tunggal yang mampu menciptakan berbagai jenis...
Penggunaan JQuery
Penggunaan JQuery
Upcoming SlideShare
Loading in...5
×

Penggunaan JQuery

267

Published on

informasi tentang penggunaan JQuery

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
267
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Penggunaan JQuery"

  1. 1. SEJARAH JQUERY Jquery Pertama kali dikembangkan oleh Jhon Resig pertama kali pada tahun 2005, saat itu dia terinspirasi dari kode Behavior, ketika itu Jhon merasa kode kode behavior tidak elegan dan bahkan sangat jelek, kemudian dia mulai memikirkan cara membuat library yang bagus dan ringan untuk javascript. Kemudian terciptalah JQuery dan dirilis pertama kali pada tahun 2006
  2. 2. APA ITU JQUERY ? jQuery merupakan javascript Library atau kumpulan kode / fungsi Javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript. Secara standar, apabila kita membuat kode Javascript, maka diperlukan kode yang cukup panjang, bahkan terkadang sangat sulit dipahami, misalnya fungsi Javascript untuk membuat stripe (warna selang-seling) pada baris suatu table.
  3. 3. APA SAJA YANG ADA DALAM JQUERY ? 1. 2. 3. 4. 5. 6. 7. 8. Kemudahan mengakses elemen-elemen HTML Memanipulasi elemen HTML Memanipulasi CSS Penanganan event HTML Efek-efek javascript dan animasi Modifikasi HTML DOM AJAX Menyederhanakan kode javascript lainnya
  4. 4. JQUERY SELECTOR JQuery Element Selectors JQuery Selector JQuery Attribute Selectors
  5. 5. JQUERY ELEMENT SELECTORS jQuery mirip CSS dalam hal memilih elemen HTML. Berikut contohnya : $("p") memilih semua elemen <p> $("p.intro") memilih semua elemen <p> yang mempunyai class="intro". $("p#demo") memilih elemen <p> yang mempunyai id="demo".
  6. 6. JQUERY ATTRIBUTE SELECTORS JQuery mirip XPath dalam hal memilih elemen berdasarkan atribut yang ada. Berikut contohnya : $("[href]") memilih semua elemen dengan atribut href. $("[href='#']") memilih semua elemen dengan atribut href bernilai="#". $("[href!='#']") memilih semua elemen dengan atribut href dengan nilai bukan sama dengan "#". $("[href$='.jpg']") memilih semua elemen dengan atribut href yang mengandung ".jpg".
  7. 7. JQUERY ENENT Hampir-hampir mirip dengan Visual Basic, biasanya suatu kode dijalankan apabila ada sesuatu yang terjadi (event) pada suatu elemen. Misalnya, kalau ada tombol di klik, maka action atau kode apa yang dijalankan, apabila ada combox dipilih, kode apa yang dijalankan, pada contoh jquery sebelumnya : $(".tombol1").click(function(){ $("p").hide(1000);
  8. 8. JQUERY EFFECT Salah satu kemampuan jquery adalah, adanya fungsifungsi efek yang siap pakai. Biasanya untuk membuat efek memudar di javascript, kita harus membuat kode yang lumayan panjang. Tapi dengan menggunakan jquery cukup menggunakan fungsi $(selector).
  9. 9. MACAM-MACAM JQUERY SLIDESHOW 1. 2. 3. 4. 5. 6. JQZoom Evolution JQuery EOGallery JQuery Dynamic Drive Image Gallery JQuery Flick Gallery JQuery Galleria JQuery Gallery View
  10. 10. JQZOOM EVOLUTION jQzoom adalah script yang besar dan sangat mudah digunakan untuk memperbesar apa yang Anda inginkan. Contoh scriptnya adalah sebagai berikut: 01. <a href="images/BIGIMAGE.JPG" class="MYCLASS" title=" MYTITLE"> 02. <img src="images/SMALLIMAGE.JPG" title="IMAGE TIT LE"> 03. 04. </a>
  11. 11. JQUERY EOGALLERY EOGallery adalah slideshow galeri animasi Web yang dibuat dengan jQuery . Hanya menggunakan fungsi jQuery Dasar dan Cody Lindley Thickbox untuk menampilkan gambar yang lebih besar. EOGallery adalah XHTML 1.0 dan mirip dengan CSS , telah diuji pada Firefox, Safari, Bahkan Internet Explorer 6 dan bekerja dengan non-JavaScript dan / atau browser non-CSS. EOGallery dibuat untuk tujuan pengujian, mungkin ada bug dan system aneh yang tidak kita ketahui.
  12. 12. JQUERY DYNAMIC DRIVE IMAGE GALLERY 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. Lightbox image viewer Lightbox Gambar penampil v2.03a Facebox Image and Content Viewer Simple Control Gallery Touch Image Gallery Tooltip Description Photo Album Script PHP Photo Album Script Langkah Carousel Viewer FrogJS Gallery CMotion Gallery Cmotion Gallery II Thumbnail Image Viewer Thumbnail Image Viewer II Choice Dynamic Image
  13. 13. LIGHTBOX IMAGE VIEWER Lightbox JS adalah, skrip mencolok yang berbasis elegan untuk melapisi versi yang lebih besar dari gambar di halaman web untuk layar pada saat klik gambar kecil. Ini snap untuk mengatur dan bekerja pada semua browser modern.
  14. 14. LIGHTBOX GAMBAR PENAMPIL V2.03A Lightbox Image Viewer 2.0 memperluas dari versi sebelumnya yaitu Lightbox Image Viewer dengan beberapa fitur baru. Jika versi aslinya sangat bagus untuk melihat gambar secara individual pada halaman, Lightbox 2.0 mendukung "pengelompokan" fitur baru yang memungkinkan untuk mengelompokkan gambar terkait pada halaman untuk browsing.
  15. 15. FACEBOX IMAGE AND CONTENT VIEWER Facebox adalah lightbox Facebook gaya ringan yang dapat menampilkan gambar, divs, atau seluruh halaman jarak jauh (melalui Ajax) inline pada halaman dan on demand. Facebox menggunakan compact JQuery library sebagai mesin sistemnya, tidak seperti Lightbox v2.0 , yang menggunakan Prototype.
  16. 16. SIMPLE CONTROL GALLERY Untuk menambahkan kemampuan menampilkan galeri gambar saja setelah semua gambar dalam galeri telah dimuat. Mesin ini membutuhkan jQuery 1.5 +.
  17. 17. TOUCH IMAGE GALLERY Touch Image Gallery adalah galeri gambar sederhana yang melayani browser mobile dan sejenisnya, dengan menyentuh / menggesek, selain cara tradisional navigasi. Galeri bisa dinavigasi dengan cara intuitif.
  18. 18. TOOLTIP DESCRIPTION Penggunaan Tooltip Description adalah dengan Gerakkan mouse di atas link dan muncul gambar yang telah dipilih ditambah deskripsi yang sesuai pop up, dengan menggunakan skrip tooltip. Setiap tooltip didefinisikan dalam naskah kemudian dikaitkan dengan elemen pada halaman dengan memasukkan " rel "atribut ke dalamnya. Selain itu, setiap tooltip dapat dengan mudah bergantiganti gaya yang membedakan satu dengan yang lainnya.
  19. 19. PHOTO ALBUM SCRIPT Photo Album skrip sangat ideal untuk menampilkan beberapa gambar sekaligus, dengan link ke siklus melalui batch tambahan yang berupa gambar.
  20. 20. PHP PHOTO ALBUM SCRIPT PHP Photo Album Script adalah Photo Album yang ditingkatkan script PHPnya untuk mengotomatisasi pengambilan semua gambar dalam direktori tertentu untuk penunjukan. Dengan link pagination dihasilkan untuk siklus melalui setiap halaman.
  21. 21. LANGKAH CAROUSEL VIEWER Langkah Carousel Viewer menampilkan gambar atau HTML bahkan sisi-sisinya dapat bergulir ke kiri atau kanan. Pengguna dapat melangkah untuk setiap panel khusus pada permintaan, atau menelusuri galeri berurutan dengan melangkah melalui x jumlah panel. Sebuah animasi geser halus digunakan untuk transisi antar langkah.
  22. 22. FROGJS GALLERY FrogJS adalah galeri foto sekuensial yang mendukung deskripsi opsional dan link untuk masing-masing gambar. Jika melihat gambar secara berurutan, dengan mengklik thumbnail gambar sebelumnya dan berikutnya. Setiap slide gambar didefinisikan sebagai HTML yang biasa terkandung dalam DIV tag khusus pada halaman, sehingga sangat mudah untuk menyiapkan opsi yang termasuk deskripsi sesuai dan link.
  23. 23. CMOTION GALLERY CMotion Image Gallery adalah galeri skrip serbaguna yang menggunakan input paling intuitif, mouse pengguna untuk mengontrol itu. Pengguna dapat mengarahkan kedua arah scrolling gambar dan kecepatan hanya dengan menempatkan mouse di kedua spektrum dari galeri gambar.
  24. 24. CMOTION GALLERY II CMotion Galeri II didasarkan pada pendahulunya Cmotion Gallery skrip, dimodifikasi oleh jscheuer1 untuk orientasi vertical. Skrip ini menggunakan input perancangan yang paling intuitif, Mouse pengguna untuk mengontrol aksi bergulirnya halaman. Pengguna dapat mengarahkan kedua arah scrolling gambar dan kecepatan hanya dengan menempatkan mouse di kedua spektrum dari galeri gambar.
  25. 25. THUMBNAIL IMAGE VIEWER Thumbnail Image Viewer adalah penampil gambar sederhana yang dapat diterapkan untuk setiap link pada halaman untuk memuat gambar yang diinginkan dalam bentuk kecil berdasarkan pada link itu "href" nilai. Cukup memberikan link dalam pertanyaan baik itu text link atau thumbnail image link-a rel atribut "thumbnail".
  26. 26. THUMBNAIL IMAGE VIEWER II Serupa dengan fungsi pendahulunya Thumbnail Image Viewer, script ini dapat menampilkan gambar yang lebih besar saat thumbnail diklik dan berguling. Ini dapat dimanfaatkan untuk membiarkan pengunjung meninjau dari banyak gambar yang kemudian pilih gambar pilihan untuk melihat pada halaman yang sama.
  27. 27. CHOICE DYNAMIC IMAGE Choice Dynamic Image adalah pemilih gambar yang memungkinkan browser untuk melihat gambar dengan memilihnya dari daftar seleksi. Ini adalah dinamis dalam bahwa gambar TIDAK harus menjadi dimensi yang sama, pembatasan gambar script yang dimiliki pengunjung.
  28. 28. JQUERY FLICK GALLERY FlickrGallery adalah plugin jQuery yang menyediakan cara untuk menanamkan gambar flickr ke situs web. Fitur ini membutuhkan jQuery dan style sheet.
  29. 29. JQUERY GALLERIA Galleria adalah gambar kerangka galeri JavaScript yang menyederhanakan proses menciptakan galeri gambar yang indah untuk web dan perangkat mobile.
  30. 30. JQUERY GALLERY VIEW Gallery View adalah upaya untuk menuliskan sebuah plugin tunggal yang mampu menciptakan berbagai jenis galeri. Tujuan gallery view adalah untuk menyediakan serangkaian pilihan untuk pengguna. Pengguna tidak hanya akan dapat menyesuaikan ukuran foto dan thumbnail, dan kecepatan transisi, tetapi ia juga akan memiliki kebebasan untuk memilih dari pilihan posisi elemen, gaya transisi dan fitur lainnya.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×