Overview of jQuery
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.
Duration
2 Days
Prerequisite for jQuery
Must Have
- Web development experience with HTML, CSS & JavaScript
- Good to Have
- Exposure to any server technology (J2EE, .NET, Ruby etc)
Course Outline for jQuery
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