You are previewing jQuery Cookbook.

jQuery Cookbook

Cover of jQuery Cookbook by Cody Lindley Published by O'Reilly Media, Inc.
  1. jQuery Cookbook
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. A Note Regarding Supplemental Files
    3. Foreword
    4. Contributors
      1. Chapter Authors
      2. Tech Editors
    5. Preface
      1. Who This Book Is For
      2. What You’ll Learn
      3. jQuery Style and Conventions
      4. Other Options
      5. If You Have Problems Making Examples Work
      6. If You Like (or Don’t Like) This Book
      7. Conventions Used in This Book
      8. Using Code Examples
      9. Safari® Books Online
      10. How to Contact Us
    6. 1. jQuery Basics
      1. Introduction
      2. 1.1. Including the jQuery Library Code in an HTML Page
      3. 1.2. Executing jQuery/JavaScript Coded After the DOM Has Loaded but Before Complete Page Load
      4. 1.3. Selecting DOM Elements Using Selectors and the jQuery Function
      5. 1.4. Selecting DOM Elements Within a Specified Context
      6. 1.5. Filtering a Wrapper Set of DOM Elements
      7. 1.6. Finding Descendant Elements Within the Currently Selected Wrapper Set
      8. 1.7. Returning to the Prior Selection Before a Destructive Change
      9. 1.8. Including the Previous Selection with the Current Selection
      10. 1.9. Traversing the DOM Based on Your Current Context to Acquire a New Set of DOM Elements
      11. 1.10. Creating, Operating on, and Inserting DOM Elements
      12. 1.11. Removing DOM Elements
      13. 1.12. Replacing DOM Elements
      14. 1.13. Cloning DOM Elements
      15. 1.14. Getting, Setting, and Removing DOM Element Attributes
      16. 1.15. Getting and Setting HTML Content
      17. 1.16. Getting and Setting Text Content
      18. 1.17. Using the $ Alias Without Creating Global Conflicts
    7. 2. Selecting Elements with jQuery
      1. Introduction
      2. 2.1. Selecting Child Elements Only
      3. 2.2. Selecting Specific Siblings
      4. 2.3. Selecting Elements by Index Order
      5. 2.4. Selecting Elements That Are Currently Animating
      6. 2.5. Selecting Elements Based on What They Contain
      7. 2.6. Selecting Elements by What They Don’t Match
      8. 2.7. Selecting Elements Based on Their Visibility
      9. 2.8. Selecting Elements Based on Attributes
      10. 2.9. Selecting Form Elements by Type
      11. 2.10. Selecting an Element with Specific Characteristics
      12. 2.11. Using the Context Parameter
      13. 2.12. Creating a Custom Filter Selector
    8. 3. Beyond the Basics
      1. Introduction
      2. 3.1. Looping Through a Set of Selected Results
      3. 3.2. Reducing the Selection Set to a Specified Item
      4. 3.3. Convert a Selected jQuery Object into a Raw DOM Object
      5. 3.4. Getting the Index of an Item in a Selection
      6. 3.5. Making a Unique Array of Values from an Existing Array
      7. 3.6. Performing an Action on a Subset of the Selected Set
      8. 3.7. Configuring jQuery Not to Conflict with Other Libraries
      9. 3.8. Adding Functionality with Plugins
      10. 3.9. Determining the Exact Query That Was Used
    9. 4. jQuery Utilities
      1. Introduction
      2. 4.1. Detecting Features with jQuery.support
      3. 4.2. Iterating Over Arrays and Objects with jQuery.each
      4. 4.3. Filtering Arrays with jQuery.grep
      5. 4.4. Iterating and Modifying Array Entries with jQuery.map
      6. 4.5. Combining Two Arrays with jQuery.merge
      7. 4.6. Filtering Out Duplicate Array Entries with jQuery.unique
      8. 4.7. Testing Callback Functions with jQuery.isFunction
      9. 4.8. Removing Whitespace from Strings or Form Values with jQuery.trim
      10. 4.9. Attaching Objects and Data to DOM with jQuery.data
      11. 4.10. Extending Objects with jQuery.extend
    10. 5. Faster, Simpler, More Fun
      1. Introduction
      2. 5.1. That’s Not jQuery, It’s JavaScript!
      3. 5.2. What’s Wrong with $(this)?
      4. 5.3. Removing Redundant Repetition
      5. 5.4. Formatting Your jQuery Chains
      6. 5.5. Borrowing Code from Other Libraries
      7. 5.6. Writing a Custom Iterator
      8. 5.7. Toggling an Attribute
      9. 5.8. Finding the Bottlenecks
      10. 5.9. Caching Your jQuery Objects
      11. 5.10. Writing Faster Selectors
      12. 5.11. Loading Tables Faster
      13. 5.12. Coding Bare-Metal Loops
      14. 5.13. Reducing Name Lookups
      15. 5.14. Updating the DOM Faster with .innerHTML
      16. 5.15. Debugging? Break Those Chains
      17. 5.16. Is It a jQuery Bug?
      18. 5.17. Tracing into jQuery
      19. 5.18. Making Fewer Server Requests
      20. 5.19. Writing Unobtrusive JavaScript
      21. 5.20. Using jQuery for Progressive Enhancement
      22. 5.21. Making Your Pages Accessible
    11. 6. Dimensions
      1. Introduction
      2. 6.1. Finding the Dimensions of the Window and Document
      3. 6.2. Finding the Dimensions of an Element
      4. 6.3. Finding the Offset of an Element
      5. 6.4. Scrolling an Element into View
      6. 6.5. Determining Whether an Element Is Within the Viewport
      7. 6.6. Centering an Element Within the Viewport
      8. 6.7. Absolutely Positioning an Element at Its Current Position
      9. 6.8. Positioning an Element Relative to Another Element
      10. 6.9. Switching Stylesheets Based on Browser Width
    12. 7. Effects
      1. Introduction
      2. 7.1. Sliding and Fading Elements in and out of View
      3. 7.2. Making Elements Visible by Sliding Them Up
      4. 7.3. Creating a Horizontal Accordion
      5. 7.4. Simultaneously Sliding and Fading Elements
      6. 7.5. Applying Sequential Effects
      7. 7.6. Determining Whether Elements Are Currently Being Animated
      8. 7.7. Stopping and Resetting Animations
      9. 7.8. Using Custom Easing Methods for Effects
      10. 7.9. Disabling All Effects
      11. 7.10. Using jQuery UI for Advanced Effects
    13. 8. Events
      1. Introduction
      2. 8.1. Attaching a Handler to Many Events
      3. 8.2. Reusing a Handler Function with Different Data
      4. 8.3. Removing a Whole Set of Event Handlers
      5. 8.4. Triggering Specific Event Handlers
      6. 8.5. Passing Dynamic Data to Event Handlers
      7. 8.6. Accessing an Element ASAP (Before document.ready)
      8. 8.7. Stopping the Handler Execution Loop
      9. 8.8. Getting the Correct Element When Using event.target
      10. 8.9. Avoid Multiple hover() Animations in Parallel
      11. 8.10. Making Event Handlers Work for Newly Added Elements
    14. 9. Advanced Events
      1. Introduction
      2. 9.1. Getting jQuery to Work When Loaded Dynamically
      3. 9.2. Speeding Up Global Event Triggering
      4. 9.3. Creating Your Own Events
      5. 9.4. Letting Event Handlers Provide Needed Data
      6. 9.5. Creating Event-Driven Plugins
      7. 9.6. Getting Notified When jQuery Methods Are Called
      8. 9.7. Using Objects’ Methods as Event Listeners
    15. 10. HTML Form Enhancements from Scratch
      1. Introduction
      2. 10.1. Focusing a Text Input on Page Load
      3. 10.2. Disabling and Enabling Form Elements
      4. 10.3. Selecting Radio Buttons Automatically
      5. 10.4. (De)selecting All Checkboxes Using Dedicated Links
      6. 10.5. (De)selecting All Checkboxes Using a Single Toggle
      7. 10.6. Adding and Removing Select Options
      8. 10.7. Autotabbing Based on Character Count
      9. 10.8. Displaying Remaining Character Count
      10. 10.9. Constraining Text Input to Specific Characters
      11. 10.10. Submitting a Form Using Ajax
      12. 10.11. Validating Forms
    16. 11. HTML Form Enhancements with Plugins
      1. Introduction
      2. 11.1. Validating Forms
      3. 11.2. Creating Masked Input Fields
      4. 11.3. Autocompleting Text Fields
      5. 11.4. Selecting a Range of Values
      6. 11.5. Entering a Range-Constrained Value
      7. 11.6. Uploading Files in the Background
      8. 11.7. Limiting the Length of Text Inputs
      9. 11.8. Displaying Labels Above Input Fields
      10. 11.9. Growing an Input with Its Content
      11. 11.10. Choosing a Date
    17. 12. jQuery Plugins
      1. Introduction
      2. 12.1. Where Do You Find jQuery Plugins?
      3. 12.2. When Should You Write a jQuery Plugin?
      4. 12.3. Writing Your First jQuery Plugin
      5. 12.4. Passing Options into Your Plugin
      6. 12.5. Using the $ Shortcut in Your Plugin
      7. 12.6. Including Private Functions in Your Plugin
      8. 12.7. Supporting the Metadata Plugin
      9. 12.8. Adding a Static Function to Your Plugin
      10. 12.9. Unit Testing Your Plugin with QUnit
    18. 13. Interface Components from Scratch
      1. Introduction
      2. 13.1. Creating Custom Tool Tips
      3. 13.2. Navigating with a File-Tree Expander
      4. 13.3. Expanding an Accordion
      5. 13.4. Tabbing Through a Document
      6. 13.5. Displaying a Simple Modal Window
      7. 13.6. Building Drop-Down Menus
      8. 13.7. Cross-Fading Rotating Images
      9. 13.8. Sliding Panels
    19. 14. User Interfaces with jQuery UI
      1. Introduction
      2. 14.1. Including the Entire jQuery UI Suite
      3. 14.2. Including an Individual jQuery UI Plugin or Two
      4. 14.3. Initializing a jQuery UI Plugin with Default Options
      5. 14.4. Initializing a jQuery UI Plugin with Custom Options
      6. 14.5. Creating Your Very Own jQuery UI Plugin Defaults
      7. 14.6. Getting and Setting jQuery UI Plugin Options
      8. 14.7. Calling jQuery UI Plugin Methods
      9. 14.8. Handling jQuery UI Plugin Events
      10. 14.9. Destroying a jQuery UI Plugin
      11. 14.10. Creating a jQuery UI Music Player
    20. 15. jQuery UI Theming
      1. Introduction
      2. 15.1. Styling jQuery UI Widgets with ThemeRoller
      3. 15.2. Overriding jQuery UI Layout and Theme Styles
      4. 15.3. Applying a Theme to Non-jQuery UI Components
      5. 15.4. Referencing Multiple Themes on a Single Page
      6. 15.5. Appendix: Additional CSS Resources
    21. 16. jQuery, Ajax, Data Formats: HTML, XML, JSON, JSONP
      1. Introduction
      2. 16.1. jQuery and Ajax
      3. 16.2. Using Ajax on Your Whole Site
      4. 16.3. Using Simple Ajax with User Feedback
      5. 16.4. Using Ajax Shortcuts and Data Types
      6. 16.5. Using HTML Fragments and jQuery
      7. 16.6. Converting XML to DOM
      8. 16.7. Creating JSON
      9. 16.8. Parsing JSON
      10. 16.9. Using jQuery and JSONP
    22. 17. Using jQuery in Large Projects
      1. Introduction
      2. 17.1. Using Client-Side Storage
      3. 17.2. Saving Application State for a Single Session
      4. 17.3. Saving Application State Between Sessions
      5. 17.4. Using a JavaScript Template Engine
      6. 17.5. Queuing Ajax Requests
      7. 17.6. Dealing with Ajax and the Back Button
      8. 17.7. Putting JavaScript at the End of a Page
    23. 18. Unit Testing
      1. Introduction
      2. 18.1. Automating Unit Testing
      3. 18.2. Asserting Results
      4. 18.3. Testing Synchronous Callbacks
      5. 18.4. Testing Asynchronous Callbacks
      6. 18.5. Testing User Actions
      7. 18.6. Keeping Tests Atomic
      8. 18.7. Grouping Tests
      9. 18.8. Selecting Tests to Run
    24. Index
    25. Colophon
    26. SPECIAL OFFER: Upgrade this ebook with O’Reilly
O'Reilly logo

Chapter 1. jQuery Basics

Cody Lindley

Introduction

Since you’ve picked up a cookbook about jQuery, the authors of this book for the most part are going to assume that you have a loose idea about what exactly jQuery is and what it does. Frankly, cookbooks in general are typically written for an audience who seeks to enhance a foundation of knowledge that has already been established. Thus, the recipe-solution-discussion format is used to quickly get you solutions to common problems. However, if you are a jQuery newbie, don’t throw this book against the wall and curse us just yet. We’ve dedicated this chapter to you.

If you are in need of a review or are jumping into this cookbook with little or no working knowledge of jQuery, this first chapter alone (the other chapters assume you know the basics) will aid you in learning the jQuery essentials. Now, realistically, if you have absolutely zero knowledge of JavaScript and the DOM, you might want to take a step back and ask yourself whether approaching jQuery without a basic understanding of the JavaScript core language and its relationship with the DOM is plausible. It would be my recommendation to study up on the DOM and JavaScript core before approaching jQuery. I highly recommend JavaScript: The Definitive Guide by David Flanagan (O’Reilly) as a primer before reading this book. But don’t let my humble opinion stop you if you are attempting to learn jQuery before you learn about the DOM and JavaScript. Many have come to a working knowledge of these technologies by way of jQuery. And while not ideal, let’s face it, it can still be done.

With that said, let’s take a look at a formal definition of jQuery and a brief description of its functionality:

jQuery is an open source JavaScript library that simplifies the interactions between an HTML document, or more precisely the Document Object Model (aka the DOM), and JavaScript.

In plain words, and for the old-school JavaScript hackers out there, jQuery makes Dynamic HTML (DHTML) dead easy. Specifically, jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript development.

With a formal explanation of jQuery under our belts, let’s next explore why you might choose to use jQuery.

Why jQuery?

It might seem a bit silly to speak about the merits of jQuery within this cookbook, especially since you’re reading this cookbook and are likely already aware of the merits.

So, while I might be preaching to the choir here, we’re going to take a quick look at why a developer might choose to use jQuery. My point in doing this is to foster your basic knowledge of jQuery by first explaining the “why” before we look at the “how.”

In building a case for jQuery, I’m not going to compare jQuery to its competitors in order to elevate jQuery’s significance. That’s because I just don’t believe that there really is a direct competitor. Also, I believe the only library available today that meets the needs of both designer types and programmer types is jQuery. In this context, jQuery is in a class of its own.

Of the notorious JavaScript libraries and frameworks in the wild, I truly believe each has its own niche and value. A broad comparison is silly, but it’s nevertheless attempted all the time. Heck, I am even guilty of it myself. However, after much thought on the topic, I truly believe that all JavaScript libraries are good at something. They all have value. What makes one more valuable than the other depends more upon who is using it and how it’s being used than what it actually does. Besides, it has been my observation that micro differences across JavaScript libraries are often trivial in consideration of the broader goals of JavaScript development. So, without further philosophical ramblings, here is a list of attributes that builds a case for why you should use jQuery:

  • It’s open source, and the project is licensed under an MIT and a GNU General Public License (GPL) license. It’s free, yo, in multiple ways!

  • It’s small (18 KB minified) and gzipped (114 KB, uncompressed).

  • It’s incredibly popular, which is to say it has a large community of users and a healthy amount of contributors who participate as developers and evangelists.

  • It normalizes the differences between web browsers so that you don’t have to.

  • It’s intentionally a lightweight footprint with a simple yet clever plugin architecture.

  • Its repository of plugins is vast and has seen steady growth since jQuery’s release.

  • Its API is fully documented, including inline code examples, which in the world of JavaScript libraries is a luxury. Heck, any documentation at all was a luxury for years.

  • It’s friendly, which is to say it provides helpful ways to avoid conflicts with other JavaScript libraries.

  • Its community support is actually fairly useful, including several mailing lists, IRC channels, and a freakishly insane amount of tutorials, articles, and blog posts from the jQuery community.

  • It’s openly developed, which means anyone can contribute bug fixes, enhancements, and development help.

  • Its development is steady and consistent, which is to say the development team is not afraid of releasing updates.

  • Its adoption by large organizations has and will continue to breed longevity and stability (e.g., Microsoft, Dell, Bank of America, Digg, CBS, Netflix).

  • It’s incorporating specifications from the W3C before the browsers do. As an example, jQuery supports a good majority of the CSS3 selectors.

  • It’s currently tested and optimized for development on modern browsers (Chrome 1, Chrome Nightly, IE 6, IE 7, IE 8, Opera 9.6, Safari 3.2, WebKit Nightly, Firefox 2, Firefox 3, Firefox Nightly).

  • It’s downright powerful in the hands of designer types as well as programmers. jQuery does not discriminate.

  • Its elegance, methodologies, and philosophy of changing the way JavaScript is written is becoming a standard in and of itself. Consider just how many other solutions have borrowed the selector and chaining patterns.

  • Its unexplainable by-product of feel-good programming is contagious and certainly unavoidable; even the critics seem to fall in love with aspects of jQuery.

  • Its documentation has many outlets (e.g., API browser, dashboard apps, cheat sheets) including an offline API browser (AIR application).

  • It’s purposely bent to facilitate unobtrusive JavaScript practices.

  • It has remained a JavaScript library (as opposed to a framework) at heart while at the same time providing a sister project for user interface widgets and application development (jQuery UI).

  • Its learning curve is approachable because it builds upon concepts that most developers and designers already understand (e.g., CSS and HTML).

It is my opinion that the combination of the aforementioned jQuery points, and not any single attribute on its own, sets it apart from all other solutions. The total jQuery package is simply unmatched as a JavaScript tool.

The jQuery Philosophy

The jQuery philosophy is “Write less, do more.” This philosophy can be further broken down into three concepts:

  • Finding some elements (via CSS selectors) and doing something with them (via jQuery methods)

  • Chaining multiple jQuery methods on a set of elements

  • Using the jQuery wrapper and implicit iteration

Understanding these three concepts in detail is foundational when it comes time to write your own jQuery code or augment the recipes found in this book. Let’s examine each of these concepts in detail.

Find some elements and do something with them

Or more specifically stated, locate a set of elements in the DOM, and then do something with that set of elements. For example, let’s examine a scenario where you want to hide a <div> from the user, load some new text content into the hidden <div>, change an attribute of the selected <div>, and then finally make the hidden <div> visible again.

This last sentence translated into jQuery code would look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/JavaScript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div>old content</div>
<script>

//hide all divs on the page
jQuery('div').hide();

//update the text contained inside of all divs
jQuery('div').text('new content');

//add a class attribute with a value of updatedContent to all divs
jQuery('div').addClass("updatedContent");

//show all divs on the page
jQuery('div').show();

</script>
</body>
</html>

Let’s step through these four jQuery statements:

  • Hide the <div> element on the page so it’s hidden from the user’s view.

  • Replace the text inside the hidden <div> with some new text (new content).

  • Update the <div> element with a new attribute (class) and value (updatedContent).

  • Show the <div> element on the page so it’s visible again to the viewing user.

If the jQuery code at this point is mystical syntax to you, that’s OK. We’ll dive into the basics with the first recipe in this chapter. Again, what you need to take away from this code example is the jQuery concept of “find some elements and do something with them.” In our code example, we found all the <div> elements in the HTML page using the jQuery function (jQuery()), and then using jQuery methods we did something with them (e.g., hide(), text(), addClass(), show()).

Chaining

jQuery is constructed in a manner that will allow jQuery methods to be chained. For example, why not find an element once and then chain operations onto that element? Our former code example demonstrating the “Find some elements and do something with them” concept could be rewritten to a single JavaScript statement using chaining.

This code, using chaining, can be changed from this:

//hide all divs on the page
jQuery('div').hide();

//update the text contained inside of the div
jQuery('div').text('new content');

//add a class attribute with a value of updatedContent to all divs
jQuery('div').addClass("updatedContent");

//show all divs on the page
jQuery('div').show();

to this:

jQuery('div').hide().text('new content').addClass("updatedContent").show();

or, with indenting and line breaks, to this:

jQuery('div')
    .hide()
    .text('new content')
    .addClass("updatedContent")
    .show();

Plainly speaking, chaining simply allows you to apply an endless chain of jQuery methods on the elements that are currently selected (currently wrapped with jQuery functionality) using the jQuery function. Behind the scenes, the elements previously selected before a jQuery method was applied are always returned so that the chain can continue. As you will see in future recipes, plugins are also constructed in this manner (returning wrapped elements) so that using a plugin does not break the chain.

If it’s not immediately obvious, and based on the code in question, chaining also cuts down on processing overhead by selecting a set of DOM elements only once, to then be operated on numerous times by jQuery methods by way of chaining. Avoiding unnecessary DOM traversing is a critical part of page performance enhancements. Whenever possible, reuse or cache a set of selected DOM elements.

The jQuery wrapper set

A good majority of the time, if jQuery is involved, you’re going to be getting what is known as a wrapper. In other words, you’ll be selecting DOM elements from an HTML page that will be wrapped with jQuery functionality. Personally, I often refer to this as a “wrapper set” or “wrapped set” because it’s a set of elements wrapped with jQuery functionality. Sometimes this wrapper set will contain one DOM element; other times it will contain several. There are even cases where the wrapper set will contain no elements. In these situations, the methods/properties that jQuery provides will fail silently if methods are called on an empty wrapper set, which can be handy in avoiding unneeded if statements.

Now, based on the code we used to demonstrate the “Find some elements and do something with them” concept, what do you think would happen if we added multiple <div> elements to the web page? In the following updated code example, I have added three additional <div> elements to the HTML page, for a total of four <div> elements:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.3.0/jquery.min.js"></script> </head>
<body>
<div>old content</div>
<div>old content</div>
<div>old content</div>
<div>old content</div>
<script>
//hide all divs on the page
jQuery('div').hide().text('new content').addClass("updatedContent").show();

</script>
</body>
</html>

You may not have explicitly written any programmatic loops here, but guess what? jQuery is going to scan the page and place all <div> elements in the wrapper set so that the jQuery methods I am using here are performed (aka implicit iteration) on each DOM element in the set. For example, the .hide() method actually applies to each element in the set. So if you look at our code again, you will see that each method that we use will be applied to each <div> element on the page. It’s as if you had written a loop here to invoke each jQuery method on each DOM element. The updated code example will result in each <div> in the page being hidden, filled with updated text, given a new class value, and then made visible again.

Wrapping your head around (pun intended) the wrapper set and its default looping system (aka implicit iteration) is critical for building advanced concepts around looping. Just keep in mind that a simple loop is occurring here before you actually do any additional looping (e.g., jQuery('div').each(function(){}). Or another way to look at this is each element in the wrapper will typically be changed by the jQuery method(s) that are called.

Something to keep in mind here is there are scenarios that you will learn about in the coming chapters where only the first element, and not all the elements in the wrapper set, is affected by the jQuery method (e.g., attr()).

How the jQuery API Is Organized

There is no question that when I first started out with jQuery, my main reason for selecting it as my JavaScript library was simply that it had been properly documented (and the gazillion plugins!). Later, I realized another factor that cemented my love affair with jQuery was the fact that the API was organized into logical categories. Just by looking at how the API was organized, I could narrow down the functionality I needed.

Before you really get started with jQuery, I suggest visiting the documentation online and simply digesting how the API is organized. By understanding how the API is organized, you’ll more quickly navigate the documentation to the exact information you need, which is actually a significant advantage given that there are really a lot of different ways to code a jQuery solution. It’s so robust that it’s easy to get hung up on implementation because of the number of solutions for a single problem. I’ve replicated here for you how the API is organized. I suggest memorizing the API outline, or at the very least the top-level categories.

  • jQuery Core

    • The jQuery Function

    • jQuery Object Accessors

    • Data

    • Plugins

    • Interoperability

  • Selectors

    • Basics

    • Hierarchy

    • Basic Filters

    • Content Filters

    • Visibility Filters

    • Attribute Filters

    • Child Filters

    • Forms

    • Form Filters

  • Attributes

    • Attr

    • Class

    • HTML

    • Text

    • Value

  • Traversing

    • Filtering

    • Finding

    • Chaining

  • Manipulation

    • Changing Contents

    • Inserting Inside

    • Inserting Outside

    • Inserting Around

    • Replacing

    • Removing

    • Copying

  • CSS

    • CSS

    • Positioning

    • Height and Widths

  • Events

    • Page Load

    • Event Handling

    • Live Events

    • Interaction Helpers

    • Event Helpers

  • Effects

    • Basics

    • Sliding

    • Fading

    • Custom

    • Settings

  • Ajax

    • AJAX Requests

    • AJAX Events

    • Misc.

  • Utilities

    • Browser and Feature Detection

    • Array and Object Operations

    • Test Operations

    • String Operations

    • Urls

Before we jump into a sequence of basic jQuery recipes, I would like to mention that the recipes found in this chapter build on each other. That is, there is a logical formation of knowledge as you progress from the first recipe to the last. It’s my suggestion, for your first reading of these recipes, that you read them in order from 1.1 to 1.17.

The best content for your career. Discover unlimited learning on demand for around $1/day.