fundamental jquery
DESCRIPTION
Materi training Fundamental JQueryTRANSCRIPT
![Page 1: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/1.jpg)
Fundamental JQueryTRAINING HARI #3 – ACHMAD SOLICHIN (@ACHMATIM)
![Page 2: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/2.jpg)
Agenda Apa itu JQuery?
jQuery Basics
Animating, Scrolling, Resizing
Image and Slideshow
Forms
![Page 3: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/3.jpg)
Apa itu JQuery?
![Page 4: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/4.jpg)
Apa itu JQuery?jQuery is a fast, small, and feature-rich JavaScript library. It makes things likeHTML document traversal and manipulation, event handling, animation, and Ajaxmuch simpler with an easy-to-use API that works across a multitude of browsers.With a combination of versatility and extensibility, jQuery has changed the waythat millions of people write JavaScript. (http://jquery.com)
![Page 5: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/5.jpg)
JQuery Usage Statistics
Sumber: http://trends.builtwith.com/javascript/
![Page 6: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/6.jpg)
Mengapa JQuery? Mengakses bagian halaman tertentu dengan mudah.
Dapat mengubah tampilan bagian halaman tertentu saja.
Mengubah isi dari halaman.
Merespond interaksi user dalam halaman
Menambahkan animasi ke halaman
Mengambil informasi dari server tanpa me-refresh seluruh halaman
Menyederhanakan penulisan Javascript biasa.
![Page 7: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/7.jpg)
Kegunaan JQuery Mengakses bagian halaman tertentu dengan mudah.
Dapat mengubah tampilan bagian halaman tertentu saja.
Mengubah isi dari halaman.
Merespond interaksi user dalam halaman
Menambahkan animasi ke halaman
Mengambil informasi dari server tanpa me-refresh seluruh halaman
Menyederhanakan penulisan Javascript biasa.
![Page 8: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/8.jpg)
JQuery Basics
![Page 9: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/9.jpg)
Download dan Install Download
http://jquery.com
Install (local)
<script src=“path/to/jquery.js”></script>
Install (CDN) – Content Delivery Network
<script src=“http://code.jquery.com/jquery.js”></script>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/
jquery.min.js”></script>
![Page 10: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/10.jpg)
Struktur JQuery
![Page 11: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/11.jpg)
Document Object Model (DOM)
![Page 12: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/12.jpg)
JQuery Hello World!$(document).ready(function() {
alert('Hello World!');
});
$(function() {
alert('Ready to do your bidding!');
});
![Page 13: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/13.jpg)
Selector Tag
$(‘h2’)
ID
$(‘#celebs’)
Class
$(‘.data’)
![Page 14: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/14.jpg)
Selector
![Page 15: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/15.jpg)
Contoh
![Page 16: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/16.jpg)
jQuery dan CSS Membaca Property CSS
Mengubah Property CSS
![Page 17: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/17.jpg)
jQuery dan CSS Menambah dan Menghapus Class CSS
![Page 18: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/18.jpg)
jQuery Event Handler HTML
Menyembunyikan suatu komponen pada saat tombol diklik
Selector ‘this’ yang mengacu pada lingkup dirinya sendiri
![Page 19: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/19.jpg)
jQuery Event Handler Toggle (Show/Hide)
![Page 20: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/20.jpg)
jQuery Manipulasi Elemen Menambahkan elemen baru
Menghapus elemen
Menambahkan setelah / sebelum
Menambahkan di dalam elemen
![Page 21: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/21.jpg)
jQuery Manipulasi Elemen Mengganti Isi Elemen
Apa perbedaan .html() dan .text() ?
![Page 22: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/22.jpg)
jQuery mouseover() dan hover()
![Page 23: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/23.jpg)
JQuery Animating, Scrolling, Resizing
![Page 24: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/24.jpg)
jQuery animate() Animasi di semua paragraf saat halaman ditampilkan
Animasi aktif saat hover()
Color Animation
![Page 25: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/25.jpg)
jQuery animate() Easing
![Page 26: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/26.jpg)
jQuery animate() - Bouncing
![Page 27: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/27.jpg)
jQuery animate() – Animated Navigation
![Page 28: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/28.jpg)
jQuery Scrolling Fungsi scroll()
Floating Navigation
![Page 29: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/29.jpg)
jQuery Scrolling Page Scroll scrollTop
Manipulasi Scrollbar plugin https://code.google.com/p/jscrollpane/
![Page 30: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/30.jpg)
jQuery Resize Fungsi resize()
Membuat komponen dapat diubah ukurannya (resizable)
Resizable Textarea
![Page 31: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/31.jpg)
JQuery Image & Slideshow
![Page 32: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/32.jpg)
jQuery Lightbox ColorBox - http://www.jacklmoore.com/colorbox/
LightBox - http://lokeshdhakar.com/projects/lightbox2/
FancyBox - http://fancybox.net/
Magnific Popup - http://dimsemenov.com/plugins/magnific-popup/
Nivo Lightbox - http://dev7studios.com/plugins/nivo-lightbox/
Featherlight - http://noelboss.github.io/featherlight/
![Page 33: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/33.jpg)
jQuery ColorBox
![Page 34: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/34.jpg)
jQuery Cropping Image Jcrop - http://deepliquid.com/content/Jcrop.html
Image Cropper - https://github.com/fengyuanchen/cropper
CropPic - http://www.croppic.net/
Image Crop (paid) - http://codecanyon.net/item/image-crop/5348464
CropZoom - http://www.cropzoom.com.ar/
![Page 35: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/35.jpg)
jQuery Image Slider ResponsiveSlider - http://responsiveslides.com/
WowSlider - http://wowslider.com/
Jquery Cycle - http://jquery.malsup.com/cycle/
BxSlider - http://bxslider.com/
SlideJS - http://www.slidesjs.com/
NivoSlider - http://dev7studios.com/plugins/nivo-slider
![Page 36: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/36.jpg)
JQuery Menu, Tabs, Panels, Tooltips
![Page 37: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/37.jpg)
jQuery Menu SmartMenu - http://www.smartmenus.org/
SuperFish - http://users.tpg.com.au/j_birch/plugins/superfish/
FlexNav - http://jasonweaver.name/lab/flexiblenavigation/
contextMenu - https://github.com/s-yadav/contextMenu.js
NOO Menu (paid) - http://codecanyon.net/item/noo-menu-wordpress-mega-menu-plugin/7873697
meanMenu - https://github.com/meanthemes/meanMenu
Zetta Menu (paid) - http://codecanyon.net/item/zetta-menu-jquery-mega-menu/7941407
And many more…
![Page 38: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/38.jpg)
jQuery Accordion liteAccordion - http://nicolahibbert.com/demo/liteAccordion/
Slidorion - http://slidorion.com/
jQuery UI Accordion – http://jqueryui.com
Flat Jquery Accordion - http://cssmenumaker.com/blog/flat-jquery-accordion-menu-tutorial
Vertical Accordion Menu - http://thecodeplayer.com/walkthrough/vertical-accordion-menu-using-jquery-css3
jQuery Accordion (paid) - http://codecanyon.net/item/jquery-accordion/4826492
And many more…
![Page 39: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/39.jpg)
jQuery Tabs
![Page 40: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/40.jpg)
jQuery Tabs jQuery UI Tabs – http://jqueryui.com
EasyTabs - http://os.alfajango.com/easytabs
TabulousJS - http://git.aaronlumsden.com/tabulous.js/
Google Play’s Tabs - http://red-team-design.com/google-play-minimal-tabs-with-css3-jquery/
Folder Tabs - http://red-team-design.com/css3-jquery-folder-tabs/
And many more…
![Page 41: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/41.jpg)
jQuery Slide-down Login Panel
![Page 42: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/42.jpg)
jQuery Tooltips
![Page 43: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/43.jpg)
jQuery Tooltips jQuery UI Tooltips – http://jqueryui.com
Tooltipster - http://iamceege.github.io/tooltipster/
qTip2 - http://qtip2.com/
qTip - http://craigsworks.com/projects/qtip/
Toltipsy - http://tooltipsy.com/
And many more…
![Page 44: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/44.jpg)
JQuery Forms
![Page 45: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/45.jpg)
jQuery Form Validation http://achmatim.net/2012/05/22/membuat-validasi-form-dengan-jquery-validation/
![Page 46: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/46.jpg)
jQuery Check All Checkboxes
![Page 47: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/47.jpg)
jQuery Autocomplete
![Page 48: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/48.jpg)
jQuery Autocomplete jQuery UI Autocomplete - http://jqueryui.com/autocomplete/
Autocomplete - http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
Ajax Autocomplete - http://www.devbridge.com/sourcery/components/jquery-autocomplete/
Facebook Like Autocomplete - http://www.web2ajax.fr/2008/02/03/facebook-like-jquery-and-autosuggest-search-engine/
And many more…
![Page 49: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/49.jpg)
jQuery Datepicker jQuery UI Datepicker – http://jqueryui.com/datepicker
DatePicker - http://www.eyecon.ro/datepicker/
Bootstrap Datepicker - http://www.eyecon.ro/bootstrap-datepicker/
glDatePicker - http://glad.github.com/glDatePicker/
Zebra DatePicker - http://stefangabos.ro/jquery/zebra-datepicker/
ptTimeSelect - http://pttimeselect.sourceforge.net/example/index.html
And many more…
![Page 51: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/51.jpg)
Resources (Book) Jquery Novice to Ninja. Sitepoint
http://jquery.com
http://jqueryui.com
http://achmatim.net
![Page 52: Fundamental JQuery](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c71d704a795926588b4582/html5/thumbnails/52.jpg)
Terima Kasih http://achmatim.net
http://twitter.com/achmatim
http://facebook.com/achmatim
http://slideshare.net/achmatim