jQuery Training Course

Overview

Web Development with jQuery course teaches how to tap into the power of jQuery to build extremely rich, yet elegant web UIs using one of the simplest and most popular cross-browse JavaScript libraries out there.

Objectives

At the end of jQuery training course, the participants will:

• Understand what's so good about jQuery - Google, IBM, Netflix, and even Microsoft are all using it.
• Be able to add support for jQuery into their own UIs - and let Google host it for you.
• Get how jQuery works: DOM selection, decoration, enhancing.
• Be able to use jQuery's effects, animation, scrolling, and resizing capabilities
• Build light boxes, slideshows, and manipulate images.
• Be able to render pro-looking panels, menus (including drop-down), accordions, tabs, tooltips UI widgets in your apps
• Learn about jQuery's AJAX facilities and create amazing interactive applications.
• Be able to enhance your forms with hints, autosuggestions, client-side validation, star ratings and more.
• Be able to create/manage lists, trees, and tables - all in JavaScript
• Understand jQuery's plugins, themes, and other advanced concepts, including best-practices.

Audience - Web developer who wants to build best-of-breed web UIs with the simplicity and elegance of jQuery.

Duration - 3 Days

Prerequisites - To get the most benefit from the training attendees need to be comfortable with basic JavaScript, HTML, and CSS.
Familiarity with XML and basic server-side programming (e.g. PHP, Java, Perl, and Python) is recommended, but not required.

Syllabus

1. Overview of jQuery What's jQuery and what's so good about it? Who is using it? Cross-browser compatibility jQuery UI and Plugins	2. Getting started with jQuery Downloading and including jQuery Google and Microsoft CDN Developer vs. Production versions (compressed v/s uncompressed) jQuery namespace and jQuery '$' alias Revisiting HTML DOM Debugging jQuery problems Accessibility concerns
3.Using jQuery Making sure that the page is ready Selections using CSS3 Filters Multiple item selectors Best practices Decorating with CSS Changing styles Adding/removing classes Effects with jQuery (e.g. hiding, revealing, and toggling elements) Basic Animations Callback functions Event handlers Adding and removing HTML elements Modifying content	4. Advanced Animations Animating with CSS Color animation Easing Bouncy Content Panes Animation Queues Chaining Actions Animating Navigation jQuery User Interface (UI) Library
5. Handling User Scolling The scroll event Floating navigation Scrolling the document Customizing scroll bars	6. Handling Resizing The resize event Layout switcher Resizable elements (text area, plane splitter)
7.Images and Slideshows Building our own light box Using Color Box plugin Cropping images with jCrop plugin Slideshows Faders (cross, rollover) Timers Using Cycle plugin Scrolling Thumbnails Customizing events that trigger scrolling	8. Menus Expandable and collapsible menus Open-closed indicators Expand on hover Hover intents Drop-down menus Accordion menus Simple Multi-level jQuery UI Accordion
9. Tabs Basic tabs jQuery UI tabs Tab options and controls	10. Panels and Panes Slide-downs Sliding overlay
11. Tooltips Simple Advanced (using sprites)	12. Ajax with jQuery Overview of Ajax Loading content asynchronously Fetching JSON data jQuery's Ajax facilities Common settings GET and POST requests Ajax Events Consuming XML Sending HTML form data Loading external scripts dynamically Interactive Ajax Spinners and progress indicators Endless scrolling
13. Forms Simple form validation The submit event Validation plugin Form hints Checkbox checker Inline editing Auto complete Star rating input	14. Controls Date picker Date validation Sliders Drag and drop Sorting with jQuery UI's sortable Progress bar
15. Dialogs and Notifications Simple modal dialog jQuery UI dialog Growl-style notifications 1-up notification	16. jQuery Widgets Lists jQuery UI selectables Sorting Swapping list elements Searching Selecting Trees Expandable/collapsable trees Event delegation Tables Fixed headers Repeating headers Data grids Pagination Row editing Data Tables plugin Selecting rows and columns
17. Advanced Concepts Best Practices Clean code Comments Map objects Name spacing Scoping Client-side templating Why browser-sniffing should be avoided Feature detection Plugins Extending jQuery Creating your own selectors Events The special event Coexisting with other JavaScript libraries (like prototype.js) Queing and dequeuing animations Themes Parting thoughts