Development with jQuery

Length: 3 days
CourseID: jquery

Prerequisites:

Web development experience with Javascript

Overview:

The course introduces jQuery and shows the benefits of using the library in your applications. Participants will learn to embellish content using jQuery's DOM modification methods. This course will emphasize the simplicity of HTML and the dynamic decoration of those components using jQuery. Participants will also learn to send and retrieve information with AJAX methods.

Objectives:

Change page on command with DOM manipulation

Use AJAX to get the most out of server-side code

Build and control HTML tables dynamically

Chapters:

Getting Started

What jQuery does	Why jQuery works well
History of the jQuery project	Our first jQuery-powered web page
Downloading jQuery	Setting up the HTML document
Adding jQuery	Injecting the new class
Executing the code

Selectors

The Document Object Model	The $() factory function
CSS selectors	Styling list-item levels
Attribute selectors	Styling links
Custom selectors	Styling alternate rows
Form selectors	DOM traversal methods
Styling specific cells	Chaining
Accessing DOM elements

Events

Performing tasks on page load	Timing of code execution
Multiple scripts on one page	Shortcuts for code brevity
Coexisting with other libraries	Simple events
Event handler context	Further consolidation
Shorthand events	Compound events
Event bubbling	Side effects of event bubbling
Altering the bubble process	Event targets
Stopping event propagation	Default actions
Event delegation	Removing an event handler
Event namespacing	Rebinding events
Simulating user interaction	Keyboard events

Effects

Inline CSS modification	Basic hide and show
Effects and speed	Speeding in
Fading in and fading out	Compound effects
Creating custom animations	Toggling the fade
Animating multiple properties	Positioning with CSS
Callbacks

DOM Manipulation

Manipulating attributes	Non-class attributes
The $() factory function revisited	Inserting new elements
Moving elements	Marking, numbering, and linking the context
Wrapping elements	Copying elements
Clone with events	Cloning for pull quotes
A CSS diversion

Table Manipulation

Loading data on demand	Appending HTML
Working with JavaScript objects	Retrieving a JavaScript object
Global jQuery functions	Executing a script
Loading an XML document	Choosing a data format
Passing data to the server	Performing a GET request
Performing a POST request	AJAX and events
Security limitations	Using JSON for remote data
Additional options	The low-level AJAX method

jQuery Forms

Sorting and paging	Server-side sorting
Preventing page refreshes	JavaScript sorting
Row grouping tags	Basic alphabetical sorting
Column highlighting	Alternating sort directions
Server-side pagination	Sorting and paging go together
JavaScript pagination	Paging with sorting
Modifying table appearance	Row highlighting
Row striping	Advanced row striping
Interactive row highlighting	Tooltips
Filtering	Filter options
Reversing the filters	Interacting with other code

Shufflers and Rotators

Forms and Javascript	Required field messages
Conditionally displayed fields	Form validation
Required fields	Required formats
Checkbox manipulation	Compact forms
Placeholder text for fields	AJAX auto-completion
Keyboard navigation	Working with numeric form data
Rejecting non-numeric input	Numeric calculations
Parsing and formatting currency	Dealing with decimal places
Other calculations	Rounding values
Deleting items

Using Plugins

Page Rotators	Setting up the rotator
The headline rotate function	Pause on hover
Retrieving a feed from a different domain	Adding a loading indicator
Gradient fade effect	An image carousel
Setting up the page	Revising the styles with JavaScript
Shuffling images when clicked	Adding sliding animation
Image enlargement	Hiding the enlarged cover
Displaying a close button	More fun with badging
Adding a loading indicator

Developing plugins

jQuery Plugins introduction	How to use a plugin
The Form plugin	The jQuery UI plugin library
Effects	Color animations
Class animations	Advanced easing
Additional effects	Interaction components
Widgets	jQuery UI ThemeRoller
Other recommended plugins	Forms Plugins
Tables Plugins	Images Plugins
Charting Plugins