jQuery Programming

Duration: 3 Days
Introduction
What jQuery Does
Why jQuery Works Well
Our First jQuery Document
Downloading jQuery
Setting the HTML Document
Writing the jQuery Code
Finding the Poem Text
Injecting the New Class
Executing the Code
The Finished Product
SelectorsHow to Get Anything You Want
The Document Object Model
The $() Factory Function
CSS Selectors
Styling List-Item Levels
XPath Selectors
Styling Links
Custom Selectors
Styling Alternate Rows
DOM Traversal Methods
Styling the Header Row
Styling Category Cells
Chaining
Accessing DOM Elements
EventsHow to Pull the Trigger
Performing Tasks on Page Load
Timing of Code Execution
Multiple Scripts on One Page
Shortcuts for Code Brevity
Simple Events
A Simple Style Switcher
Enabling the Other Buttons
Event Handler Context
Further Consolidation
Shorthand Events
Compound Events
Showing and Hiding Advanced Features

Highlighting Clickable Items

The Journey of an Event
Side Effects of Event Bubbling
Limiting and Ending Events
Preventing Event Bubbling
Event Targets
Stopping Event Propagation
Default Actions
Removing an Event Handler
Simulating User Interaction
EffectsHow to Add Flair to Your Actions
Inline CSS Modification
Basic Hide and Show
Effects and Speed
Speeding In
Fading In and Fading Out
Multiple Effects
Building an Animated show()
Creating a Custom Animation
Positioning with CSS
Making Sense of the Numbers
Improving the Custom Animation
Simultaneous versus Queued Effects
Working with a Single Set of Elements
Working with Multiple Sets of Elements
Callbacks
DOM ManipulationHow to Change Your
Page on Command
Manipulating Attributes
Non-class Attributes
The $() Factory Function Revisited
Inserting New Elements
Moving Elements
Marking, Numbering, and Linking the Context
Appending Footnotes
Wrapping Elements
Copying Elements
Clone Depth
Cloning for Pull Quotes
A CSS Diversion
Back to the Code
Prettifying the Pull Quotes

AJAXHow to Make Your Site Buzzword-Compliant

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
Serializing a Form
Keeping an Eye on the Request
AJAX and Events
Scoping an Event-Binding Function
Using Event Bubbling
Security Limitations
Table Manipulation
Sorting
Server-Side Sorting
Preventing Page Refreshes
JavaScript Sorting
Row Grouping Tags
Basic Alphabetical Sorting
The Power of Plug-ins
Performance Concerns
Finessing the Sort Keys
Sorting Other Types of Data
Column Highlighting
Alternating Sort Directions
Pagination
Server-Side Pagination
Sorting and Paging Go Together
JavaScript Pagination
Displaying the Pager
Enabling the Pager Buttons
Marking the Current Page
Paging with Sorting
The Finished Code
Advanced Row Striping
Three-color Alternating Pattern
Alternating Triplets

Row Highlighting
Tooltips
Collapsing and Expanding
Filtering
Filter Options
Collecting Filter Options from Content
Reversing the Filters
Interacting with Other Code
Row Striping
Expanding and Collapsing
The Finished Code
Forms with Function
Progressively Enhanced Form Styling
The Legend
Required Field Messages
A Regular Expression Digression
Inserting the Field-Message Legend
Conditionally Displayed Fields
Form Validation
Immediate Feedback
Required Fields
Required Formats
A Final Check
Checkbox Manipulation
The Finished Code
Placeholder Text for Fields
AJAX Auto-Completion
On the Server
In the Browser
Populating the Search Field
Keyboard Navigation
Handling the Arrow Keys
Inserting Suggestions in the Field
Removing the Suggestion List
Auto-Completion versus Live Search
The Finished Code
Input Masking
Shopping Cart Table Structure
Rejecting Non-numeric Input
Numeric Calculations
Parsing and Formatting Currency
Dealing with Decimal Places
Other Calculations
Rounding Values

Finishing Touches
Deleting Items
Editing Shipping Information
The Finished Code
Shufflers and Rotators
Headline Rotator
Setting the Page
Retrieving the Feed
Setting the Rotator
The Headline Rotate Function
Pause on Hover
Retrieving a Feed from a Different Domain
Gratuitous Inner-fade Effect
An Image Carousel
Setting the Page
Revising the Styles with JavaScript
Shuffling Images when Clicked
Adding Sliding Animation
Displaying Action Icons
Image Enlargement
Hiding the Enlarged Cover
Displaying a Close Button
More Fun with Badging
Animating the Cover Enlargement
Deferring Animations Until Image Load
Adding a Loading Indicator
Plug-ins
How to Use a Plug-in
Popular Plug-Ins
Dimensions
Height and Width
ScrollTop and ScrollLeft
Offset
Form
Tips & Tricks
Interface
Animate
Sortables
Finding Plug-in Documentation
Developing a Plug-in
Adding New Global Functions
Adding Multiple Functions
What's the Point?

Adding jQuery Object Methods

Object Method Context
Method Chaining
DOM Traversal Methods
Method Parameters
Adding New Shortcut Methods
Maintaining Multiple Event Logs
Adding a Selector Expression
Creating an Easing Style
Easing Function Parameters
Multi-Part Easing Styles
How to Be a Good Citizen
Naming Conventions
Use of the $ Alias
Method Interfaces
Documentation Style