Penggunaan JQuery
Download as PPTX, PDF•0 likes•584 views
jQuery adalah library JavaScript yang dikembangkan oleh John Resig pada tahun 2005 untuk menyederhanakan penulisan kode JavaScript. jQuery memudahkan manipulasi elemen HTML, penanganan event, dan efek-efek animasi dengan menggunakan sintaks yang lebih sederhana. Berbagai plugin jQuery, seperti jqzoom dan eogallery, memperluas fungsionalitasnya untuk menampilkan galeri gambar dan efek visual lainnya.
![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".](https://image.slidesharecdn.com/penggunaanjquery-131205212253-phpapp02/85/Penggunaan-JQuery-7-320.jpg)
Penggunaan JQuery
- 2. 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
- 3. 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.
- 4. 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
- 5. JQUERY SELECTOR JQuery Element Selectors JQuery Selector JQuery Attribute Selectors
- 6. 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".
- 7. 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".
- 8. 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);
- 9. 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).
- 10. 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
- 11. 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>
- 12. 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.
- 13. 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
- 14. 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.
- 15. 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.
- 16. 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.
- 17. SIMPLE CONTROL GALLERY Untuk menambahkan kemampuan menampilkan galeri gambar saja setelah semua gambar dalam galeri telah dimuat. Mesin ini membutuhkan jQuery 1.5 +.
- 18. 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.
- 19. 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.
- 20. PHOTO ALBUM SCRIPT Photo Album skrip sangat ideal untuk menampilkan beberapa gambar sekaligus, dengan link ke siklus melalui batch tambahan yang berupa gambar.
- 21. 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.
- 22. 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.
- 23. 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.
- 24. 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.
- 25. 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.
- 26. 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".
- 27. 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.
- 28. 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.
- 29. JQUERY FLICK GALLERY FlickrGallery adalah plugin jQuery yang menyediakan cara untuk menanamkan gambar flickr ke situs web. Fitur ini membutuhkan jQuery dan style sheet.
- 30. JQUERY GALLERIA Galleria adalah gambar kerangka galeri JavaScript yang menyederhanakan proses menciptakan galeri gambar yang indah untuk web dan perangkat mobile.
- 31. 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.