Contents

About the Author

About the Technical Reviewer

Acknowledgments

 Chapter 1: Putting jQuery in Context

Understanding jQuery UI and jQuery Mobile

Understanding jQuery Plug-ins

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

What’s New in This Edition?

What’s New for Core jQuery?

What’s New for jQuery UI?

What’s New for jQuery Mobile?

What Else Is New?

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 for null or undefined

Differentiating Between null and undefined

Summary

 Chapter 5: jQuery Basics

Setting Up jQuery

Using Conditional Comments

A First jQuery Script

Understanding the jQuery $ Function

Waiting for the Document Object Model

Using the Alternative Notation

Deferring the ready Event

Selecting Elements

Narrowing the Selection with a Context

Understanding the Selection Result

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 in a Single Parent

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

Getting and Setting a Single CSS Value

Getting Multiple CSS Properties

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

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

 Chapter 12: Using Data Templates

Understanding the Problem That Templates Solve

Setting Up the Template Library

A First Data Templates Example

Defining the Data

Defining the Template

Applying the Template

Using Template Logic

Creating Conditional Content

Enumerating Arrays and Properties

Changing the Data Context

Creating Custom Template Helpers

Creating a Conditional Template Helper

Returning More Complex Content

Receiving Optional Arguments in the Helper Function

Providing Custom Template Properties

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 Plug-in

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 Callbacks

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 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

 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

Creating an Indeterminate Progress Bar

Using the Progress Bar Methods

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 Tabs Widget

Selecting the Active Tab

Disabling Individual Tabs

Changing the Event Trigger

Using Collapsible Tabs

Using the Tabs Methods

Adding and Removing Tabs

Triggering Tab Ajax Requests

Using the Tabs Events

Intercepting Ajax Requests

Manipulating Remote Tab Data

Using Tabs to Display a Form

Summary

 Chapter 21: Using the Datepicker Widget

Creating the Datepicker

Creating an Inline Datepicker

Configuring the Datepicker

Performing Basic Configuration

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 and Spinner Widgets

Using the jQuery UI Dialog Widget

Creating the Dialog

Configuring the Dialog

Using the Dialog Methods

Using the Dialog Events

Using the jQuery UI Spinner Widget

Using the Spinner Widget with the HTML5 Input Element Types

Configuring the Spinner Widget

Using the Spinner Methods

Using the Spinner Events

Summary

 Chapter 23: Using the Menu and Tooltip Widgets

Using the jQuery UI Menu Widget

Creating the Menu

Configuring the Menu

Using the Menu Methods

Using the Menu Events

Using the jQuery UI Tooltip Widget

Creating the Tooltip

Configuring the Tooltip

Using the Tooltip Methods

Using the Tooltip Events

Summary

 Chapter 24: Using the Drag-and-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 25: 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 26: 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

 Chapter 27: 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 28: Pages, Themes & Layouts

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

Applying jQuery Mobile Themes

Applying Swatches to Individual Elements

Creating Grid Layouts

Summary

 Chapter 29: The Dialog & Popup Widgets

Using the jQuery Mobile Dialog Widget

Creating the Dialog Widget

Configuring the Dialog Widget

Using the Dialog Methods

Using the Dialog Events

Using the jQuery Mobile Popup Widget

Creating the Popup Widget

Configuring the Popup Widget

Using the Popup Methods

Using the Popup Events

Summary

 Chapter 30: Buttons and Collapsible Blocks

Using jQuery Mobile Buttons

Creating the Button Widget

Configuring jQuery Mobile Buttons

Using the Button Methods

Using the Button Events

Using jQuery Mobile NavBars

Configuring jQuery Mobile NavBar

Using the NavBar Methods & Events

Using Collapsible Content Blocks

Creating the Collapsible Block

Configuring jQuery Mobile Collapsible Content Blocks

Using Collapsible Block Methods

Using Collapsible Block Events

Using jQuery Mobile Collapsible Sets (Accordions)

Configuring the Collapsible Set

Using the Collapsible Set Methods

Using the Collapsible Set Events

Summary

 Chapter 31: Using jQuery Mobile Forms

Creating Form Element Widgets

Using the Textinput Widget

Configuring the Textinput Widget

Using the Textinput Widget Methods

Using the Textinput Widget Events

Using the Slider and Range Slider Widgets

Configuring the Slider and Range Slider Widgets

Using the Slider and Range Slider Methods

Using the Slider Events

Using the Range Slider Events

Using the Selectmenu Widget

Configuring the SelectMenu Widget

Using the Selectmenu Methods

Using the Selectmenu Events

Using Flip Switches

Using the Checkboxradio Widget

Creating Check Boxes

Creating and Formatting Radio Buttons

Configuring the Checkboxradio Widget

Using the Checkboxradio Methods

Using the Checkboxradio Events

Summary

 Chapter 32: Using Lists and Panels

Using the ListView Widget

Configuring the Listview Widget

Using the Listview Methods

Using the Listview Events

Using the Panel Widget

Configuring the Panel Widget

Using the Panel Methods

Using the Panel Events

Summary

 Chapter 33: Refactoring the 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

 Chapter 34: 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

Summary

 Chapter 35: 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 36: 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