RKCP Information Technology




JQuery
Home » Courses   » JQuery

JQuery

Learn jQuery: its Introduction, Handling User Scrolling, Handling Resizing, AJAX With Jquery, Forms, Controls, Dialogs And Notifications, Advanced Jquery from this Tutorial

Overview

This course intends to teach its participants about how to tap into the power of jQuery to build extremely rich yet elegant Web UIS with the use of one of the simplest but most popular cross-browse Javascript Libraries.


Objective

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

  • Understand what is so good about jQuery
  • Be able to add support for jQuery into UIs
  • Get to know how jQuery works: DOM selection, decoration, enhancing
  • Be able to use jQuery's effects, animation, scrolling, and resizing functionalities
  • Be able to render pro-looking panels, menus (including drop-down), accordions, tabs, tooltips UI widgets in applications
  • Learn about jQuery's AJAX facilities and create different interactive applications
  • Be able to enhance forms with hints, auto-suggestions, client-side validation, star ratings and more
  • Understand jQuery's plugins, themes, and other advanced concepts, including the best-practices

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

Total Duration - 2 Days


Prerequisites

Need to Have

,
    ,
  • Experience in Web development using HTML, CSS & JavaScript
  • ,
,

Better To Have

,
    ,
  • Experience in any server technology (J2EE, .NET, Ruby etc)
  • ,


Syllabus

Expand All
  • 1. Overview of jQuery
    • What is jQuery and what is great about it?
    • Who all uses it?
    • Cross-browser compatibility
    • jQuery UI and Plugins
  • 2. Getting started with jQuery
    • Download and inclusion of jQuery
    • Google and Microsoft CDN
    • Developer vs. Production versions (compressed v/s uncompressed)
    • jQuery namespace and jQuery '$' alias
    • Revisiting HTML DOM
    • Debugging jQuery problems
  • 3. Using jQuery
    • Making the page is ready
    • Selections with the use of CSS3
    • Filters
    • Multiple item selectors
    • Best practices
    • Decorations using 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. Handling User Scolling
    • The scroll event
    • Floating navigation
    • Scrolling the document
    • Customizing scroll bars
  • 5. Handling Resizing
    • The resize event
    • Layout switcher
    • Resizable elements (text area, plane splitter)
  • 6. 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
  • 7. Forms
    • Simple form validation
    • The submit event
    • Validation plugin
    • Form hints
  • 8. Controls
    • Date picker - Date validation -
    • Sliders
    • Drag and drop
    • Sorting with jQuery UI's sortable
    • Progress bar
  • 9. Dialogs and Notifications
    • Simple modal dialog
    • jQuery UI dialog
    • Growl-style notifications
    • 1-up notification
  • 10. 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 -