jQuery Training

This course teaches the participants 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-browser JavaScript Libraries.

2 Days

Must Have

  • Web development experience with HTML, CSS & JavaScript

Good to Have

  • Exposure to any server technology (J2EE, .NET, Ruby etc)

Overview of jQuery

  • What’s jQuery and what’s so good about it? 
  • Who is using it? 
  • Cross-browser compatibility 
  • jQuery UI and Plugins

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

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 
  • Call back functions 
  • Event handlers 
  • Adding and removing HTML elements 
  • Modifying content

Handling User Scrolling

  • The scroll events 
  • Floating navigation 
  • Scrolling the document 
  • Customizing scroll bars

Handling Resizing

  • The resize event 
  • Layout switcher 
  • Resizable elements (text area, plane splitter)

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

Forms

  • Simple form validation 
  • The submit event 
  • Validation plugin 
  • Form hints

Controls

  • Date picker – Date validation – 
  • Sliders 
  • Drag and drop 
  • Sorting with jQuery UI’s sortable 
  • Progress bar

Dialogs and Notifications

  • Simple modal dialog 
  • jQuery UI dialog 
  • Growl-style notifications 
  • 1-up notification

Advanced Concepts

  • Best Practices 
  • Clean code 
  • Comments 
  • Map objects 
  • Name spacing 
  • Scoping 
  • Client-side templating 
  • Why browser-sniffing should be avoided 
  • Feature detection – Plugins – tExtending jQuery – tCoexisting with other JavaScript libraries (like prototype.js) – tQueing and dequeuing animations – tThemes – tBuilding custom themes using the Theme builder