Contents

About the Author

About the Technical Reviewer

Acknowledgments

Part 1: Getting Ready

Chapter 1: Putting jQuery in Context

Understanding jQuery UI and jQuery Mobile

Understanding jQuery Plugins

What Do I Need to Know?

What Is the Structure of This Book?

Part 1: Getting Ready

Part 2: Working with jQuery

Part 3: Working with Data and Ajax

Part 4: Using jQuery UI

Part 5: Using jQuery Mobile

Part 6: Advanced Features

Are There Lots of Examples?

Where Can I Get the Example Code?

What Software Do I Need for This Book?

Getting jQuery

Getting an HTML Editor

Getting a Web Browser

Getting a Web Server

Getting Node.js

Image Attribution

Summary

Chapter 2: HTML Primer

Introducing a Basic HTML Document

Understanding the Anatomy of an HTML Element

Understanding Attributes

The id and class Attributes

Understanding Element Content

Understanding Void Elements

Understanding the Document Structure

Understanding the Metadata Elements

Understanding the Content Elements

Understanding the Element Hierarchy

Understanding Parent-Child Relationships

Understanding Ancestor-Descendant Relationships

Understanding Sibling Relationships

Understanding the Document Object Model

Using the DOM

Modifying the DOM

Modifying Styles

Handling Events

Summary

Chapter 3: CSS Primer

Getting Started with CSS

Setting an Inline Value

Defining an Embedded Style

Defining an External Style Sheet

Understanding CSS Selectors

Selecting by Attribute

Selecting by Relationship

Selecting Using the Pseudo-element and Pseudo-class Selectors

Unions and the Negation Selectors

Understanding Style Cascading

Understanding How Styles Cascade

Tweaking the Order with Important Styles

Tie-Breaking with Specificity and Order Assessments

Understanding CSS Units

Working with CSS Colors

Understanding CSS Lengths

Using Shorthand Properties and Custom Values

Summary

Chapter 4: JavaScript Primer

Getting Ready to Use JavaScript

Using Statements

Defining and Using Functions

Defining Functions with Parameters

Defining Functions That Return Results

Using Variables and Types

Using the Primitive Types

Creating Objects

Working with Objects

Using JavaScript Operators

Using Conditional Statements

The Equality Operator vs. the Identity Operator

Explicitly Converting Types

Working with Arrays

Using an Array Literal

Reading and Modifying the Contents of an Array

Enumerating the Contents of an Array

Using the Built-in Array Methods

Handling Errors

Comparing undefined and null Values

Checking to See Whether a Variable or Property Is null or undefined

Differentiating Between null and undefined

Summary

Part 2: Working with jQuery

Chapter 5: jQuery Basics

Setting Up jQuery

A First jQuery Script

Understanding the jQuery $ Function

Waiting for the Document Object Model

Forgetting the Function

Using the Alternative Notation

Deferring the ready Event

Selecting Elements

Narrowing the Selection with a Context

Understanding the Selection Result

Determining the Selector

Determining the Context

Dealing with DOM Objects

Modifying Multiple Elements and Chaining Method Calls

Handling Events

Summary

Chapter 6: Managing the Element Selection

Expanding the Selection

Narrowing the Selection

Reducing the Selection to a Specific Element

Reducing the Selection by Range

Filtering Elements

Reducing the Selection Based on Descendants

Mapping the Selection

Testing the Selection

Changing and Then Unwinding the Selection

Navigating the DOM

Navigating Down the Hierarchy

Navigating Up the Hierarchy

Navigating Across the Hierarchy

Summary

Chapter 7: Manipulating the DOM

Creating New Elements

Creating Elements Using the $ Function

Creating New Elements by Cloning Existing Elements

Creating Elements Using the DOM API

Inserting Child and Descendant Elements

Prepending Elements

Inserting the Same Elements in Different Positions

Inserting from a jQuery Object

Inserting Elements Using a Function

Inserting Parent and Ancestor Elements

Wrapping Elements Together

Wrapping the Content of Elements

Wrapping Elements Using a Function

Inserting Sibling Elements

Inserting Siblings from a jQuery Object

Inserting Siblings Using a Function

Replacing Elements

Replacing Elements Using a Function

Removing Elements

Detaching Elements

Empting Elements

Unwrapping Elements

Summary

Chapter 8: Manipulating Elements

Working with Attributes and Properties

Setting an Attribute Value

Setting Multiple Attributes

Setting Attribute Values Dynamically

Removing an Attribute

Working with Properties

Working with Classes

Adding and Removing Classes Using a Function

Toggling Classes

Toggling Multiple Classes

Toggling All Classes

Toggling Classes in One Direction

Toggling Classes Dynamically

Working with CSS

Setting Multiple CSS Properties

Setting Relative Values

Setting Properties Using a Function

Using the Property-Specific CSS Convenience Methods

Working with Element Content

Setting Element Content

Setting Element Content Using a Function

Working with Form Elements

Setting Form Element Values

Setting Form Element Values Using a Function

Associating Data with Elements

Working with HTML5 Data Attributes

Summary

Chapter 9: Working with Events

Handling Events

Registering a Function to Handle Multiple Event Types

Providing Data to the Event Handler Function

Suppressing the Default Action

Removing Event Handler Functions

Executing a Handler Once

Performing Live Event Binding

Limiting DOM Traversal for Live Event Handlers

Manually Invoking Event Handlers

Using an Event Object

Using the triggerHandler Method

Using the Event Shorthand Methods

Using the Document Event Shorthand Methods

Using the Browser Event Shorthand Methods

Using the Mouse Event Shorthand Methods

Using the Form Event Shorthand Methods

Using the Keyboard Event Shorthand Methods

Summary

Chapter 10: Using jQuery Effects

Using the Basic Effects

Toggling Elements

Toggling in One Direction

Animating the Visibility of Elements

Using Effect Callbacks

Creating Looping Effects

Using the Slide Effects

Using the Fade Effects

Fading to a Specific Opacity

Creating Custom Effects

Using Absolute Target Property Values

Using Relative Target Property Values

Creating and Managing the Effect Queue

Displaying the Items in the Effect Queue

Stopping Effects and Clearing the Queue

Inserting a Delay into the Queue

Inserting Functions into the Queue

Enabling and Disabling Effect Animations

Summary

Chapter 11: Refactoring the Example: Part I

Reviewing the Example Document

Adding Additional Flower Products

Adding the Carousel Buttons

Dealing with the Submit Button

Implementing the Carousel Event Handler Functions

Totaling the Product Selection

Disabling JavaScript

Summary

Part 3: Working with Data and Ajax

Chapter 12: Using Data Templates

Understanding the Problem That Templates Solve

Setting Up the jQuery Templates Library

A First Data Templates Example

Defining the Data

Defining the Template

Applying the Template

Evaluating Expressions

Using the Template Variables

Using the Data Variable

Using the jQuery $ Function in a Template

Using the Template Variable

Using Nested Templates

Using Nested Templates on Arrays

Using Conditional Templates

Controlling Iteration Over Arrays

Iterating Over the Result of an Expression

Disabling HTML Encoding

Manipulating Templates from Event Handler Functions

Changing the Data Used by a Template

Summary

Chapter 13: Working with Forms

Preparing the Node.js Server

Recapping the Form Event Methods

Dealing with Form Focus

Dealing with Value Changes

Dealing with Form Submission

Validating Form Values

Using the Validation Checks

Specifying Validation Messages

Creating a Custom Check

Formatting the Validation Error Display

Using a Validation Summary

Summary

Chapter 14: Using Ajax: Part I

Using the Ajax Shorthand Methods

Performing an Ajax GET Request

Performing an Ajax POST Request

Specifying the Expected Data Type

Avoiding the Most Common Ajax Pitfall

Using the Type-Specific Convenience Methods

Getting an HTML Fragment

Getting and Executing Scripts

Getting JSON Data

Using the Ajax Forms Plugin

Summary

Chapter 15: Using Ajax: Part II

Making a Simple Ajax Request with the Low-Level API

Understanding the jqXHR Object

Setting the Request URL

Making a POST Request

Handling Ajax Events

Dealing with Successful Requests

Dealing with Errors

Dealing with Completed Requests

Configuring Requests Before They Are Sent

Specifying Multiple Event Handler Functions

Setting the Context for Events

Using the Global Ajax Events

Controlling Global Events

Configuring the Basic Settings for an Ajax Request

Setting Timeouts and Headers

Sending JSON Data to the Server

Using More Advanced Configuration Settings

Making the Request Synchronously

Ignoring Unmodified Data

Dealing with the Response Status Code

Cleaning Up the Response Data

Managing Data Conversion

Setting Up and Filtering Ajax Requests

Defining Default Settings

Filtering Requests

Summary

Chapter 16: Refactoring the Example: Part II

Reviewing the Refactored Example

Updating the Node.js Script

Preparing for Ajax

Sourcing the Product Information

Adding Form Validation

Adding Remote Validation

Submitting the Form Data Using Ajax

Processing the Server Response

Adding the New Form

Completing the Ajax Request

Processing the Data

Summary

Part 4: Using jQuery UI

Chapter 17: Setting Up jQuery UI

Obtaining jQuery UI

Deciding on a Theme

Creating the jQuery UI Custom Download

Installing jQuery UI for Development

Adding jQuery UI to an HTML Document

Installing jQuery UI for Production

Using jQuery UI via a Content Distribution Network

Summary

Chapter 18: Using the Button, Progress Bar, and Slider Widgets

Using the jQuery UI Button

Configuring the Button

Using jQuery UI Icons in Buttons

Using a Custom Image

Using the Button Methods

Using the Button Event

Creating Different Types of Button

Creating a Toggle Button

Creating a Button Set

Using the jQuery UI Progress Bar

Creating the Progress Bar

Using the Progress Bar Methods

Animating the Progress Bar

Using the Progress Bar Events

Using the jQuery UI Slider

Configuring the Slider

Using the Slider Methods

Using Slider Events

Summary

Chapter 19: Using the Autocomplete and Accordion Widgets

Using jQuery UI Autocomplete

Creating the Autocomplete Element

Configuring Autocomplete

Using the Autocomplete Methods

Using the Autocomplete Events

Using the jQuery UI Accordion

Creating the Accordion

Configuring the Accordion

Using the Accordion Methods

Using the Accordion Events

Summary

Chapter 20: Using the Tabs Widget

Creating the Tabs

Getting Tab Content with Ajax

Configuring the jQuery UI Tabs

Configuring Ajax Requests

Dealing with Ajax Errors

Using the Ajax Spinner Message

Disabling Individual Tabs

Changing the Event Trigger

Using Collapsible Tabs

Using the jQuery UI Tabs Methods

Adding and Removing Tabs

Controlling Remote Tab Ajax Requests

Changing the URL of a Remote Tab

Automatically Cycling Through the Tabs

Using the jQuery UI Tabs Events

Using Tabs to Display a Form

Applying the Tabs

Handling the Button Presses

Performing Validation

Summary

Chapter 21: Using the Datepicker Widget

Creating the Datepicker

Creating an Inline Datepicker

Configuring the Datepicker

Setting Up the Basics

Managing the Date Selection

Managing the Appearance of the Datepicker

Using the Datepicker Methods

Getting and Setting the Date Programmatically

Showing and Hiding Pop-up Datepickers Programmatically

Using the Datepicker Events

Responding to a Month or Year Change

Responding to the Pop-up Closing

Localizing Date Selection

Summary

Chapter 22: Using the Dialog Widget

Creating the Dialog

Configuring the Dialog

Configuring the Basic Dialog Appearance

Setting the Location of the Dialog

Adding Buttons to a Dialog

Dragging and Stacking Dialogs

Creating Modal Dialogs

Using the Dialog Methods

Using the Dialog Events

Keeping the Dialog Open

Responding to Changing Sizes and Positions

Summary

Chapter 23: Using the Drag & Drop Interactions

Creating the Draggable Interaction

Configuring the Draggable Interaction

Using the Draggable Methods

Using the Draggable Events

Using the Droppable Interaction

Highlighting a Drop Target

Dealing with Overlapping Elements

Configuring the Droppable Interaction

Using the Droppable Methods

Tuning Drag and Drop

Using Element Scope

Using a Helper Element

Snapping to the Edges of Elements

Summary

Chapter 24: Using the Other Interactions

Using the Sortable Interaction

Getting the Sortable Order

Configuring the Sortable Interaction

Using the Sortable Methods

Using the Sortable Events

Using the Selectable Interaction

Configuring the Selectable Interaction

Using the Selectable Interaction Methods

Using the Selectable Interaction Events

Using the Resizable Interaction

Configuring the Resizable Interaction

Summary

Chapter 25: Refactoring the Example: Part III

Reviewing the Refactored Example

Displaying the Products

Adding the Shopping Basket

Wrapping the Accordion

Adding the Table

Handling Input Value Changes

Applying the Theme Style

Applying the CSS Framework More Widely

Applying Rounded Corners to the Table

Creating the jQuery UI Button

Adding the Completion Dialog

Handling the Place Order Button Click

Completing the Order

Summary

Part 5: Using jQuery Mobile

Chapter 26: Getting Started with jQuery Mobile

Setting Up jQuery Mobile

Obtaining jQuery Mobile

Installing jQuery Mobile

Understanding the jQuery Mobile Approach

Understanding Automatic Enhancement

Understanding the Viewport

Understanding jQuery Mobile Events

Responding to Device Orientation Changes

Working with Mobile Devices

Avoiding the Two Cardinal Sins of Mobile Development

Avoiding Bad Assumptions

Avoiding Unrealistic Simulation and Testing

Using a Mobile Browser Emulator

Summary

Chapter 27: Pages and Navigation

Understanding jQuery Mobile Pages

Adding Headers and Footers to a Page

Adding Pages to a Document

Linking to External Pages

Using Scripting to Control jQuery Mobile Pages

Changing the Current Page

Determining the Current Page

Loading Pages in the Background

Using Page Events

Handling the Page Initialization Event

Handling Page Load Events

Responding to Page Transitions

Summary

Chapter 28: Dialogs, Themes, and Layouts

Creating Dialogs

Adding Buttons to the Dialog

Applying Themes

Applying Swatches to Individual Elements

Creating Grid Layouts

Summary

Chapter 29: Buttons and Collapsible Blocks

Using jQuery Mobile Buttons

Understanding Automatically Created Buttons

Configuring jQuery Mobile Buttons

Creating Grouped Buttons

Using Collapsible Content Blocks

Creating a Single Collapsible Block

Configuring jQuery Mobile Collapsible Content Blocks

Using Collapsible Block Events

Controlling Collapsible Blocks Programmatically

Creating jQuery Mobile Accordions

Summary

Chapter 30: Using jQuery Mobile Forms

Understanding Automatically Created Form Elements

Working with Form Labels

Using Select Elements

Using Custom Selection Menus

Specifying Placeholder Elements

Controlling Select Menus Programmatically

Creating Flip Switches

Creating Check Boxes

Applying a Label to a Check Box

Grouping Check Boxes

Creating Radio Buttons

Using Range Sliders

Summary

Chapter 31: jQuery Mobile Lists

Getting Started with Lists

Formatting Lists

Creating Vanilla List Items

Creating Inset Lists

Creating Split Lists

Filtering Lists

Formatting List Items

Using Convention-Based Formatting

Summary

Chapter 32: Refactoring the Mobile Example: Part IV

Starting with the Basics

Inserting Products Programmatically

Reusing Pages

Creating the Shopping Basket

Adding for Quantity Changes

Adding a Button to the Information Page

Implementing the Checkout Process

Summary

Part 6: Advanced Features

Chapter 33: Using the jQuery Utility Methods

Queues Revisited: Using General-Purpose Queues

Manually Processing Queue Items

Utility Methods for Arrays

Using the grep Method

Using the inArray Method

Using the map Method

Using the merge Method

Using the unique Method

Utility Methods for Types

Using the type Method

Utility Methods for Data

Serializing Form Data

Parsing Data

Trimming Strings

Other Utility Methods

Checking Element Containment

Creating a Proxy Function

Summary

Chapter 34: The jQuery UI Effects & CSS Framework

Using the jQuery UI Effects

Animating Colors

Animating Classes

Using the jQuery UI Animations

Using the jQuery UI CSS Framework

Using the Widget Container Classes

Applying Rounded Corners

Using the Interaction State Classes

Using the Cue Classes

Summary

Chapter 35: Using Deferred Objects

A First Deferred Objects Example

Understanding Why Deferred Objects Are Useful

Using Other Callbacks

Rejecting a Deferred Object

Covering Both Outcomes

Using Outcome-Indifferent Callbacks

Using Multiple Callbacks

Using the Outcomes of Multiple Deferred Objects

Providing Progress Information

Getting Information about a Deferred Object

Using Ajax Deferred Objects

Summary

Index