jQuery Cookbook

Solutions & Examples for jQuery Developers

Larger Cover

jQuery Cookbook

Solutions & Examples for jQuery Developers

By Cody Lindley

Publisher: O'Reilly Media

Released: November 2009

Pages: 480

jQuery simplifies building rich, interactive web frontends. Getting started with this JavaScript library is easy, but it can take years to fully realize its breadth and depth; this cookbook shortens the learning curve considerably. With these recipes, you'll learn patterns and practices from 19 leading developers who use jQuery for everything from integrating simple components into websites and applications to developing complex, high-performance user interfaces.

Ideal for newcomers and JavaScript veterans alike, jQuery Cookbook starts with the basics and then moves to practical use cases with tested solutions to common web development hurdles. You also get recipes on advanced topics, such as methods for applying jQuery to large projects.

Solve problems involving events, effects, dimensions, forms, themes, and user interface elements
Learn how to enhance your forms, and how to position and reposition elements on a page
Make the most of jQuery's event management system, including custom events and custom event data
Create UI elements-such as tabs, accordions, and modals-from scratch
Optimize your code to eliminate bottlenecks and ensure peak performance
Learn how to test your jQuery applications

The book's contributors include:

Cody Lindley
James Padolsey
Ralph Whitbeck
Jonathan Sharp
Michael Geary and Scott González
Rebecca Murphey
Remy Sharp
Ariel Flesler
Brian Cherne
Jörn Zaefferer
Mike Hostetler
Nathan Smith
Richard D. Worth
Maggie Wachs, Scott Jehl, Todd Parker, and Patty Toland
Rob Burns

Chapter 1 jQuery Basics
1. Introduction
2. Including the jQuery Library Code in an HTML Page
3. Executing jQuery/JavaScript Coded After the DOM Has Loaded but Before Complete Page Load
4. Selecting DOM Elements Using Selectors and the jQuery Function
5. Selecting DOM Elements Within a Specified Context
6. Filtering a Wrapper Set of DOM Elements
7. Finding Descendant Elements Within the Currently Selected Wrapper Set
8. Returning to the Prior Selection Before a Destructive Change
9. Including the Previous Selection with the Current Selection
10. Traversing the DOM Based on Your Current Context to Acquire a New Set of DOM Elements
11. Creating, Operating on, and Inserting DOM Elements
12. Removing DOM Elements
13. Replacing DOM Elements
14. Cloning DOM Elements
15. Getting, Setting, and Removing DOM Element Attributes
16. Getting and Setting HTML Content
17. Getting and Setting Text Content
18. Using the $ Alias Without Creating Global Conflicts
Chapter 2 Selecting Elements with jQuery
1. Introduction
2. Selecting Child Elements Only
3. Selecting Specific Siblings
4. Selecting Elements by Index Order
5. Selecting Elements That Are Currently Animating
6. Selecting Elements Based on What They Contain
7. Selecting Elements by What They Don’t Match
8. Selecting Elements Based on Their Visibility
9. Selecting Elements Based on Attributes
10. Selecting Form Elements by Type
11. Selecting an Element with Specific Characteristics
12. Using the Context Parameter
13. Creating a Custom Filter Selector
Chapter 3 Beyond the Basics
1. Introduction
2. Looping Through a Set of Selected Results
3. Reducing the Selection Set to a Specified Item
4. Convert a Selected jQuery Object into a Raw DOM Object
5. Getting the Index of an Item in a Selection
6. Making a Unique Array of Values from an Existing Array
7. Performing an Action on a Subset of the Selected Set
8. Configuring jQuery Not to Conflict with Other Libraries
9. Adding Functionality with Plugins
10. Determining the Exact Query That Was Used
Chapter 4 jQuery Utilities
1. Introduction
2. Detecting Features with jQuery.support
3. Iterating Over Arrays and Objects with jQuery.each
4. Filtering Arrays with jQuery.grep
5. Iterating and Modifying Array Entries with jQuery.map
6. Combining Two Arrays with jQuery.merge
7. Filtering Out Duplicate Array Entries with jQuery.unique
8. Testing Callback Functions with jQuery.isFunction
9. Removing Whitespace from Strings or Form Values with jQuery.trim
10. Attaching Objects and Data to DOM with jQuery.data
11. Extending Objects with jQuery.extend
Chapter 5 Faster, Simpler, More Fun
1. Introduction
2. That’s Not jQuery, It’s JavaScript!
3. What’s Wrong with $(this)?
4. Removing Redundant Repetition
5. Formatting Your jQuery Chains
6. Borrowing Code from Other Libraries
7. Writing a Custom Iterator
8. Toggling an Attribute
9. Finding the Bottlenecks
10. Caching Your jQuery Objects
11. Writing Faster Selectors
12. Loading Tables Faster
13. Coding Bare-Metal Loops
14. Reducing Name Lookups
15. Updating the DOM Faster with .innerHTML
16. Debugging? Break Those Chains
17. Is It a jQuery Bug?
18. Tracing into jQuery
19. Making Fewer Server Requests
20. Writing Unobtrusive JavaScript
21. Using jQuery for Progressive Enhancement
22. Making Your Pages Accessible
Chapter 6 Dimensions
1. Introduction
2. Finding the Dimensions of the Window and Document
3. Finding the Dimensions of an Element
4. Finding the Offset of an Element
5. Scrolling an Element into View
6. Determining Whether an Element Is Within the Viewport
7. Centering an Element Within the Viewport
8. Absolutely Positioning an Element at Its Current Position
9. Positioning an Element Relative to Another Element
10. Switching Stylesheets Based on Browser Width
Chapter 7 Effects
1. Introduction
2. Sliding and Fading Elements in and out of View
3. Making Elements Visible by Sliding Them Up
4. Creating a Horizontal Accordion
5. Simultaneously Sliding and Fading Elements
6. Applying Sequential Effects
7. Determining Whether Elements Are Currently Being Animated
8. Stopping and Resetting Animations
9. Using Custom Easing Methods for Effects
10. Disabling All Effects
11. Using jQuery UI for Advanced Effects
Chapter 8 Events
1. Introduction
2. Attaching a Handler to Many Events
3. Reusing a Handler Function with Different Data
4. Removing a Whole Set of Event Handlers
5. Triggering Specific Event Handlers
6. Passing Dynamic Data to Event Handlers
7. Accessing an Element ASAP (Before document.ready)
8. Stopping the Handler Execution Loop
9. Getting the Correct Element When Using event.target
10. Avoid Multiple hover() Animations in Parallel
11. Making Event Handlers Work for Newly Added Elements
Chapter 9 Advanced Events
1. Introduction
2. Getting jQuery to Work When Loaded Dynamically
3. Speeding Up Global Event Triggering
4. Creating Your Own Events
5. Letting Event Handlers Provide Needed Data
6. Creating Event-Driven Plugins
7. Getting Notified When jQuery Methods Are Called
8. Using Objects’ Methods as Event Listeners
Chapter 10 HTML Form Enhancements from Scratch
1. Introduction
2. Focusing a Text Input on Page Load
3. Disabling and Enabling Form Elements
4. Selecting Radio Buttons Automatically
5. (De)selecting All Checkboxes Using Dedicated Links
6. (De)selecting All Checkboxes Using a Single Toggle
7. Adding and Removing Select Options
8. Autotabbing Based on Character Count
9. Displaying Remaining Character Count
10. Constraining Text Input to Specific Characters
11. Submitting a Form Using Ajax
12. Validating Forms
Chapter 11 HTML Form Enhancements with Plugins
1. Introduction
2. Validating Forms
3. Creating Masked Input Fields
4. Autocompleting Text Fields
5. Selecting a Range of Values
6. Entering a Range-Constrained Value
7. Uploading Files in the Background
8. Limiting the Length of Text Inputs
9. Displaying Labels Above Input Fields
10. Growing an Input with Its Content
11. Choosing a Date
Chapter 12 jQuery Plugins
1. Introduction
2. Where Do You Find jQuery Plugins?
3. When Should You Write a jQuery Plugin?
4. Writing Your First jQuery Plugin
5. Passing Options into Your Plugin
6. Using the $ Shortcut in Your Plugin
7. Including Private Functions in Your Plugin
8. Supporting the Metadata Plugin
9. Adding a Static Function to Your Plugin
10. Unit Testing Your Plugin with QUnit
Chapter 13 Interface Components from Scratch
1. Introduction
2. Creating Custom Tool Tips
3. Navigating with a File-Tree Expander
4. Expanding an Accordion
5. Tabbing Through a Document
6. Displaying a Simple Modal Window
7. Building Drop-Down Menus
8. Cross-Fading Rotating Images
9. Sliding Panels
Chapter 14 User Interfaces with jQuery UI
1. Introduction
2. Including the Entire jQuery UI Suite
3. Including an Individual jQuery UI Plugin or Two
4. Initializing a jQuery UI Plugin with Default Options
5. Initializing a jQuery UI Plugin with Custom Options
6. Creating Your Very Own jQuery UI Plugin Defaults
7. Getting and Setting jQuery UI Plugin Options
8. Calling jQuery UI Plugin Methods
9. Handling jQuery UI Plugin Events
10. Destroying a jQuery UI Plugin
11. Creating a jQuery UI Music Player
Chapter 15 jQuery UI Theming
1. Introduction
2. Styling jQuery UI Widgets with ThemeRoller
3. Overriding jQuery UI Layout and Theme Styles
4. Applying a Theme to Non-jQuery UI Components
5. Referencing Multiple Themes on a Single Page
6. Appendix: Additional CSS Resources
Chapter 16 jQuery, Ajax, Data Formats: HTML, XML, JSON, JSONP
1. Introduction
2. jQuery and Ajax
3. Using Ajax on Your Whole Site
4. Using Simple Ajax with User Feedback
5. Using Ajax Shortcuts and Data Types
6. Using HTML Fragments and jQuery
7. Converting XML to DOM
8. Creating JSON
9. Parsing JSON
10. Using jQuery and JSONP
Chapter 17 Using jQuery in Large Projects
1. Introduction
2. Using Client-Side Storage
3. Saving Application State for a Single Session
4. Saving Application State Between Sessions
5. Using a JavaScript Template Engine
6. Queuing Ajax Requests
7. Dealing with Ajax and the Back Button
8. Putting JavaScript at the End of a Page
Chapter 18 Unit Testing
1. Introduction
2. Automating Unit Testing
3. Asserting Results
4. Testing Synchronous Callbacks
5. Testing Asynchronous Callbacks
6. Testing User Actions
7. Keeping Tests Atomic
8. Grouping Tests
9. Selecting Tests to Run

Colophon

Title:

jQuery Cookbook

Edited By:

Cody Lindley

Publisher:

O'Reilly Media

Formats:

Print
Ebook
Safari Books Online

Print:

November 2009

Ebook:

November 2009

Pages:

480

Print ISBN:

978-0-596-15977-1

| ISBN 10:

0-596-15977-3

Ebook ISBN:

978-0-596-80811-2

| ISBN 10:

0-596-80811-9

Colophon

The animal on the cover of the jQuery Cookbook is an ermine (Mustela erminea), also known as a stoat. "Ermine" sometimes refers to the animal's white winter fur, and "stoat" to the brown fur it has during the rest of the year. It belongs to the weasel family, which includes martens, ferrets, minks, otters, and polecats, though it is distinguished from these other members by its black-tipped tail.

The ermine lives in northern woodland regions of Europe, Asia, and North America. It is mainly nocturnal and makes dens in tree roots, under stones, and in tunnels. A solitary animal, the ermine can travel up to 10 miles in one night searching for food. Its predators include foxes, badgers, cats, and birds of prey.

The ermine's slender body helps it run swiftly, even across snow, as well as climb and swim. Although this shape has advantages, it also causes the ermine to quickly lose heat from its body. Thick fur and a fast metabolism help compensate, and the ermine must eat daily to meet its energy demands. Its diet includes small mammals, birds, fish, and insects. When the ermine spots its prey, it sneaks up on it in a series of leaps, grasps the victim's neck, and kills it with repeated bites.

White ermine fur is highly prized and is used in trimming coats, although demand has dropped in recent years. Typically, several furs are sewn together to form a pattern of black dots on a white field. This pattern was imitated in heraldry-the design of coats of arms-as early as the 12th century, most famously in the arms of Brittany. Ermine fur is also a symbol of royalty or purity, which is perhaps why Elizabeth I of England, "the Virgin Queen," was painted with an ermine by her side.

The cover image is from Riverside Natural History. The cover font is Adobe ITC Garamond. The text font is Linotype Birka; the heading font is Adobe Myriad Condensed; and the code font is LucasFont's TheSansMonoCondensed.

Description

Table of Contents

Product Details

Colophon

Recommended for You

Customer Reviews

REVIEW SNAPSHOT®

by PowerReviews

O'Reilly Media jQuery Cookbook

3.6

(based on 11 reviews)

70%

of respondents would recommend this to a friend.

Pros

Helpful examples (7)
Well-written (6)
Concise (5)
Easy to understand (5)
Accurate (4)

Cons

Best Uses

Intermediate (7)
Expert (4)
Novice (4)
Student (3)

- Reviewer Profile:
- Developer (8), Designer (3)

Reviewed by 11 customers

Sort by

Displaying reviews 1-10

Previous | Next »

11/11/2011

(1 of 1 customers found this review helpful)

4.0

Great book, but jQuery updates fast.

By Tom O

from Baltimore, MD

About Me Designer, Developer

Pros

Helpful examples
Well-written

Cons

Hard to keep up to date

Best Uses

Expert
Intermediate
Novice
Student

Comments about O'Reilly Media jQuery Cookbook:

This has been a relatively clear book of how approach jQuery, and has information for all types of users. I've been using jQuery for a few years, and found it a good reference for understanding/addressing common problems. Plugin authoring, jQuery UI and QUnit all have significant sections in this book, so you also get support for good development practices that you wouldn't necessarily get out of the API.

The only trouble I have with this book is that jQuery updates very frequently. The book I read covered up to v1.3, and newer things (notably the Deferred object) aren't covered at all. Upon reading it some of the material definitely feels a little out of date.

That being said it's still a great book, and will give you a great understanding of the capabilities of jQuery.

10/25/2011

(0 of 1 customers found this review helpful)

1.0

Non-Working Code Samples

By Karl Groves

from Baltimore MD

Comments about O'Reilly Media jQuery Cookbook:

Users attempting to learn jQuery by example using this "cookbook" need to look elsewhere. The purpose for a book targeted at developers (especially one labeled a "cookbook") is to show developers examples of code which accomplishes a specified task. The end result for the code snippets in the book should be a working piece of code that does something - however mundane that may be. It doesn't need to be a perfect work of art but at the very least, the reader should be able to replicate the code as-is and have it actually work. This is very definitely not the case with this book. Of the code samples I've tried (duplicating them exactly as printed in the book) a number of them do not work. Enough of them do not work that it does absolutely no good to continue reading.

5/2/2011

(2 of 7 customers found this review helpful)

1.0

source code useless

By disappointed

from TN

Comments about O'Reilly Media jQuery Cookbook:

I bought the book to learn but was disappointed with the incomplete source code

3/20/2011

(5 of 9 customers found this review helpful)

2.0

Source Code is worthless

By lockjaw

from Oklahoma City, OK

About Me Designer, Developer, Educator

Pros

Cons

Too many errors

Best Uses

Comments about O'Reilly Media jQuery Cookbook:

There's no denying this title has a lot of great content, but if you were hoping to learn theme building you might want to look elsewhere. Chapter 15 looks strong at first until you find yourself searching for the html source code that is the base for the entire chapter is no where to be found. It quickly became a ridiculous waste of time. I'd shop around for a different title.

Bottom Line No, I would not recommend this to a friend

Merchant response: The source code for this book (including code for Ch. 15) is available from the Download Example Code link on this page (http://oreilly.com/catalog/9780596159788 > http://examples.oreilly.com/9780596159788/ ). The direct link to download the files is http://examples.oreilly.com/9780596159788/9780596159771.zip

If you have any questions, please contact customer service by phone at 1.707.827.7000 or 800.998.9938, by email at booktech@oreilly.com, or through our customer service forum http://getsatisfaction.com/oreilly

(5 of 9 customers found this review helpful)

Was this review helpful? Yes / No

- You may also flag this review

8/3/2010

(3 of 3 customers found this review helpful)

5.0

Pro. Dev take on the book

By Devlin Liles

from Springdale, AR

About Me Developer

Pros

Accurate
Concise
Easy to understand
Helpful examples
Well Organized
Well-written

Cons

Best Uses

Expert
Intermediate

Comments about O'Reilly Media jQuery Cookbook:

I have been a professional developer for 4 years now mainly focused in the windows services and back ground communication pipelines. I was asked to pick up support for an app written with alot of jQuery. I was given "jQuery Cookbook" by a friend and I fell in love. It is straight into the meat. Normally I have to wait 2-4 chapters before the useful stuff gets going and with the cookbook I was diving in right away. I haven't written any jQuery before reading the book but I did understand javascript and the DOM. With that foreknowledge the book made jQuery so amazingly easy. I could not have picked up jQuery in 2 short weeks without this book. I recommend this book to any professional developer that is looking to add jQuery to their skill set.

8/1/2010

(1 of 1 customers found this review helpful)

5.0

Lots of Good Stuff

By Larry

from Somerville, MA

About Me Developer

Pros

Accurate
Concise
Easy to understand
Helpful examples
Well-written

Cons

Best Uses

Expert
Intermediate
Novice
Student

Comments about O'Reilly Media jQuery Cookbook:

What can I say? The O'Reilly Cookbook series is great - and this book fits right in. The first few sections can almost be read and used as a tutorial. The other recipes are clear and well-written.In addition to the basics, they also do a good job of covering topics like jQueryUI, Ajax, and unit testing.Heck, for[$] all you need is to have one of them guide you to a solution and the book has already paid for itself!

6/20/2010

(7 of 10 customers found this review helpful)

4.0

where is the source code download?

By saub -o -tager

from dallas tx

Pros

Helpful examples

Cons

Best Uses

Comments about O'Reilly Media jQuery Cookbook:

good book with lots of samples, but i cant find the link to download the source code?

3/10/2010

(4 of 11 customers found this review helpful)

4.0

great one

By fortnine

from India

About Me Developer

Pros

Concise
Easy to understand

Cons

Best Uses

Intermediate

Comments about O'Reilly Media jQuery Cookbook:

i liked every bit of this book... so even before comleting reading the whole book i prefered to give my review....

really a great stuff.... and thanks a lot for such a wonderful book

3/8/2010

(5 of 6 customers found this review helpful)

4.0

Covers A Lot Of Ground

By Chuck Buhecker

from Boston, MA

About Me Developer

Pros

Accurate
Concise
Easy to understand
Helpful examples
Well-written

Cons

Best Uses

Intermediate
Novice
Student

Comments about O'Reilly Media jQuery Cookbook:

This book is an excellent all around guide to JQuery. I was pretty new to JQuery and feel like this is a great introduction showcasing JQuery's capabilities, as well as great reference for seasoned JQuery developers.

1/11/2010

(6 of 6 customers found this review helpful)

5.0

Another Great O'Reilly Cookbook

By Adam

from Lincoln, NE

About Me Designer, Developer

Pros

Accurate
Concise
Helpful examples
Well-written

Cons

Best Uses

Expert
Intermediate

Comments about O'Reilly Media jQuery Cookbook:

The jQuery Cookbook, like the many other Cookbook series of books from O'Reilly proves to be an extremely valuable addition to any web developer's bookshelf. There's nothing unexpected here - it's a book full of practical solutions to hundreds of everyday problems.

The first chapter, "jQuery Basics" is meant to be a crash course introduction to jQuery, but it likely won't suffice if you're new to jQuery, and certainly won't prepare you if you're relatively unfamiliar with javascript in general. This book is primarily intended for the everyday jQuery developer who wants a reference for specific issues that come up in projects.

If you are familiar with jQuery basics, a cover-to-cover reading of this book will take you to the next level, but most developers will only read the entries that pertain to the problems they face during development.

The jQuery Cookbook was written by the jQuery community - people who have faced these issues in their own development and have solved them in the real world. I found that a majority of the recipes were well written and clear with properly tested and working code. All-in-all, the jQuery Cookbook is a useful and reliable resource for practical jQuery development.

Displaying reviews 1-10

Previous | Next »

Save a Tree - Go Digital what is this?

Ebook: $27.99

Formats: APK, DAISY, ePub, Mobi, PDF

Print & Ebook: $38.49

Print: $34.99

Safari Books Online - Read now >

Chapter 1 jQuery Basics

Introduction

Including the jQuery Library Code in an HTML Page

Executing jQuery/JavaScript Coded After the DOM Has Loaded but Before Complete Page Load

Selecting DOM Elements Using Selectors and the jQuery Function

Selecting DOM Elements Within a Specified Context

Filtering a Wrapper Set of DOM Elements

Finding Descendant Elements Within the Currently Selected Wrapper Set

Returning to the Prior Selection Before a Destructive Change

Including the Previous Selection with the Current Selection

Traversing the DOM Based on Your Current Context to Acquire a New Set of DOM Elements

Creating, Operating on, and Inserting DOM Elements

Removing DOM Elements

Replacing DOM Elements

Cloning DOM Elements

Getting, Setting, and Removing DOM Element Attributes

Getting and Setting HTML Content

Getting and Setting Text Content

Using the $ Alias Without Creating Global Conflicts

Chapter 2 Selecting Elements with jQuery

Introduction

Selecting Child Elements Only

Selecting Specific Siblings

Selecting Elements by Index Order

Selecting Elements That Are Currently Animating

Selecting Elements Based on What They Contain

Selecting Elements by What They Don’t Match

Selecting Elements Based on Their Visibility

Selecting Elements Based on Attributes

Selecting Form Elements by Type

Selecting an Element with Specific Characteristics

Using the Context Parameter

Creating a Custom Filter Selector

Chapter 3 Beyond the Basics

Introduction

Looping Through a Set of Selected Results

Reducing the Selection Set to a Specified Item

Convert a Selected jQuery Object into a Raw DOM Object

Getting the Index of an Item in a Selection

Making a Unique Array of Values from an Existing Array

Performing an Action on a Subset of the Selected Set

Configuring jQuery Not to Conflict with Other Libraries

Adding Functionality with Plugins

Determining the Exact Query That Was Used

Chapter 4 jQuery Utilities

Introduction

Detecting Features with jQuery.support

Iterating Over Arrays and Objects with jQuery.each

Filtering Arrays with jQuery.grep

Iterating and Modifying Array Entries with jQuery.map

Combining Two Arrays with jQuery.merge

Filtering Out Duplicate Array Entries with jQuery.unique

Testing Callback Functions with jQuery.isFunction

Removing Whitespace from Strings or Form Values with jQuery.trim

Attaching Objects and Data to DOM with jQuery.data

Extending Objects with jQuery.extend

Chapter 5 Faster, Simpler, More Fun

Introduction

That’s Not jQuery, It’s JavaScript!

What’s Wrong with $(this)?

Removing Redundant Repetition

Formatting Your jQuery Chains

Borrowing Code from Other Libraries

Writing a Custom Iterator

Toggling an Attribute

Finding the Bottlenecks

Caching Your jQuery Objects

Writing Faster Selectors

Loading Tables Faster

Coding Bare-Metal Loops

Reducing Name Lookups

Updating the DOM Faster with .innerHTML

Debugging? Break Those Chains

Is It a jQuery Bug?

Tracing into jQuery

Making Fewer Server Requests

Writing Unobtrusive JavaScript

Using jQuery for Progressive Enhancement

Making Your Pages Accessible

Chapter 6 Dimensions