Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

Learning  jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques
eBook: $27.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 50%!
Print + free eBook + free PacktLib access to the book: $67.98    Print cover: $39.99
save 41%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
The newest edition of this title is available right now:
Learning jQuery, Third Edition Learning jQuery, Third Edition

Available Now.
  • 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.
  • Read: Chapter 7 [2 MB] | Table of Contents

Book Details

Language : English
Paperback : 380 pages [ 235mm x 191mm ]
Release Date : July 2007
ISBN : 1847192505
ISBN 13 : 9781847192509
Author(s) : Jonathan Chaffer, Karl Swedberg
Topics and Technologies : All Books, Web Development, AJAX, jQuery, Open Source, Web Development


Table of Contents

Chapter 1: Getting Started
Chapter 2: Selectors—How to Get Anything You Want
Chapter 3: Events—How to Pull the Trigger
Chapter 4: Effects—How to Add Flair to Your Actions
Chapter 5: DOM Manipulation—How to Change Your Page on Command
Chapter 6: AJAX—How to Make Your Site Buzzword-Compliant
Chapter 7: Table Manipulation
Chapter 8: Forms with Function
Chapter 9: Shufflers and Rotators
Chapter 10: Plug-ins
Appendix A: Online Resources
Appendix B: Development Tools
Appendix C: JavaScript Closures
  • Chapter 1: Getting Started
    • What jQuery Does
    • Why jQuery Works Well
    • Our First jQuery Document
      • Downloading jQuery
      • Setting Up the HTML Document
      • Writing the jQuery Code
        • Finding the Poem Text
        • Injecting the New Class
        • Executing the Code
        • The Finished Product
    • Summary
  • XPath Selectors
    • Styling Links
  • Custom Selectors
    • Styling Alternate Rows
  • DOM Traversal Methods
    • Styling the Header Row
    • Styling Category Cells
    • Chaining
  • Accessing DOM Elements
  • Summary
  • Chapter 3: Events—How to Pull the Trigger
    • Performing Tasks on Page Load
      • Timing of Code Execution
      • Multiple Scripts on One Page
      • Shortcuts for Code Brevity
    • Simple Events
      • A Simple Style Switcher
        • Enabling the Other Buttons
        • Event Handler Context
        • Further Consolidation
      • Shorthand Events
    • Compound Events
      • Showing and Hiding Advanced Features
      • Highlighting Clickable Items
      • The Journey of an Event
      • Side Effects of Event Bubbling
    • Limiting and Ending Events
      • Preventing Event Bubbling
        • Event Targets
        • Stopping Event Propagation
        • Default Actions
      • Removing an Event Handler
    • Simulating User Interaction
    • Summary
  • Multiple Effects
    • Building an Animated show()
    • Creating a Custom Animation
      • Positioning with CSS
    • Making Sense of the Numbers
    • Improving the Custom Animation
  • Simultaneous versus Queued Effects
    • Working with a Single Set of Elements
    • Working with Multiple Sets of Elements
      • Callbacks
  • In a Nutshell
  • Summary
  • Chapter 5: DOM Manipulation—How to Change Your Page on Command
    • Manipulating Attributes
      • Non-class Attributes
        • The $() Factory Function Revisited
    • Inserting New Elements
    • Moving Elements
      • Marking, Numbering, and Linking the Context
      • Appending Footnotes
    • Wrapping Elements
    • Copying Elements
      • Clone Depth
      • Cloning for Pull Quotes
        • A CSS Diversion
        • Back to the Code
        • Prettifying the Pull Quotes
    • DOM Manipulation Methods in a Nutshell
    • Summary
  • Chapter 6: AJAX—How to Make Your Site Buzzword-Compliant
    • Loading Data on Demand
      • Appending HTML
      • Working with JavaScript Objects
        • Retrieving a JavaScript Object
        • Global jQuery Functions
        • Executing a Script
      • Loading an XML Document
    • Choosing a Data Format
    • Passing Data to the Server
      • Performing a GET Request
      • Performing a POST Request
      • Serializing a Form
    • Keeping an Eye on the Request
    • AJAX and Events
      • Scoping an Event-Binding Function
      • Using Event Bubbling
    • Security Limitations
    • Summary
  • Chapter 7: Table Manipulation
    • Sorting
      • Server-Side Sorting
        • Preventing Page Refreshes
      • JavaScript Sorting
        • Row Grouping Tags
        • Basic Alphabetical Sorting
        • The Power of Plug-ins
        • Performance Concerns
        • Finessing the Sort Keys
        • Sorting Other Types of Data
        • Column Highlighting
        • Alternating Sort Directions
    • Pagination
      • Server-Side Pagination
        • Sorting and Paging Go Together
      • JavaScript Pagination
        • Displaying the Pager
        • Enabling the Pager Buttons
        • Marking the Current Page
        • Paging with Sorting
    • The Finished Code
    • Advanced Row Striping
      • Three-color Alternating Pattern
      • Alternating Triplets
    • Row Highlighting
    • Tooltips
    • Collapsing and Expanding
    • Filtering
      • Filter Options
        • Collecting Filter Options from Content
        • Reversing the Filters
      • Interacting with Other Code
        • Row Striping
        • Expanding and Collapsing
    • The Finished Code
    • Summary
  • Chapter 8: Forms with Function
    • Progressively Enhanced Form Styling
      • The Legend
      • Required Field Messages
        • A Regular Expression Digression
        • Inserting the Field-Message Legend
      • Conditionally Displayed Fields
    • Form Validation
      • Immediate Feedback
        • Required Fields
        • Required Formats
      • A Final Check
    • Checkbox Manipulation
    • The Finished Code
    • Placeholder Text for Fields
    • AJAX Auto-Completion
      • On the Server
      • In the Browser
      • Populating the Search Field
      • Keyboard Navigation
        • Handling the Arrow Keys
        • Inserting Suggestions in the Field
        • Removing the Suggestion List
      • Auto-Completion versus Live Search
    • The Finished Code
    • Input Masking
      • Shopping Cart Table Structure
      • Rejecting Non-numeric Input
    • Numeric Calculations
      • Parsing and Formatting Currency
      • Dealing with Decimal Places
      • Other Calculations
        • Rounding Values
        • Finishing Touches
    • Deleting Items
    • Editing Shipping Information
    • The Finished Code
    • Summary
  • Chapter 9: Shufflers and Rotators
    • Headline Rotator
      • Setting Up the Page
      • Retrieving the Feed
      • Setting Up the Rotator
      • The Headline Rotate Function
      • Pause on Hover
      • Retrieving a Feed from a Different Domain
      • Gratuitous Inner-fade Effect
    • An Image Carousel
      • Setting Up the Page
      • Revising the Styles with JavaScript
      • Shuffling Images when Clicked
      • Adding Sliding Animation
      • Displaying Action Icons
    • Image Enlargement
      • Hiding the Enlarged Cover
        • Displaying a Close Button
      • More Fun with Badging
      • Animating the Cover Enlargement
        • Deferring Animations Until Image Load
        • Adding a Loading Indicator
    • The Finished Code
    • Summary
  • Chapter 10: Plug-ins
    • How to Use a Plug-in
    • Popular Plug-Ins
      • Dimensions
        • Height and Width
        • ScrollTop and ScrollLeft
        • Offset
      • Form
        • Tips & Tricks
      • Interface
        • Animate
        • Sortables
    • Finding Plug-in Documentation
    • Developing a Plug-in
      • Adding New Global Functions
        • Adding Multiple Functions
        • What's the Point?
      • Adding jQuery Object Methods
        • Object Method Context
        • Method Chaining
      • DOM Traversal Methods
        • Method Parameters
      • Adding New Shortcut Methods
      • Maintaining Multiple Event Logs
      • Adding a Selector Expression
      • Creating an Easing Style
        • Easing Function Parameters
        • Multi-Part Easing Styles
      • How to Be a Good Citizen
        • Naming Conventions
        • Use of the $ Alias
        • Method Interfaces
        • Documentation Style
    • Summary
  • Appendix A: Online Resources
    • jQuery Documentation
    • JavaScript Reference
    • JavaScript Code Compressors
    • (X)HTML Reference
    • CSS Reference
    • XPath Reference
    • Useful Blogs
    • Web Development Frameworks Using jQuery
  • Appendix C: JavaScript Closures
    • Inner Functions
    • The Great Escape
    • Variable Scoping
    • Interactions between Closures
    • Closures in jQuery
      • Arguments to $(document).ready()
      • Event Handlers
    • Memory Leak Hazards
      • Accidental Reference Loops
      • The Internet Explorer Memory Leak Problem
      • The Good News
    • Conclusion

Jonathan Chaffer

Jonathan Chaffer is a member of Rapid Development Group, a web development firm located in Grand Rapids, Michigan. His work there includes overseeing and implementing projects in a wide variety of technologies, with an emphasis in PHP, MySQL, and JavaScript. He also leads on-site training seminars on the jQuery framework for web developers. In the open source community, he has been very active in the Drupal CMS project, which has adopted jQuery as its JavaScript framework of choice. He is the creator of the Content Construction Kit, a popular module for managing structured content on Drupal sites. He is also responsible for major overhauls of Drupal's menu system and developer API reference. He lives in Grand Rapids with his wife, Jennifer.

Karl Swedberg

Karl Swedberg is a web developer at Fusionary Media in Grand Rapids, Michigan, where he spends much of his time making cool things happen with JavaScript. As a member of the jQuery team, he is responsible for maintaining the jQuery API site at api.jquery.com. He is also a member of jQuery's Board of Advisors and a presenter at workshops and conferences. When he isn't coding, he likes to hang out with his family, roast coffee in his garage, and exercise at the local CrossFit gym.
Sorry, we don't have any reviews for this title yet.

Code Downloads

Download the code and support files for this book.

Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


- 17 submitted: last submission 15 Jan 2014

Errata type:Others | Page number:0

Code for chapters 7,8,9 is stored in the bookstore folder.


Errata type:Technical | Page number: 22

Bottom of page in the css code. The first 'a' selector is missing its closing curly bracket.

a {

color: #00f; /* make plain links blue */
should be:
a {

color: #00f; /* make plain links blue */



Errata type:Other | Page number:0

In jQuery 1.3 [@attr] style selectors were removed (they were previously deprecated in jQuery 1.2). Simply remove the '@' symbol from your selectors in order to make them work again.

The new book (Learning jQuery 1.3) is updated with API changes such as this. ISBN 2509 was written for 1.1, and is largely compatible with 1.2.


Errata type: typo | Page number:28

Second line of last code example should start with $('th') instead of $('the')


Errata type: Technical issue | Page number:28

In the the last code block, under the heading "Styling Category Cells," the statement calling the parent of TH $('the')...
should be:


Errata type:Technical issue | Page number:29

Option number three reads:


should be:


Errata type: typo| Page number:2

how to alter the very structure an HTML document
should be:
how to alter the very structure *of* an HTML document


Errata type: Technical issue | Page number:30

This line is missing a single quote:

should be:


Errata type:Technical issue | Page number:51

under "Stopping Event Propagation", the line reads: "We'll remove the e.target == this"
should be:
"We'll remove the event.target == this"


Errata type:Other | Page number: 61

On the second line


{ should be bold, to make sure that this line has changed from the previous example.


Errata type:Other | Page number:81

The last word 'handler' in the fourth line should not be set as the same style as the code $(document).ready


Errata type: typo| Page number:95

The first sentence in the last paragraph of 'A CSS Diversion', which reads: While the top positioning is fairly intuitive, it may not be clear at first how the pull-quote box will be located 20 pixels to the left of its positioned parent.
should end with:
to the right of its positioned parent.


Errata type:Technical issue | Page number:207

In the e-mail format example, the errorMessage string should be: var errorMessage = 'Please use proper e-mail format (e.g. joe@example.com)';


Errata type:Technical issue | Page number: 304

In code examples $(#myForm)
should be:


Errata type: Technical issue| Page number:345

function innerFun2() { outerVar+=2; alert(outerVar); }

should be:


function innerFun2() { outerVar+=2; alert(globVar); }


Errata type: Technical issue | Page number: 345

Under the section 'Interactions between Closures', the line of code that reads:

return {'innerFun': innerFun, 'outerFun2': outerFun2};
should be:
return {'innerFun': innerFun, 'innerFun2': innerFun2};


Errata type: Code | Page number: 33

$(document).ready(function() {

should be

$(document).ready(function() {

Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Frequently bought together

Learning  jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques +    Processing XML documents with Oracle JDeveloper 11g =
50% Off
the second eBook
Price for both: £23.70

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

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


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, www.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.

Stop scratching your head, and start improving your web applications with jQuery and JavaScript!

Creators of the popular jQuery learning resource, LearningjQuery.com, share their knowledge, experience, and enthusiasm about the jQuery JavaScript library to make your web applications shine!

Book Reviews

Slashdot: "You will not find a better resource online for getting into the guts of the jQuery JavaScript library than you will offline reading the book Learning jQuery."

Brian Dillard: "Chaffer and Swedberg have provided an excellent introduction to the framework..."

Ben Nadel: "This book is all about the in-depth, iterative example! After every chapter, I found myself reflecting on how thorough and well done the examples were."

SkyFox: "If you are looking to start with jQuery or expand your knowledge base, these two books will suit you well."


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

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software