You are previewing Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques.
O'Reilly logo
Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques

Book Description

Better Interaction Design and Web Development with Simple JavaScript Techniques

  • Create better, cross-platform JavaScript code

  • Learn detailed solutions to specific client-side problems

  • For web designers who want to create interactive elements for their designs

  • For developers who want to create the best user interface for their web applications.

In Detail

jQuery is a powerful JavaScript library that can enhance your websites regardless of your background. In this book, creators of the popular jQuery learning resource, LearningjQuery.com, share their knowledge, experience, and enthusiasm about jQuery to help you get the most from the library and to make your web applications shine.

For designers, jQuery leverages existing CSS and HTML skills, allowing you to dynamically find and change any aspect of a page.This book provides a gentle introduction to jQuery concepts, allowing you to add interactions and animations to your pages - even if previous attempts at writing JavaScript have left you baffled.

For programmers, jQuery offers an open -source, standards-compliant, unobtrusive approach to writing complex JavaScript applications. This book will guide you past the pitfalls associated with AJAX, events, effects, and advanced JavaScript language features.

What you will learn from this book?

  • Use selectors to get anything you want from a page

  • Make things happen on your page with events

  • Add flair to your actions with animation effects

  • Change your page on command with DOM manipulation

  • Use AJAX to make your site buzzword compliant!

  • Transform drab, static information containers into beautiful, dynamic tables

  • Breathe new life into online forms

  • Create dynamic shufflers, rotators, and galleries

  • Get started with three official jQuery plug-ins, and even write your own

Approach

This book begins with a tutorial to jQuery, followed by an examination of common, real-world client-side problems, and solutions for each of them making it an invaluable resource for answers to all your jQuery questions.

Who this book is written for?

This book is for web designers who want to create interactive elements for their designs, and for developers who want to create the best user interface for their web applications.

The reader will need the basics of HTML and CSS, and should be comfortable with the syntax of JavaScript. No knowledge of jQuery is assumed, nor is experience with any other JavaScript libraries required.

Table of Contents

  1. Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques
    1. Table of Contents
    2. Learning jQuery
    3. Credits
    4. About the Authors
    5. About the Reviewers
    6. Preface
      1. What This Book Covers
      2. Who This Book Is for
      3. Conventions
        1. Reader Feedback
        2. Customer Support
        3. Downloading the Example Code for the Book
        4. Errata
        5. Questions
    7. 1. Getting Started
      1. What jQuery Does
      2. Why jQuery Works Well
      3. Our First jQuery Document
        1. Downloading jQuery
        2. Setting Up the HTML Document
        3. Writing the jQuery Code
          1. Finding the Poem Text
          2. Injecting the New Class
          3. Executing the Code
          4. The Finished Product
      4. Summary
    8. 2. Selectors—How to Get Anything You Want
      1. The Document Object Model
      2. The $() Factory Function
      3. CSS Selectors
        1. Styling List-Item Levels
      4. XPath Selectors
        1. Styling Links
      5. Custom Selectors
        1. Styling Alternate Rows
      6. DOM Traversal Methods
        1. Styling the Header Row
        2. Styling Category Cells
        3. Chaining
      7. Accessing DOM Elements
      8. Summary
    9. 3. Events—How to Pull the Trigger
      1. Performing Tasks on Page Load
        1. Timing of Code Execution
        2. Multiple Scripts on One Page
        3. Shortcuts for Code Brevity
      2. Simple Events
        1. A Simple Style Switcher
          1. Enabling the Other Buttons
          2. Event Handler Context
          3. Further Consolidation
        2. Shorthand Events
      3. Compound Events
        1. Showing and Hiding Advanced Features
        2. Highlighting Clickable Items
        3. The Journey of an Event
        4. Side Effects of Event Bubbling
      4. Limiting and Ending Events
        1. Preventing Event Bubbling
          1. Event Targets
          2. Stopping Event Propagation
          3. Default Actions
        2. Removing an Event Handler
      5. Simulating User Interaction
      6. Summary
    10. 4. Effects—How to Add Flair to Your Actions
      1. Inline CSS Modification
      2. Basic Hide and Show
      3. Effects and Speed
        1. Speeding In
        2. Fading In and Fading Out
      4. Multiple Effects
        1. Building an Animated show()
        2. Creating a Custom Animation
          1. Positioning with CSS
        3. Making Sense of the Numbers
        4. Improving the Custom Animation
      5. Simultaneous versus Queued Effects
        1. Working with a Single Set of Elements
        2. Working with Multiple Sets of Elements
          1. Callbacks
      6. In a Nutshell
      7. Summary
    11. 5. DOM Manipulation—How to Change Your Page on Command
      1. Manipulating Attributes
        1. Non-class Attributes
          1. The $() Factory Function Revisited
      2. Inserting New Elements
      3. Moving Elements
        1. Marking, Numbering, and Linking the Context
        2. Appending Footnotes
      4. Wrapping Elements
      5. Copying Elements
        1. Clone Depth
        2. Cloning for Pull Quotes
          1. A CSS Diversion
          2. Back to the Code
          3. Prettifying the Pull Quotes
      6. DOM Manipulation Methods in a Nutshell
      7. Summary
    12. 6. AJAX—How to Make Your Site Buzzword-Compliant
      1. Loading Data on Demand
        1. Appending HTML
        2. Working with JavaScript Objects
          1. Retrieving a JavaScript Object
          2. Global jQuery Functions
          3. Executing a Script
        3. Loading an XML Document
      2. Choosing a Data Format
      3. Passing Data to the Server
        1. Performing a GET Request
        2. Performing a POST Request
        3. Serializing a Form
      4. Keeping an Eye on the Request
      5. AJAX and Events
        1. Scoping an Event-Binding Function
        2. Using Event Bubbling
      6. Security Limitations
      7. Summary
    13. 7. Table Manipulation
      1. Sorting
        1. Server-Side Sorting
          1. Preventing Page Refreshes
        2. JavaScript Sorting
          1. Row Grouping Tags
          2. Basic Alphabetical Sorting
          3. The Power of Plug-ins
          4. Performance Concerns
          5. Finessing the Sort Keys
          6. Sorting Other Types of Data
          7. Column Highlighting
          8. Alternating Sort Directions
      2. Pagination
        1. Server-Side Pagination
          1. Sorting and Paging Go Together
        2. JavaScript Pagination
          1. Displaying the Pager
          2. Enabling the Pager Buttons
          3. Marking the Current Page
          4. Paging with Sorting
      3. The Finished Code
      4. Advanced Row Striping
        1. Three-color Alternating Pattern
        2. Alternating Triplets
      5. Row Highlighting
      6. Tooltips
      7. Collapsing and Expanding
      8. Filtering
        1. Filter Options
          1. Collecting Filter Options from Content
          2. Reversing the Filters
        2. Interacting with Other Code
          1. Row Striping
          2. Expanding and Collapsing
      9. The Finished Code
      10. Summary
    14. 8. Forms with Function
      1. Progressively Enhanced Form Styling
        1. The Legend
        2. Required Field Messages
          1. A Regular Expression Digression
          2. Inserting the Field-Message Legend
        3. Conditionally Displayed Fields
      2. Form Validation
        1. Immediate Feedback
          1. Required Fields
          2. Required Formats
        2. A Final Check
      3. Checkbox Manipulation
      4. The Finished Code
      5. Placeholder Text for Fields
      6. AJAX Auto-Completion
        1. On the Server
        2. In the Browser
        3. Populating the Search Field
        4. Keyboard Navigation
          1. Handling the Arrow Keys
          2. Inserting Suggestions in the Field
          3. Removing the Suggestion List
        5. Auto-Completion versus Live Search
      7. The Finished Code
      8. Input Masking
        1. Shopping Cart Table Structure
        2. Rejecting Non-numeric Input
      9. Numeric Calculations
        1. Parsing and Formatting Currency
          1. Dealing with Decimal Places
        2. Other Calculations
          1. Rounding Values
          2. Finishing Touches
      10. Deleting Items
      11. Editing Shipping Information
      12. The Finished Code
      13. Summary
    15. 9. Shufflers and Rotators
      1. Headline Rotator
        1. Setting Up the Page
        2. Retrieving the Feed
        3. Setting Up the Rotator
        4. The Headline Rotate Function
        5. Pause on Hover
        6. Retrieving a Feed from a Different Domain
        7. Gratuitous Inner-fade Effect
      2. An Image Carousel
        1. Setting Up the Page
        2. Revising the Styles with JavaScript
        3. Shuffling Images when Clicked
        4. Adding Sliding Animation
        5. Displaying Action Icons
      3. Image Enlargement
        1. Hiding the Enlarged Cover
          1. Displaying a Close Button
        2. More Fun with Badging
        3. Animating the Cover Enlargement
          1. Deferring Animations Until Image Load
          2. Adding a Loading Indicator
      4. The Finished Code
      5. Summary
    16. 10. Plug-ins
      1. How to Use a Plug-in
      2. Popular Plug-Ins
        1. Dimensions
          1. Height and Width
          2. ScrollTop and ScrollLeft
          3. Offset
        2. Form
          1. Tips & Tricks
        3. Interface
          1. Animate
          2. Sortables
      3. Finding Plug-in Documentation
      4. Developing a Plug-in
        1. Adding New Global Functions
          1. Adding Multiple Functions
          2. What’s the Point?
        2. Adding jQuery Object Methods
          1. Object Method Context
          2. Method Chaining
        3. DOM Traversal Methods
          1. Method Parameters
        4. Adding New Shortcut Methods
        5. Maintaining Multiple Event Logs
        6. Adding a Selector Expression
        7. Creating an Easing Style
          1. Easing Function Parameters
          2. Multi-Part Easing Styles
        8. How to Be a Good Citizen
          1. Naming Conventions
          2. Use of the $ Alias
          3. Method Interfaces
          4. Documentation Style
      5. Summary
    17. A. Online Resources
      1. jQuery Documentation
        1. jQuery Wiki
        2. jQuery API
        3. jQuery API Browser
        4. Visual jQuery
        5. Web Developer Blog
      2. JavaScript Reference
        1. Mozilla Developer Center
        2. Dev.Opera
        3. Quirksmode
        4. JavaScript Toolbox
      3. JavaScript Code Compressors
        1. Packer
        2. JSMin
        3. Pretty Printer
      4. (X)HTML Reference
        1. W3C Hypertext Markup Language Home Page
      5. CSS Reference
        1. W3C Cascading Style Sheets Home Page
        2. Mezzoblue CSS Cribsheet
        3. Position Is Everything
      6. XPath Reference
        1. W3C XML Path Language Version 1.0 Specification
        2. TopXML XPath Reference
        3. MSDN XPath Reference
      7. Useful Blogs
        1. The jQuery Blog
        2. Learning jQuery
        3. Jack Slocum’s Blog
        4. Web Standards with Imagination
        5. Snook
        6. I Can’t
        7. DOM Scripting
        8. As Days Pass By
        9. A List Apart
        10. Particletree
        11. The Strange Zen of JavaScript
      8. Web Development Frameworks Using jQuery
    18. B. Development Tools
      1. Tools for Firefox
        1. Firebug
        2. Web Developer Toolbar
        3. Venkman
        4. Regular Expressions Tester
      2. Tools for Internet Explorer
        1. Microsoft Internet Explorer Developer Toolbar
        2. Microsoft Visual Web Developer
        3. DebugBar
        4. Drip
      3. Tools for Safari
        1. Web Inspector
        2. Drosera
      4. Other Tools
        1. Firebug Lite
          1. TextMate jQuery Bundle
        2. Charles
        3. Aptana
    19. C. JavaScript Closures
      1. Inner Functions
      2. The Great Escape
      3. Variable Scoping
      4. Interactions between Closures
      5. Closures in jQuery
        1. Arguments to $(document).ready()
        2. Event Handlers
      6. Memory Leak Hazards
        1. Accidental Reference Loops
        2. The Internet Explorer Memory Leak Problem
        3. The Good News
      7. Conclusion
    20. Index