You are previewing Beginning JavaScript® and CSS Development with jQuery.
O'Reilly logo
Beginning JavaScript® and CSS Development with jQuery

Book Description

jQuery is a JavaScript library that helps web developers create JavaScript applications that work well in any browser. This book demonstrates how to use jQuery to reduce the amount of code you need to write and reduce the amount of testing that is required. You?ll see how separation of presentation (CSS), markup (XHTML), and script (JavaScript and Ajax) in web pages is a crucial direction in web development for creating maintainable, accessible, cost-effective web sites. The featured full-color code syntax highlighting provides you with a visual reinforcement so you can see the various pieces and parts that make up each line and section of code for each language.

Table of Contents

  1. Copyright
  2. About the Author
  3. Credits
  4. Introduction
    1. Who This Book Is For
    2. What This Book Covers
    3. How This Book Is Structured
      1. Part 1: jQuery API
      2. Part II: jQuery UI
    4. What You Need to Use This Book
    5. Conventions
    6. Source Code
    7. Errata
    8. p2p.wrox.com
  5. I. jQuery API
    1. 1. Introduction to jQuery
      1. 1.1. What Does jQuery Do for Me?
      2. 1.2. Who Develops jQuery?
      3. 1.3. Obtaining jQuery
      4. 1.4. Installing jQuery
      5. 1.5. Programming Conventions
        1. 1.5.1. XHTML and CSS Conventions
          1. 1.5.1.1. Catching Errors in XHTML and CSS
            1. 1.5.1.1.1. Markup Errors in XHTML and HTML
            2. 1.5.1.1.2. Errors in CSS
          2. 1.5.1.2. ID and Class Naming Conventions
          3. 1.5.1.3. Generic Type Selectors
          4. 1.5.1.4. Storing and Organizing Files
          5. 1.5.1.5. Avoid Making Documents Inaccessible
          6. 1.5.1.6. Efficiency in Markup and CSS
        2. 1.5.2. JavaScript Conventions
          1. 1.5.2.1. Include All Script in External Documents
          2. 1.5.2.2. Write Clean, Consistent Code
            1. 1.5.2.2.1. Indenting and Line Length
            2. 1.5.2.2.2. Control Structures
            3. 1.5.2.2.3. Optional Curly Braces and Semicolons
            4. 1.5.2.2.4. Naming Variables, Functions, Objects, . . .
          3. 1.5.2.3. Namespace JavaScript Code
          4. 1.5.2.4. Avoid Browser Detection
      6. 1.6. Summary
    2. 2. Selecting and Filtering
      1. 2.1. The Origin of the Selectors API
      2. 2.2. Using the Selectors API
      3. 2.3. Filtering a Selection
        1. 2.3.1. Searching within a Selection with find()
        2. 2.3.2. Finding an Element's Siblings with siblings()
        3. 2.3.3. Selecting Specific Siblings
        4. 2.3.4. Searching Ancestors Using the parents() and parent() Methods
        5. 2.3.5. Selecting Children Elements
        6. 2.3.6. Selecting Elements via What You Don't Want
        7. 2.3.7. Selecting a Snippet of the Results
        8. 2.3.8. Adding More Elements to a Selection
        9. 2.3.9. Selecting One Specific Element from a Result Set
      4. 2.4. Summary
      5. 2.5. Exercises
    3. 3. Events
      1. 3.1. Assigning an Event with the Traditional Event Model
      2. 3.2. Assigning Events with the W3C Event Model
        1. 3.2.1. The this Object
        2. 3.2.2. The event Object
      3. 3.3. The Microsoft JScript Event Model
      4. 3.4. Creating a Universal Event API
        1. 3.4.1. Binding Events with jQuery's bind() Method
        2. 3.4.2. Binding Events with jQuery's Event Methods
        3. 3.4.3. Triggering Events
      5. 3.5. Summary
      6. 3.6. Exercises
    4. 4. Manipulating Content and Attributes
      1. 4.1. Setting and Accessing Attributes
      2. 4.2. Manipulating Class Names
      3. 4.3. Manipulating HTML and Text Content
        1. 4.3.1. Getting, Setting, and Removing Content
          1. 4.3.1.1. Setting Text or HTML Content
          2. 4.3.1.2. Setting Text or HTML Content for Multiple Items
          3. 4.3.1.3. Removing Content
        2. 4.3.2. Appending and Prepending Content
          1. 4.3.2.1. Fixing Firefox's innerHTML Form Bugs
          2. 4.3.2.2. Prepending Content
        3. 4.3.3. Inserting Beside Content
        4. 4.3.4. Inserting Beside Content via a Selection
        5. 4.3.5. Wrapping Content
          1. 4.3.5.1. Wrapping a Selection of Elements Individually
          2. 4.3.5.2. Wrapping a Collection of Elements
          3. 4.3.5.3. Wrapping an Element's Contents
          4. 4.3.5.4. Wrapping Elements Using an Object Reference
      4. 4.4. Replacing Elements
      5. 4.5. Removing Content
      6. 4.6. Cloning Content
      7. 4.7. Summary
      8. 4.8. Exercises
    5. 5. Arrays and Iteration
      1. 5.1. Basic Iteration
        1. 5.1.1. Calling each() Directly
        2. 5.1.2. Variable Scope
        3. 5.1.3. Emulating break and continue
        4. 5.1.4. Iterating a Selection
      2. 5.2. Filtering Selections and Arrays
        1. 5.2.1. Filtering a Selection
        2. 5.2.2. Filtering a Selection with a Callback Function
        3. 5.2.3. Filtering an Array
      3. 5.3. Mapping a Selection or an Array
        1. 5.3.1. Mapping a Selection
        2. 5.3.2. Mapping an Array
      4. 5.4. Array Utility Methods
        1. 5.4.1. Making an Array
        2. 5.4.2. Finding a Value within an Array
        3. 5.4.3. Merging Two Arrays
        4. 5.4.4. Removing Duplicate Items
      5. 5.5. Summary
      6. 5.6. Exercises
    6. 6. CSS
      1. 6.1. The css() Method
      2. 6.2. The outerWidth() and outerHeight() Methods
      3. 6.3. Summary
      4. 6.4. Exercises
    7. 7. AJAX
      1. 7.1. Making a Server Request
        1. 7.1.1. What's the Difference between GET and POST?
        2. 7.1.2. Formats Used to Transport Data with an AJAX Request
        3. 7.1.3. Making a GET Request with jQuery
          1. 7.1.3.1. Requesting Data Formatted in XML
          2. 7.1.3.2. Sending Data along with a Request
          3. 7.1.3.3. Requesting JSON Formatted Data
          4. 7.1.3.4. Making a POST Request
      2. 7.2. Loading HTML Snippets from the Server
      3. 7.3. Dynamically Loading JavaScript
      4. 7.4. AJAX Events
      5. 7.5. Making an AJAX-Style File Upload
      6. 7.6. Summary
      7. 7.7. Exercises
    8. 8. Effects
      1. 8.1. Showing and Hiding Elements
      2. 8.2. Sliding Elements
      3. 8.3. Fading Elements
      4. 8.4. Custom Animation
      5. 8.5. Summary
      6. 8.6. Exercises
    9. 9. Plugins
      1. 9.1. Writing a Plugin
      2. 9.2. Good Practice for jQuery Plugin Development
      3. 9.3. Summary
      4. 9.4. Exercises
  6. II. jQuery UI
    1. 10. Implementing Drag-and-Drop
      1. 10.1. Making Elements Draggable
      2. 10.2. Making Elements Draggable with Ghosting
      3. 10.3. Dragging between Windows in Safari
      4. 10.4. Delegating Drop Zones for Dragged Elements
      5. 10.5. Summary
      6. 10.6. Exercises
    2. 11. Drag-and-Drop Sorting
      1. 11.1. Making a List Sortable
      2. 11.2. Customizing Sortables
      3. 11.3. Saving the State of Sorted Lists
      4. 11.4. Summary
      5. 11.5. Exercises
    3. 12. Selection by Drawing a Box
      1. 12.1. Introducing the Selectables Plugin
      2. 12.2. Summary
      3. 12.3. Exercises
    4. 13. Accordion UI
      1. 13.1. Building an Accordion UI
      2. 13.2. Setting Auto-Height
      3. 13.3. Changing the Default Pane
      4. 13.4. Toggling the alwaysOpen Option
      5. 13.5. Changing the Accordion Event
      6. 13.6. Filling the Height of the Parent Element
      7. 13.7. Setting the Header Elements
      8. 13.8. Styling Selected Panes
      9. 13.9. Selecting a Content Pane by Location
      10. 13.10. Summary
      11. 13.11. Exercises
    5. 14. Datepicker
      1. 14.1. Implementing a Datepicker
        1. 14.1.1. Styling the Datepicker
        2. 14.1.2. Setting the Range of Allowed Dates
        3. 14.1.3. Allowing a Date Range to Be Selected
      2. 14.2. Localizing the Datepicker
        1. 14.2.1. Setting the Date Format
        2. 14.2.2. Localizing Datepicker Text
        3. 14.2.3. Changing the Starting Weekday
      3. 14.3. Summary
      4. 14.4. Exercises
    6. 15. Dialogs
      1. 15.1. Implementing a Dialog
      2. 15.2. Examining a Dialog's Markup
      3. 15.3. Making a Modal Dialog
      4. 15.4. Auto-Opening the Dialog
      5. 15.5. Controlling Dynamic Interaction
      6. 15.6. Animating the Dialog
      7. 15.7. Working with Dialog Events
      8. 15.8. Summary
      9. 15.9. Exercises
    7. 16. Tabs
      1. 16.1. Implementing Tabs
      2. 16.2. Loading Remote Content via AJAX
      3. 16.3. Animating Tab Transitions
      4. 16.4. Summary
      5. 16.5. What Next?
      6. 16.6. Exercises
  7. A. Answers to Exercises
    1. A.1. Chapter 2
    2. A.2. Chapter 3
    3. A.3. Chapter 4
    4. A.4. Chapter 5
    5. A.5. Chapter 6
    6. A.6. Chapter 7
    7. A.7. Chapter 8
    8. A.8. Chapter 9
    9. A.9. Chapter 10
    10. A.10. Chapter 11
    11. A.11. Chapter 12
    12. A.12. Chapter 13
    13. A.13. Chapter 14
    14. A.14. Chapter 15
    15. A.15. Chapter 16
  8. B. Selectors Supported by jQuery
  9. C. Selecting and Filtering
  10. D. Events
    1. D.1. Event Object Normalization
  11. E. Manipulating Attributes and Data Caching
  12. F. Manipulating Content
  13. G. AJAX Methods
  14. H. CSS
  15. I. Utilities
  16. J. Draggables and Droppables
  17. K. Sortables
  18. L. Selectables
    1. L.1. Notes
  19. M. Effects
    1. M.1. Speed
    2. M.2. Callback Function
  20. N. Accordion
  21. O. Datepicker
  22. P. Dialog
  23. Q. Tabs
  24. R. Re-Sizables
  25. S. Sliders