Contents

About the Author

About the Technical Reviewer

Acknowledgments

 Chapter 1: Introduction

1-1. About jQuery 2.0

1-2. Migration Plan

1-3. Objects–Basic Concept

1-4. Introduction to JavaScript

1-4-1. Data Types

1-4-2. Commonly Used JavaScript Objects and Events

1-5. About XML

1-6. About JSON

1-7. Introduction to Web Services

1-7-1. SOAP Web Services

1-7-2. RESTful Web Services

1-8. About jQuery UI

1-9. About jQueryMobile

1-10. Introduction to jqWidgets

1-12. About Eclipse IDE

Summary

 Chapter 2: jQuery Fundamentals

2-1. Setting Up jQuery

Setting Up the Development Environment

2-2. Using Conditional Statements

if...else Statements

switch Statements

2-3. Looping

for Loops

while Loops

2-4. Understanding the Document Object Model (DOM)

The DOM Structure

2-5. Navigating the DOM

2-6. Using Attributes vs. Properties

2-7. Commonly Used Objects in jQuery

Map Object

HTML Element

jQuery Objects

2-8. Using the jQuery Function

jQuery Function Arguments

2-9. jQuery Methods Chaining

Summary

 Chapter 3: jQuery Selectors

3-1. Examples

3-1-1. Human Resources Example

3-1-2. Publishing House Example

3-1-3. Photo Album Example

3-2. Selecting the HTML Element by its ID

Problem

Solution

How It Works

3-3. Selecting All the HTML Elements on a Page

Problem

Solution

How It Works

3-4. Selecting an HTML Element by ID to Highlight All Child Nodes

Problem

Solution

How It Works

3-5. Selecting HTML Elements by Tag Name

Problem

Solution

How It Works

3-6. Selecting HTML Elements by Tag Name to Highlight a Focused Field

Problem

Solution

How It Works

3-7. Selecting HTML Elements by Class Name

Problem

Solution

How It Works

3-8. Selecting HTML Elements that Match Any of the Specified Multiple Selectors

Problem

Solution

How It Works

3-9. Selecting HTML Elements with an Attribute’s Value Starting with a Specified Value Followed by a Hyphen

Problem

Solution

How It Works

3-10. Selecting HTML Elements with the Attribute’s Value Containing a Specified Value as a Word (Separated by Spaces)

Problem

Solution

How It Works

3-11. Selecting HTML Elements that Have a Specified Attribute Regardless of its Value

Problem

Solution

How It Works

3-12. Selecting the nth Item from the Selected HTML Elements

Problem

Solution

How It Works

3-13. Selecting Even and Odd Numbered Items from the Matched HTML Elements

Problem

Solution

How It Works

3-14. Selecting All Elements up to nth Element from the Matched HTML Elements

Problem

Solution

How It Works

3-15. Selecting All Header HTML Elements

Problem

Solution

How It Works

3-16. Selecting the First and/or Last Element from the Selected HTML Elements

Problem

Solution

How It Works

3-17. Excluding Some Elements from the Matched HTML Elements

Problem

Solution

How It Works

3-18. Selecting the First or n th Child Node of the Matched HTML Element’s Parent

Problem

Solution

How It Works

3-19. Selecting All Elements that Contain the Specified Text

Problem

Solution

How It Works

3-20. Selecting Elements that Have No Child Nodes (Including Text)

Problem

Solution

How It Works

3-21. Selecting Elements that Have at Least One Child Node Matching the Specified Selector

Problem

Solution

How It Works

3-22. Selecting Form Elements Based on Their Type and Attributes

Problem

Solution

How It Works

Summary

 Chapter 4: jQuery Selectors Filtering and Expansion

4-1. Narrowing the Set of Selected Elements by Using Selector/jQuery Object Filter

Problem

Solution

How It Works

4-2. Narrowing the Set of Selected Elements by Using the Filter Function

Problem

Solution

How It Works

4-3. Narrowing the Set of Selected Elements by Checking Their Descendant Nodes’ Attributes

Problem

Solution

How It Works

4-4. Narrowing the Set of Selected Elements by Excluding Elements Using Selectors

Problem

Solution

How It Works

4-5. Narrowing Down the Set of Selected Elements by Excluding Elements Using a Function

Problem

Solution

How It Works

4-6. Narrowing Down the Set of Selected Elements by Selecting a Range of Elements by Index

Problem

Solution

How It Works

4-7. Adding More Elements to the Set of Selected Elements

Problem

Solution

How It Works

4-8. Checking if Common HTML Element(S) Exist in Two Sets of Selected HTML Elements

Problem

Solution

How It Works

4-9. Iterating Over Each HTML Element in the jQuery Object to Perform an Action

Problem

Solution

How It Works

4-10. Reverting to the Most Recent Expansion or Narrowing a Set of Selected Elements

Problem

Solution

How It Works

4-11. Adding the Previous Set of Elements to the Current Set

Problem

Solution

How It Works

4-12. Creating a New jQuery Object from an Existing jQuery Object Using a Function

Problem

Solution

How It Works

Summary

 Chapter 5: DOM Traversing

5-1. Getting the Child Nodes of Each Selected Element

Problem

Solution

How It Works

5-2. Getting the Children Nodes of All Selected Elements, Including Text and Comments Nodes

Problem

Solution

How It Works

5-3. Getting the Descendant Nodes of All Selected Elements Filtered by a Specified Selector, jQuery Object, or HTML Element

Problem

Solution

How It Works

5-4. Getting the First Ancestor of Each Selected Element that Matches the Specified Selector

Problem

Solution

How It Works

5-5. Getting the Parent of Each Selected Element

Problem

Solution

How It Works

5-6. Getting the Ancestors of Each Selected Element

Problem

Solution

How It Works

5-7. Getting the Ancestors of Each Selected Element Until a Node Is Reached

Problem

Solution

How It Works

5-8. Getting the Immediately Preceding Sibling of Each Element of the Selected Elements

Problem

Solution

How It Works

5-9. Getting the Immediately Following Sibling of Each Element from the Set

Problem

Solution

How It Works

5-10. Getting All Siblings of Each Element of the Set

Problem

Solution

How It Works

Summary

 Chapter 6: DOM Manipulation

6-1. Adding CSS Class(es) to All Selected Elements

Problem

Solution

How It Works

6-2. Checking if a CSS Class Is Associated with Any of the Selected Elements

Problem

Solution

How It Works

6-3. Removing CSS Class(es) from Each Selected Element

Problem

Solution

How It Works

6-4. Toggling CSS Class(es) for Each Element of the Selected Elements

Problem

Solution

How It Works

6-5. Toggling CSS Class(es) for Selected Elements Based on the Return Value of a Function

Problem

Solution

How It Works

6-6. Getting and Setting the CSS Property of the Selected Element(s)

Problem

Solution

How It Works

6-7. Setting Multiple CSS Properties of All the Selected Elements

Problem

Solution

How It Works

6-8. Setting a Single CSS Property of Each Element in the Set of Selected Elements Based on a Function

Problem

Solution

How It Works

6-9. Getting the Attribute Value of the First Element in a Selection of Elements

Problem

Solution

How It Works

6-10. Setting the Attribute Value(s) of All the Selected Elements

Problem

Solution

How It Works

6-11. Setting the Attribute Value of All the Selected Elements Based on a Function

Problem

Solution

How It Works

6-12. Getting the Property Value of the First Element of the Selected Elements

Problem

Solution

How It Works

6-13. Setting the Property Value of All Selected Elements

Problem

Solution

How It Works

6-14. Getting and Setting the Value Property of Selected Elements

Problem

Solution

How It Works

6-15. Getting or Setting the Value of Each Element from the Set of Selected Elements Using a Function

Problem

Solution

How It Works

6-16. Getting the HTML of the First Element of the Selected Elements

Problem

Solution

How It Works

6-17. Replacing the HTML in All the Selected Elements

Problem

Solution

How It Works

6-18. Getting the Combined Contents of Each of the Selected Elements

Problem

Solution

How It Works

6-19. Inserting Content at the End of a Selection

Problem

Solution

How It Works

6-20. Inserting Content at the Beginning of Each Element of the Selected Elements

Problem

Solution

How It Works

6-21. Wrapping an HTML Structure Around Each Selected Element

Problem

Solution

How It Works

6-22. Wrapping an HTML Structure Around the Content of Each Selected Element

Problem

Solution

How It Works

6-23. Wrapping an HTML Structure Around All Selected Elements

Problem

Solution

How It Works

6-24. Inserting Content After Each Selected Element

Problem

Solution

How It Works

6-25. Copying All Selected Elements

Problem

Solution

How It Works

6-26. Removing Selected Elements from the DOM

Problem

Solution

How It Works

6-27. Removing the Child Nodes of All the Selected Elements from the DOM

Problem

Solution

How It Works

6-28. Removing the Parent of Each Selected Element

Problem

Solution

How It Works

6-29. Replacing Selected Items with New Items (Specified by HTMLString) in the DOM

Problem

Solution

How It Works

Summary

 Chapter 7: Event Handling

7-1. Performing an Action When an Event Occurs

Problem

Solution

How It Works

7-2. Preventing a Default Event Handler

Problem

Solution

How It Works

7-3. Binding Different Event Handlers to the Same Element

Problem

Solution

How It Works

7-4. Getting an Event Object’s Properties

Problem

Solution

How It Works

7-5. Passing Custom Data to the Event Handler

Problem

Solution

How It Works

7-6. Event Propagation

Problem

Solution

How It Works

7-7. Event Delegation

Problem

Solution

How It Works

7-8. Triggering an Event Programmatically

Problem

Solution

How It Works

7-9. Restricting Event Handler Execution

Problem

Solution

How It Works

7-10. Removing the Event Handler

Problem

Solution

How It Works

Summary

 Chapter 8: jQuery Effects and Animation

Options for Effects and Animations Methods

8-1. Showing and Hiding Elements

Problem

Solution

How It Works

8-2. Toggling Between an Element’s Show and Hide States

Problem

Solution

How It Works

8-3. Effects Methods for Hiding and Showing Elements

Problem

Solution

How It Works

8-4. Applying Custom Animation to the CSS Properties of Selected Elements

Problem

Solution

How It Works

8-5. Displaying Functions in the Effects Queue of Selected Elements

Problem

Solution

How It Works

8-6. Replacing Functions in the Effects Queue of Selected Elements

Problem

Solution

How It Works

8-7. Adding Custom Functions in the Effects Queue

Problem

Solution

How It Works

8-8. Controlling the Animation by Pausing It

Problem

Solution

How It Works

8-9. Removing All Remaining Effects and Animations Functions from the Effects Queue

Problem

Solution

How It Works

8-10. Stopping the Currently Running Animation

Problem

Solution

How It Works

8-11. Determining Global Settings for All the Animation Effects

Problem

Solution

Summary

 Chapter 9: jQuery AJAX

9-1. Using jQuery AJAX API Calls to Get Plain Text Data from the Server

Problem

Solution

How It Works

9-2. Using jQuery AJAX API Calls to Get HTML Text from the Server

Problem

Solution

How It Works

9-3. Using jQuery AJAX API Calls to Get Data in XML Format from the Server

Problem

Solution

How It Works

9-4. Using jQuery AJAX API Calls to Get Data in the JSON Format from the Server

Problem

Solution

How It Works

9-5. Using jQuery AJAX API Calls to Get the Script from the Server

Problem

Solution

How It Works

9-6. Sending Data to the Server Using a GET Request Method

Problem

Solution

How It Works

9-7. Sending Form Data to the Server Using a POST Request Method

Problem

Solution

How It Works

9-8. Using AJAX Events at the Request Level

Problem

Solution

9-9. Using AJAX Events at the Global Level

Problem

Solution

9-10. Order of AJAX Events at the Request and Global Levels

Problem

Solution

How It Works

Summary

 Chapter 10: jQuery UI

Creating Widgets

Creating Widgets and Setting Options

Executing a Widget’s Methods

Setting Callback Functions

Downloading the jQuery UI Library and Themes

10-1. Using the CSS Framework and Icons

Problem

Solution

10-2. Creating the Autocomplete Widget

Problem

Solution

How It Works

10-3. Creating the Spinner Widget

Problem

Solution

How It Works

10-4. Creating the Slider Widget

Problem

Solution

How It Works

10-5. Creating the Datepicker Widget

Problem

Solution

How It Works

10-6. Creating the Tooltip Widget

Problem

Solution

How It Works

10-7. Creating the Button Widget

Problem

Solution

How It Works

10-8. Creating the Dialog Widget

Problem

Solution

How It Works

10-9. Creating the Progress Bar Widget

Problem

Solution

How It Works

10-10. Creating the Tabs Widget

Problem

Solution

How It Works

10-11. Creating the Accordion Widget

Problem

Solution

How It Works

10-12. Creating the Menu Widget

Problem

Solution

How It Works

10-13. Creating a Data-Entry Form Using jQuery UI Widgets

Problem

Solution

How It Works

10-14. Adding an Animation Effect Using addClass() or the animate() Method

Problem

Solution

How It Works

10-15. Using jQuery UI Animation Effects on Selected Elements

Problem

Solution

How It Works

10-16. Creating Draggable and Droppable Elements

Problem

Solution

How It Works

10-17. Creating Drag-and-Drop Functionality in a Photo Album Application

Problem

Solution

How It Works

Summary

 Chapter 11: jQuery Mobile

Downloading the jQuery Mobile Library

Testing on Mobile Devices

Mobile Applications

11-1. CSS Framework: CSS Classes, Themes, and Icons

Problem

Solution

Common CSS Classes

Themes

Custom Themes

Icons

11-2. Understanding Page Structure

Problem

Solution

How It Works

11-3. Creating Buttons and Links

Problem

Solution

How It Works

11-4. Creating Headers and Footers

Problem

Solution

How It Works

11-5. Navigating Among Pages

Problem

Solution

How It Works

11-6. Applying Transition Effects to Pages and Dialog Boxes

Problem

Solution

How It Works

11-7. Using the Pagecontainer Widget

Problem

Solution

11-8. Creating a Dialog Box

Problem

Solution

How It Works

11-9. Creating a Navigation Box

Problem

Solution

How It Works

11-10. Creating a Panel

Problem

Solution

How It Works

11-11. Creating a Popup

Problem

Solution

How It Works

Closing the Popup

11-12. Creating Collapsibles

Problem

Solution

How It Works

11-13. Creating a List View

Problem

Solution

How It Works

11-14. Creating a Column Toggle Table

Problem

Solution

How It Works

11-15. Creating a Reflow Table

Problem

Solution

How It Works

11-16. Creating a Grid

Problem

Solution

How It Works

11-17. Creating Form and Form Controls

Problem

Solution

How It Works

11-18. Understanding the jQuery Mobile User-Initiated Events

Problem

Solution

11-19. Creating a Web Application Using jQuery Mobile Concepts

Problem

Solution

Summary

 Chapter 12: jqWidgets Framework

Downloading the jqWidgets Library

Installing the jqWidgets Library

The Code Template

Testing Web Pages Using AJAX Calls

12-1. Using Themes and CSS

Problem

Solution

12-2. Data Binding

Problem

Solution

12-3. Data Entry and Validation of Forms

Problem

Solution

How It Works

12-4. Using Other Data-Entry Widgets

Problem

Solution

12-5. Displaying Content Using the Expander Widget

Problem

Solution

How It Works

12-6. Displaying a Collection of Nested Lists Using the Listmenu Widget

Problem

Solution

How It Works

12-7. Displaying Content Using the Panel Widget

Problem

Solution

How It Works

12-8. Displaying Content Using the Tabs Widget

Problem

Solution

How It Works

12-9. Displaying Hierarchical Content Using the Tree Widget

Problem

Solution

How It Works

12-10. Displaying Tabular Data Using the Grid Widget

Problem

Solution

How It Works

12-11. Displaying Tabular Data Using the Data Table Widget

Problem

Solution

How It Works

12-12. Displaying Hierarchical Data Using the Tree Grid Widget

Problem

Solution

How It Works

12-13. Displaying HTML Elements Within a Window

Problem

Solution

How It Works

12-14. Viewing Contents in Multiple Dockable Windows

Problem

Solution

How It Works

12-15. Creating Charts

Problem

Solution

How It Works

12-16. Creating a Calendar

Problem

Solution

How It Works

12-17. Creating a Color Picker

Problem

Solution

How It Works

12-18. Creating an Editor Widget

Problem

Solution

How It Works

12-19. Creating a Menu

Problem

Solution

How It Works

12-20. Creating a Navigation Bar

Problem

Solution

How It Works

Summary

 Appendix A: Basic HTML5 and CSS3

A-1. Using HTML5

Code Structure

Structural Elements

Input Types and Attributes

Graphics Using Canvas

A-2. Using CSS3

Advantages of Using CSS

CSS Selector

CSS Box Model

Types of Styles

Cascading Styles

Examples

 Appendix B: Web Console

B-1. Web Browsers

B-2. Using the Web Console

B-2-1. Starting the Web Console in Firefox (Windows)

B-2-2. Starting the Web Console in Chrome (Windows)

B-2-3. Starting the Web Console in Internet Explorer (Windows)

B-2-4. Starting the Web Console in Safari (Mac OS)

 Appendix C: Deploy Web Application

C-1. Prerequisite: Downloading Java 7 JRE

C-2. Downloading and Installing Apache Tomcat

C-3. Starting and Stopping the Tomcat Server

C-4. Deploying the Web Application on the Tomcat Server

C-5. Installing IIS (Internet Information Services)

C-6. Deploying the Web Application on the IIS Server

C-7. Accessing a Deployed Web Application

 Appendix D: Logging, Error Handling, and Debugging

D-1. Logging

Basic Logging

Logging Framework

D-2. Error Handling

Try and Catch

Finally

Throw

D-3. Debugging

Index