Fundamental JQuery

Fundamental JQuery
TRAINING HARI #3 – ACHMAD SOLICHIN (@ACHMATIM)

Agenda
 Apa itu JQuery?
 jQuery Basics
 Animating, Scrolling, Resizing
 Image and Slideshow
 Forms

Apa itu JQuery?
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like
HTML document traversal and manipulation, event handling, animation, and Ajax
much 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 way
that millions of people write JavaScript. (http://jquery.com)

JQuery Usage Statistics
Sumber: http://trends.builtwith.com/javascript/

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.

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.

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>

JQuery Hello World!
$(document).ready(function() {
alert('Hello World!');
});
$(function() {
alert('Ready to do your bidding!');
});

Selector
 Tag
$(‘h2’)
 ID
$(‘#celebs’)
 Class
$(‘.data’)

jQuery dan CSS
 Membaca Property CSS
 Mengubah Property CSS

jQuery dan CSS
 Menambah dan Menghapus Class CSS

jQuery Event Handler
 HTML
 Menyembunyikan suatu komponen pada saat tombol diklik
 Selector ‘this’ yang mengacu pada lingkup dirinya sendiri

jQuery Event Handler
 Toggle (Show/Hide)

jQuery Manipulasi Elemen
 Menambahkan elemen baru
 Menghapus elemen
Menambahkan setelah / sebelum
Menambahkan di dalam elemen

jQuery Manipulasi Elemen
 Mengganti Isi Elemen
 Apa perbedaan .html() dan .text() ?

jQuery mouseover() dan hover()

JQuery Animating, Scrolling, Resizing

jQuery animate()
 Animasi di semua paragraf saat halaman ditampilkan
 Animasi aktif saat hover()
 Color Animation

jQuery animate() – Animated Navigation

jQuery Scrolling
 Fungsi scroll()
 Floating Navigation

jQuery Scrolling
 Page Scroll  scrollTop
 Manipulasi Scrollbar  plugin https://code.google.com/p/jscrollpane/

jQuery Resize
 Fungsi resize()
 Membuat komponen dapat diubah ukurannya (resizable)
 Resizable Textarea

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/

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/

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

JQuery Menu, Tabs, Panels, Tooltips

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…

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

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/

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/

jQuery Form Validation
 http://achmatim.net/2012/05/22/membuat-validasi-form-dengan-jquery-validation/

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/

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

jQuery Slider
 jQuery UI Slider – http://jqueryui.com/slider

Resources
 (Book) Jquery Novice to Ninja. Sitepoint
 http://jquery.com
 http://jqueryui.com
 http://achmatim.net

Terima Kasih
 http://achmatim.net
 achmatim@gmail.com
 http://twitter.com/achmatim
 http://facebook.com/achmatim
 http://slideshare.net/achmatim

Fundamental JQuery

More Related Content

What's hot (20)

Similar to Fundamental JQuery (20)

More from Achmad Solichin (20)

Recently uploaded (20)

Fundamental JQuery