Quick Navigation
jQuery Introduction course
Overview
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. After an introduction to Javascript, the focus is on using jQuery within client-side web pages to enhance the user experience and to consume and present data from a web server via Asynchronous Javascript and XML (AJAX). Whether your server-side code is written in php, Java or any other type of code, this course will let you present your data using the latest features users expect.
Audience
Web developers.
Prerequisites
No knowledge is assumed, but it helps to have a working knowledge of HTML and CSS.
Course Contents (3 days)
- Introduction to Javascript
- Client side scripting
- Javascript: the 'J' in
- The tedium of re-inventing the wheel
- Overview of popular Javascript libraries
- What’s so good about jQuery?
- Cross-browser Compatibility
- CSS3 Selectors
- Helpful Utilities
- jQuery UI
- Plugins
- Keeping Markup Clean
- Widespread Adoption
- Downloading and Including jQuery
- Downloading jQuery
- Uncompressed or compressed?
- Anatomy of a jQuery Script
- The jQuery Alias
- Dissecting a jQuery Statement
- Bits of HTML: introducing the
Document Object Model (DOM)
Selecting, Decorating, and Enhancing
- Making Sure the Page Is Ready
- Selecting: The Core of jQuery
- Simple Selecting
- Narrowing Down Our Selection
- Testing Our Selection
- Filters
- Selecting Multiple Elements
- Decorating: CSS with jQuery
- Reading CSS Properties
- Setting CSS Properties
- Classes
- Enhancing: Adding Effects with jQuery
- Hiding and Revealing Elements
- Progressive Enhancement
- Adding New Elements
- Removing Existing Elements
- Modifying Content
- Basic Animation: Hiding and Revealing
- Callback Functions
Animating, Scrolling, and Resizing
- Animating
- Animating CSS Properties
- Colour Animation
- Easing and Advanced Easing
- Bouncy Content Panes
- The Animation Queue
- Chaining Actions
- Pausing the Chain
- Animated Navigation
- The jQuery User Interface Library
- Scrolling and Resizing
- The scroll Event
- Floating Navigation
- Scrolling the Document
- Custom Scroll Bars
- The resize Event
- Resizable Elements
Images and Slideshows
- Lightboxes
- Slideshows
- Cross-fading Slideshows
- Scrolling Slideshows
Menus, Tabs, Tooltips, and Panels
- Menus
- Expandable/Collapsible Menus
- Open/Closed Indicators
- Menu Expand on Hover
- Drop-down Menus
- Accordion Menus
- A Simple Accordion
- Multiple-level Accordions
- jQuery UI Accordion
- Tabs
- Basic Tabs
- jQuery UI Tabs
- Panels and Panes
- Slide-down Login Form
- Sliding Overlay
- Tooltips
- Simple Tooltips
- Advanced Tooltips
Construction, Ajax, and Interactivity
- Construction and Best Practices
- Cleaner jQuery
- Client-side Templating
- Introducing
- Loading Remote HTML
- Picking HTML with Selectors
- Advanced loading
- Common
- GET and POST Requests
- jQuery Ajax Events
- Interactivity: Using
- Ajax Image Gallery
- Image Tagging
Forms, Controls, and Dialogs
- Forms
- Simple Form Validation
- Form Validation with the Validation Plugin
- Maximum Length Indicator
- Form Hints
- Check All Checkboxes
- Inline Editing
- Autocomplete
- Controls
- Date Picker
- Sliders
- Drag and Drop
- Dialogs and Notifications
Lists, Trees, and Tables
- Lists
- Sorting Lists
- Manipulating Select Box Lists
- Trees
- Expandable Tree
- Event Delegation
- Tables
- Fixed Table Headers
- Repeating Header
- Data Grids
- Selecting Rows with Checkboxes
$.ajaxOptions