You are previewing jQuery 2 Recipes: A Problem-Solution Approach.
O'Reilly logo
jQuery 2 Recipes: A Problem-Solution Approach

Book Description

"

jQuery is often referred to as the 'write less, do more' JavaScript library. It allows a few clear lines of elegant, well-tested, code to replace many pages of complex hand-coded script, speeding development times and providing substantial cost savings.

You will find jQuery 2 Recipes' problem-solution approach to be an excellent value and a feature-packed resource as you begin to include jQuery in your own projects. This book is bursting with fully-worked example recipes showing the core jQuery frameworks (jQuery, jQuery Mobile, jQuery UI) in action. Starting with fundamental principals and progressing to more advanced topics you'll be shown how to make the very best use of jQuery every step of the way.

Early on, you'll learn to work confidently with dynamic data and to handle the jQuery events that form the foundation of your application. We'll then build on this foundation to demonstrate how fully working user-interface animations and AJAX data-validation can be constructed within jQuery. We'll show how add-on libraries like jQwidgets can be deployed to create professional quality apps for both the desktop and web with minimal coding. Finally, a full set of debugging and error-handling recipes is included to help you track down bugs and ensure your code is as robust as it can be.

"

Table of Contents

  1. Cover
  2. Title
  3. Copyright
  4. Dedication
  5. Contents at a Glance
  6. Contents
  7. About the Author
  8. About the Technical Reviewer
  9. Acknowledgments
  10. Chapter 1: Introduction
    1. 1-1. About jQuery 2.0
    2. 1-2. Migration Plan
    3. 1-3. Objects–Basic Concept
    4. 1-4. Introduction to JavaScript
      1. 1-4-1. Data Types
      2. 1-4-2. Commonly Used JavaScript Objects and Events
    5. 1-5. About XML
    6. 1-6. About JSON
    7. 1-7. Introduction to Web Services
      1. 1-7-1. SOAP Web Services
      2. 1-7-2. RESTful Web Services
    8. 1-8. About jQuery UI
    9. 1-9. About jQueryMobile
    10. 1-10. Introduction to jqWidgets
    11. 1-12. About Eclipse IDE
    12. Summary
  11. Chapter 2: jQuery Fundamentals
    1. 2-1. Setting Up jQuery
      1. Setting Up the Development Environment
    2. 2-2. Using Conditional Statements
      1. if...else Statements
      2. switch Statements
    3. 2-3. Looping
      1. for Loops
      2. while Loops
    4. 2-4. Understanding the Document Object Model (DOM)
      1. The DOM Structure
    5. 2-5. Navigating the DOM
    6. 2-6. Using Attributes vs. Properties
    7. 2-7. Commonly Used Objects in jQuery
      1. Map Object
      2. HTML Element
      3. jQuery Objects
    8. 2-8. Using the jQuery Function
      1. jQuery Function Arguments
    9. 2-9. jQuery Methods Chaining
    10. Summary
  12. Chapter 3: jQuery Selectors
    1. 3-1. Examples
      1. 3-1-1. Human Resources Example
      2. 3-1-2. Publishing House Example
      3. 3-1-3. Photo Album Example
    2. 3-2. Selecting the HTML Element by its ID
      1. Problem
      2. Solution
      3. How It Works
    3. 3-3. Selecting All the HTML Elements on a Page
      1. Problem
      2. Solution
      3. How It Works
    4. 3-4. Selecting an HTML Element by ID to Highlight All Child Nodes
      1. Problem
      2. Solution
      3. How It Works
    5. 3-5. Selecting HTML Elements by Tag Name
      1. Problem
      2. Solution
      3. How It Works
    6. 3-6. Selecting HTML Elements by Tag Name to Highlight a Focused Field
      1. Problem
      2. Solution
      3. How It Works
    7. 3-7. Selecting HTML Elements by Class Name
      1. Problem
      2. Solution
      3. How It Works
    8. 3-8. Selecting HTML Elements that Match Any of the Specified Multiple Selectors
      1. Problem
      2. Solution
      3. How It Works
    9. 3-9. Selecting HTML Elements with an Attribute’s Value Starting with a Specified Value Followed by a Hyphen
      1. Problem
      2. Solution
      3. How It Works
    10. 3-10. Selecting HTML Elements with the Attribute’s Value Containing a Specified Value as a Word (Separated by Spaces)
      1. Problem
      2. Solution
      3. How It Works
    11. 3-11. Selecting HTML Elements that Have a Specified Attribute Regardless of its Value
      1. Problem
      2. Solution
      3. How It Works
    12. 3-12. Selecting the nth Item from the Selected HTML Elements
      1. Problem
      2. Solution
      3. How It Works
    13. 3-13. Selecting Even and Odd Numbered Items from the Matched HTML Elements
      1. Problem
      2. Solution
      3. How It Works
    14. 3-14. Selecting All Elements up to nth Element from the Matched HTML Elements
      1. Problem
      2. Solution
      3. How It Works
    15. 3-15. Selecting All Header HTML Elements
      1. Problem
      2. Solution
      3. How It Works
    16. 3-16. Selecting the First and/or Last Element from the Selected HTML Elements
      1. Problem
      2. Solution
      3. How It Works
    17. 3-17. Excluding Some Elements from the Matched HTML Elements
      1. Problem
      2. Solution
      3. How It Works
    18. 3-18. Selecting the First or nth Child Node of the Matched HTML Element’s Parent
      1. Problem
      2. Solution
      3. How It Works
    19. 3-19. Selecting All Elements that Contain the Specified Text
      1. Problem
      2. Solution
      3. How It Works
    20. 3-20. Selecting Elements that Have No Child Nodes (Including Text)
      1. Problem
      2. Solution
      3. How It Works
    21. 3-21. Selecting Elements that Have at Least One Child Node Matching the Specified Selector
      1. Problem
      2. Solution
      3. How It Works
    22. 3-22. Selecting Form Elements Based on Their Type and Attributes
      1. Problem
      2. Solution
      3. How It Works
    23. Summary
  13. Chapter 4: jQuery Selectors Filtering and Expansion
    1. 4-1. Narrowing the Set of Selected Elements by Using Selector/jQuery Object Filter
      1. Problem
      2. Solution
      3. How It Works
    2. 4-2. Narrowing the Set of Selected Elements by Using the Filter Function
      1. Problem
      2. Solution
      3. How It Works
    3. 4-3. Narrowing the Set of Selected Elements by Checking Their Descendant Nodes’ Attributes
      1. Problem
      2. Solution
      3. How It Works
    4. 4-4. Narrowing the Set of Selected Elements by Excluding Elements Using Selectors
      1. Problem
      2. Solution
      3. How It Works
    5. 4-5. Narrowing Down the Set of Selected Elements by Excluding Elements Using a Function
      1. Problem
      2. Solution
      3. How It Works
    6. 4-6. Narrowing Down the Set of Selected Elements by Selecting a Range of Elements by Index
      1. Problem
      2. Solution
      3. How It Works
    7. 4-7. Adding More Elements to the Set of Selected Elements
      1. Problem
      2. Solution
      3. How It Works
    8. 4-8. Checking if Common HTML Element(S) Exist in Two Sets of Selected HTML Elements
      1. Problem
      2. Solution
      3. How It Works
    9. 4-9. Iterating Over Each HTML Element in the jQuery Object to Perform an Action
      1. Problem
      2. Solution
      3. How It Works
    10. 4-10. Reverting to the Most Recent Expansion or Narrowing a Set of Selected Elements
      1. Problem
      2. Solution
      3. How It Works
    11. 4-11. Adding the Previous Set of Elements to the Current Set
      1. Problem
      2. Solution
      3. How It Works
    12. 4-12. Creating a New jQuery Object from an Existing jQuery Object Using a Function
      1. Problem
      2. Solution
      3. How It Works
    13. Summary
  14. Chapter 5: DOM Traversing
    1. 5-1. Getting the Child Nodes of Each Selected Element
      1. Problem
      2. Solution
      3. How It Works
    2. 5-2. Getting the Children Nodes of All Selected Elements, Including Text and Comments Nodes
      1. Problem
      2. Solution
      3. How It Works
    3. 5-3. Getting the Descendant Nodes of All Selected Elements Filtered by a Specified Selector, jQuery Object, or HTML Element
      1. Problem
      2. Solution
      3. How It Works
    4. 5-4. Getting the First Ancestor of Each Selected Element that Matches the Specified Selector
      1. Problem
      2. Solution
      3. How It Works
    5. 5-5. Getting the Parent of Each Selected Element
      1. Problem
      2. Solution
      3. How It Works
    6. 5-6. Getting the Ancestors of Each Selected Element
      1. Problem
      2. Solution
      3. How It Works
    7. 5-7. Getting the Ancestors of Each Selected Element Until a Node Is Reached
      1. Problem
      2. Solution
      3. How It Works
    8. 5-8. Getting the Immediately Preceding Sibling of Each Element of the Selected Elements
      1. Problem
      2. Solution
      3. How It Works
    9. 5-9. Getting the Immediately Following Sibling of Each Element from the Set
      1. Problem
      2. Solution
      3. How It Works
    10. 5-10. Getting All Siblings of Each Element of the Set
      1. Problem
      2. Solution
      3. How It Works
    11. Summary
  15. Chapter 6: DOM Manipulation
    1. 6-1. Adding CSS Class(es) to All Selected Elements
      1. Problem
      2. Solution
      3. How It Works
    2. 6-2. Checking if a CSS Class Is Associated with Any of the Selected Elements
      1. Problem
      2. Solution
      3. How It Works
    3. 6-3. Removing CSS Class(es) from Each Selected Element
      1. Problem
      2. Solution
      3. How It Works
    4. 6-4. Toggling CSS Class(es) for Each Element of the Selected Elements
      1. Problem
      2. Solution
      3. How It Works
    5. 6-5. Toggling CSS Class(es) for Selected Elements Based on the Return Value of a Function
      1. Problem
      2. Solution
      3. How It Works
    6. 6-6. Getting and Setting the CSS Property of the Selected Element(s)
      1. Problem
      2. Solution
      3. How It Works
    7. 6-7. Setting Multiple CSS Properties of All the Selected Elements
      1. Problem
      2. Solution
      3. How It Works
    8. 6-8. Setting a Single CSS Property of Each Element in the Set of Selected Elements Based on a Function
      1. Problem
      2. Solution
      3. How It Works
    9. 6-9. Getting the Attribute Value of the First Element in a Selection of Elements
      1. Problem
      2. Solution
      3. How It Works
    10. 6-10. Setting the Attribute Value(s) of All the Selected Elements
      1. Problem
      2. Solution
      3. How It Works
    11. 6-11. Setting the Attribute Value of All the Selected Elements Based on a Function
      1. Problem
      2. Solution
      3. How It Works
    12. 6-12. Getting the Property Value of the First Element of the Selected Elements
      1. Problem
      2. Solution
      3. How It Works
    13. 6-13. Setting the Property Value of All Selected Elements
      1. Problem
      2. Solution
      3. How It Works
    14. 6-14. Getting and Setting the Value Property of Selected Elements
      1. Problem
      2. Solution
      3. How It Works
    15. 6-15. Getting or Setting the Value of Each Element from the Set of Selected Elements Using a Function
      1. Problem
      2. Solution
      3. How It Works
    16. 6-16. Getting the HTML of the First Element of the Selected Elements
      1. Problem
      2. Solution
      3. How It Works
    17. 6-17. Replacing the HTML in All the Selected Elements
      1. Problem
      2. Solution
      3. How It Works
    18. 6-18. Getting the Combined Contents of Each of the Selected Elements
      1. Problem
      2. Solution
      3. How It Works
    19. 6-19. Inserting Content at the End of a Selection
      1. Problem
      2. Solution
      3. How It Works
    20. 6-20. Inserting Content at the Beginning of Each Element of the Selected Elements
      1. Problem
      2. Solution
      3. How It Works
    21. 6-21. Wrapping an HTML Structure Around Each Selected Element
      1. Problem
      2. Solution
      3. How It Works
    22. 6-22. Wrapping an HTML Structure Around the Content of Each Selected Element
      1. Problem
      2. Solution
      3. How It Works
    23. 6-23. Wrapping an HTML Structure Around All Selected Elements
      1. Problem
      2. Solution
      3. How It Works
    24. 6-24. Inserting Content After Each Selected Element
      1. Problem
      2. Solution
      3. How It Works
    25. 6-25. Copying All Selected Elements
      1. Problem
      2. Solution
      3. How It Works
    26. 6-26. Removing Selected Elements from the DOM
      1. Problem
      2. Solution
      3. How It Works
    27. 6-27. Removing the Child Nodes of All the Selected Elements from the DOM
      1. Problem
      2. Solution
      3. How It Works
    28. 6-28. Removing the Parent of Each Selected Element
      1. Problem
      2. Solution
      3. How It Works
    29. 6-29. Replacing Selected Items with New Items (Specified by HTMLString) in the DOM
      1. Problem
      2. Solution
      3. How It Works
    30. Summary
  16. Chapter 7: Event Handling
    1. 7-1. Performing an Action When an Event Occurs
      1. Problem
      2. Solution
      3. How It Works
    2. 7-2. Preventing a Default Event Handler
      1. Problem
      2. Solution
      3. How It Works
    3. 7-3. Binding Different Event Handlers to the Same Element
      1. Problem
      2. Solution
      3. How It Works
    4. 7-4. Getting an Event Object’s Properties
      1. Problem
      2. Solution
      3. How It Works
    5. 7-5. Passing Custom Data to the Event Handler
      1. Problem
      2. Solution
      3. How It Works
    6. 7-6. Event Propagation
      1. Problem
      2. Solution
      3. How It Works
    7. 7-7. Event Delegation
      1. Problem
      2. Solution
      3. How It Works
    8. 7-8. Triggering an Event Programmatically
      1. Problem
      2. Solution
      3. How It Works
    9. 7-9. Restricting Event Handler Execution
      1. Problem
      2. Solution
      3. How It Works
    10. 7-10. Removing the Event Handler
      1. Problem
      2. Solution
      3. How It Works
    11. Summary
  17. Chapter 8: jQuery Effects and Animation
    1. Options for Effects and Animations Methods
    2. 8-1. Showing and Hiding Elements
      1. Problem
      2. Solution
      3. How It Works
    3. 8-2. Toggling Between an Element’s Show and Hide States
      1. Problem
      2. Solution
      3. How It Works
    4. 8-3. Effects Methods for Hiding and Showing Elements
      1. Problem
      2. Solution
      3. How It Works
    5. 8-4. Applying Custom Animation to the CSS Properties of Selected Elements
      1. Problem
      2. Solution
      3. How It Works
    6. 8-5. Displaying Functions in the Effects Queue of Selected Elements
      1. Problem
      2. Solution
      3. How It Works
    7. 8-6. Replacing Functions in the Effects Queue of Selected Elements
      1. Problem
      2. Solution
      3. How It Works
    8. 8-7. Adding Custom Functions in the Effects Queue
      1. Problem
      2. Solution
      3. How It Works
    9. 8-8. Controlling the Animation by Pausing It
      1. Problem
      2. Solution
      3. How It Works
    10. 8-9. Removing All Remaining Effects and Animations Functions from the Effects Queue
      1. Problem
      2. Solution
      3. How It Works
    11. 8-10. Stopping the Currently Running Animation
      1. Problem
      2. Solution
      3. How It Works
    12. 8-11. Determining Global Settings for All the Animation Effects
      1. Problem
      2. Solution
    13. Summary
  18. Chapter 9: jQuery AJAX
    1. 9-1. Using jQuery AJAX API Calls to Get Plain Text Data from the Server
      1. Problem
      2. Solution
      3. How It Works
    2. 9-2. Using jQuery AJAX API Calls to Get HTML Text from the Server
      1. Problem
      2. Solution
      3. How It Works
    3. 9-3. Using jQuery AJAX API Calls to Get Data in XML Format from the Server
      1. Problem
      2. Solution
      3. How It Works
    4. 9-4. Using jQuery AJAX API Calls to Get Data in the JSON Format from the Server
      1. Problem
      2. Solution
      3. How It Works
    5. 9-5. Using jQuery AJAX API Calls to Get the Script from the Server
      1. Problem
      2. Solution
      3. How It Works
    6. 9-6. Sending Data to the Server Using a GET Request Method
      1. Problem
      2. Solution
      3. How It Works
    7. 9-7. Sending Form Data to the Server Using a POST Request Method
      1. Problem
      2. Solution
      3. How It Works
    8. 9-8. Using AJAX Events at the Request Level
      1. Problem
      2. Solution
    9. 9-9. Using AJAX Events at the Global Level
      1. Problem
      2. Solution
    10. 9-10. Order of AJAX Events at the Request and Global Levels
      1. Problem
      2. Solution
      3. How It Works
    11. Summary
  19. Chapter 10: jQuery UI
    1. Creating Widgets
      1. Creating Widgets and Setting Options
      2. Executing a Widget’s Methods
      3. Setting Callback Functions
    2. Downloading the jQuery UI Library and Themes
    3. 10-1. Using the CSS Framework and Icons
      1. Problem
      2. Solution
    4. 10-2. Creating the Autocomplete Widget
      1. Problem
      2. Solution
      3. How It Works
    5. 10-3. Creating the Spinner Widget
      1. Problem
      2. Solution
      3. How It Works
    6. 10-4. Creating the Slider Widget
      1. Problem
      2. Solution
      3. How It Works
    7. 10-5. Creating the Datepicker Widget
      1. Problem
      2. Solution
      3. How It Works
    8. 10-6. Creating the Tooltip Widget
      1. Problem
      2. Solution
      3. How It Works
    9. 10-7. Creating the Button Widget
      1. Problem
      2. Solution
      3. How It Works
    10. 10-8. Creating the Dialog Widget
      1. Problem
      2. Solution
      3. How It Works
    11. 10-9. Creating the Progress Bar Widget
      1. Problem
      2. Solution
      3. How It Works
    12. 10-10. Creating the Tabs Widget
      1. Problem
      2. Solution
      3. How It Works
    13. 10-11. Creating the Accordion Widget
      1. Problem
      2. Solution
      3. How It Works
    14. 10-12. Creating the Menu Widget
      1. Problem
      2. Solution
      3. How It Works
    15. 10-13. Creating a Data-Entry Form Using jQuery UI Widgets
      1. Problem
      2. Solution
      3. How It Works
    16. 10-14. Adding an Animation Effect Using addClass() or the animate() Method
      1. Problem
      2. Solution
      3. How It Works
    17. 10-15. Using jQuery UI Animation Effects on Selected Elements
      1. Problem
      2. Solution
      3. How It Works
    18. 10-16. Creating Draggable and Droppable Elements
      1. Problem
      2. Solution
      3. How It Works
    19. 10-17. Creating Drag-and-Drop Functionality in a Photo Album Application
      1. Problem
      2. Solution
      3. How It Works
    20. Summary
  20. Chapter 11: jQuery Mobile
    1. Downloading the jQuery Mobile Library
      1. Testing on Mobile Devices
      2. Mobile Applications
    2. 11-1. CSS Framework: CSS Classes, Themes, and Icons
      1. Problem
      2. Solution
      3. Common CSS Classes
      4. Themes
      5. Custom Themes
      6. Icons
    3. 11-2. Understanding Page Structure
      1. Problem
      2. Solution
      3. How It Works
    4. 11-3. Creating Buttons and Links
      1. Problem
      2. Solution
      3. How It Works
    5. 11-4. Creating Headers and Footers
      1. Problem
      2. Solution
      3. How It Works
    6. 11-5. Navigating Among Pages
      1. Problem
      2. Solution
      3. How It Works
    7. 11-6. Applying Transition Effects to Pages and Dialog Boxes
      1. Problem
      2. Solution
      3. How It Works
    8. 11-7. Using the Pagecontainer Widget
      1. Problem
      2. Solution
    9. 11-8. Creating a Dialog Box
      1. Problem
      2. Solution
      3. How It Works
    10. 11-9. Creating a Navigation Box
      1. Problem
      2. Solution
      3. How It Works
    11. 11-10. Creating a Panel
      1. Problem
      2. Solution
      3. How It Works
    12. 11-11. Creating a Popup
      1. Problem
      2. Solution
      3. How It Works
      4. Closing the Popup
    13. 11-12. Creating Collapsibles
      1. Problem
      2. Solution
      3. How It Works
    14. 11-13. Creating a List View
      1. Problem
      2. Solution
      3. How It Works
    15. 11-14. Creating a Column Toggle Table
      1. Problem
      2. Solution
      3. How It Works
    16. 11-15. Creating a Reflow Table
      1. Problem
      2. Solution
      3. How It Works
    17. 11-16. Creating a Grid
      1. Problem
      2. Solution
      3. How It Works
    18. 11-17. Creating Form and Form Controls
      1. Problem
      2. Solution
      3. How It Works
    19. 11-18. Understanding the jQuery Mobile User-Initiated Events
      1. Problem
      2. Solution
    20. 11-19. Creating a Web Application Using jQuery Mobile Concepts
      1. Problem
      2. Solution
    21. Summary
  21. Chapter 12: jqWidgets Framework
    1. Downloading the jqWidgets Library
    2. Installing the jqWidgets Library
    3. The Code Template
    4. Testing Web Pages Using AJAX Calls
    5. 12-1. Using Themes and CSS
      1. Problem
      2. Solution
    6. 12-2. Data Binding
      1. Problem
      2. Solution
    7. 12-3. Data Entry and Validation of Forms
      1. Problem
      2. Solution
      3. How It Works
    8. 12-4. Using Other Data-Entry Widgets
      1. Problem
      2. Solution
    9. 12-5. Displaying Content Using the Expander Widget
      1. Problem
      2. Solution
      3. How It Works
    10. 12-6. Displaying a Collection of Nested Lists Using the Listmenu Widget
      1. Problem
      2. Solution
      3. How It Works
    11. 12-7. Displaying Content Using the Panel Widget
      1. Problem
      2. Solution
      3. How It Works
    12. 12-8. Displaying Content Using the Tabs Widget
      1. Problem
      2. Solution
      3. How It Works
    13. 12-9. Displaying Hierarchical Content Using the Tree Widget
      1. Problem
      2. Solution
      3. How It Works
    14. 12-10. Displaying Tabular Data Using the Grid Widget
      1. Problem
      2. Solution
      3. How It Works
    15. 12-11. Displaying Tabular Data Using the Data Table Widget
      1. Problem
      2. Solution
      3. How It Works
    16. 12-12. Displaying Hierarchical Data Using the Tree Grid Widget
      1. Problem
      2. Solution
      3. How It Works
    17. 12-13. Displaying HTML Elements Within a Window
      1. Problem
      2. Solution
      3. How It Works
    18. 12-14. Viewing Contents in Multiple Dockable Windows
      1. Problem
      2. Solution
      3. How It Works
    19. 12-15. Creating Charts
      1. Problem
      2. Solution
      3. How It Works
    20. 12-16. Creating a Calendar
      1. Problem
      2. Solution
      3. How It Works
    21. 12-17. Creating a Color Picker
      1. Problem
      2. Solution
      3. How It Works
    22. 12-18. Creating an Editor Widget
      1. Problem
      2. Solution
      3. How It Works
    23. 12-19. Creating a Menu
      1. Problem
      2. Solution
      3. How It Works
    24. 12-20. Creating a Navigation Bar
      1. Problem
      2. Solution
      3. How It Works
    25. Summary
  22. Appendix A: Basic HTML5 and CSS3
    1. A-1. Using HTML5
      1. Code Structure
      2. Structural Elements
      3. Input Types and Attributes
      4. Graphics Using Canvas
    2. A-2. Using CSS3
      1. Advantages of Using CSS
      2. CSS Selector
      3. CSS Box Model
      4. Types of Styles
      5. Cascading Styles
      6. Examples
  23. Appendix B: Web Console
    1. B-1. Web Browsers
    2. B-2. Using the Web Console
      1. B-2-1. Starting the Web Console in Firefox (Windows)
      2. B-2-2. Starting the Web Console in Chrome (Windows)
      3. B-2-3. Starting the Web Console in Internet Explorer (Windows)
      4. B-2-4. Starting the Web Console in Safari (Mac OS)
  24. Appendix C: Deploy Web Application
    1. C-1. Prerequisite: Downloading Java 7 JRE
    2. C-2. Downloading and Installing Apache Tomcat
    3. C-3. Starting and Stopping the Tomcat Server
    4. C-4. Deploying the Web Application on the Tomcat Server
    5. C-5. Installing IIS (Internet Information Services)
    6. C-6. Deploying the Web Application on the IIS Server
    7. C-7. Accessing a Deployed Web Application
  25. Appendix D: Logging, Error Handling, and Debugging
    1. D-1. Logging
      1. Basic Logging
      2. Logging Framework
    2. D-2. Error Handling
      1. Try and Catch
      2. Finally
      3. Throw
    3. D-3. Debugging
  26. Index