JQuery

JQuery/Ajax

Course Duration: 7.5 hours

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.

Overview Of jQuery

  • What's jQuery and what's so good about it?
  • Who is usng 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 vs uncompressed)
  • jQuery namespace and jQuery '$' alias
  • Revisiting HTML DOM
  • Debugging jQuery problems
  • Accessibility concerns

jQuery

  • Making sure that the page is ready
  • Selections using CSS3
  • Decorating with CSS
  • Effects with jQuery (e.g. hiding, revealing, and toggling elements)
  • Event handlers
  • Adding and removing HTML elements
  • Modifying content

Advanced Animation

  • Animating with CSS
  • Color animation
  • Easing
  • Bouncy Content Panes
  • Animation Queues
  • Chaining Actions
  • Animating Navigation
  • jQuery User Interface (UI) Library

Handling Users scolling

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

Handling Resizing

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

Images and Slideshows

  • Building our own lightbox
  • Using ColorBox plugin
  • Cropping images with jCrop plugin
  • Slideshows

Basic Ajax programming

  • Tabs Plug-in
  • Adding Google Maps to Your Site

Tabs

  • Basic tabs
  • jQuery UI tabs
  • Tab options and controls

Panels and panes

  • Slide-downs
  • Sliding overlay

Tooltips

  • Slide-downs
  • Sliding overlay

Ajax with jQuery

  • Overview of Ajax
  • Loading content asynchronously
  • Fetching JSON data
  • jQuery's .ajax facilities
  • Loading external scripts dynamically
  • Interactive Ajax
  • Spinners and progress indicators
  • Endless scrolling

Forms

  • Simple form validation
  • The submit event
  • Validation plugin
  • Form hints
  • Checkbox checker
  • Inline editing
  • Autocomplete
  • Star rating input

Controls

  • Slide-downs
  • Sliding overlay

Dialogs and notification

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

jQuery widgets

  • Lists
  • Trees
  • Tables

Menus

  • Expandable and collapsible menus
  • Open-closed indicators
  • Expand on hover
  • Drop-down menus
  • Accordion menus