You are previewing Mastering jQuery.
O'Reilly logo
Mastering jQuery

Book Description

Elevate your development skills by leveraging every available ounce of jQuery

In Detail

Mastering jQuery has been written not only to help maximize your skills with core functionality in the library, but also to explore some of the more intriguing ways of using the library to achieve real-world solutions that could feature on any website or online environment.

You'll start with a look at some of the more advanced ways to incorporate the library into your pages, followed by working with forms and advanced form validation using regular expressions. Next you'll move on to animating in jQuery, advanced event handling, and using jQuery effects.

Finally, you will develop practical examples of using jQuery with external functionality such as node-webkit, before finishing with a session on optimizing your version of the library for maximum efficiency and exploring best practices for using QUnit.

What You Will Learn

  • Learn how to better organize your code, using one of the many design patterns available for the library

  • Develop your skills further in some of the core jQuery subjects, such as event handling, using AJAX, and animating elements

  • Develop your skills within technologies where you might not consider using jQuery, such as the Page Visibility API or using node-webKit

  • Explore some of the more advanced tips and tricks for optimizing jQuery to maintain performance

  • Learn how to improve your development workflow when testing jQuery to help reduce the manual effort needed to produce results

  • Automate testing using NodeJS and RequireJS

  • Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.

    Table of Contents

    1. Mastering jQuery
      1. Table of Contents
      2. Mastering jQuery
      3. Credits
      4. About the Author
      5. About the Reviewers
        1. Support files, eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer Support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      8. 1. Installing jQuery
        1. Downloading and installing jQuery
          1. Using jQuery in a development capacity
          2. Adding the jQuery Migrate plugin
          3. Using a CDN
        2. Using other sources to install jQuery
          1. Using NodeJS to install jQuery
          2. Installing jQuery using Bower
          3. Using the AMD approach to load jQuery
        3. Customizing the downloads of jQuery from Git
          1. Removing redundant modules
          2. Using a GUI as an alternative
        4. Adding source map support
          1. Adding support for source maps
        5. Working with Modernizr as a fallback
        6. Best practices for loading jQuery
        7. Summary
      9. 2. Customizing jQuery
        1. Getting prepared
        2. Patching the library on the run
          1. Introducing monkey patching
        3. Replacing or modifying existing behaviors
        4. Creating a basic monkey patch
          1. Dissecting our monkey patch
        5. Considering the benefits of monkey patching
        6. Updating animation support in jQuery
          1. Exploring the requestAnimationFrame API's past
          2. Using the requestAnimationFrame method today
          3. Creating our demo
        7. Adding WebP support to jQuery
          1. Getting started
          2. Creating our patch
          3. Taking things further
        8. Considering the pitfalls of monkey patching
        9. Distributing or applying patches
        10. Summary
      10. 3. Organizing Your Code
        1. Introducing design patterns
        2. Defining design patterns
        3. Dissecting the structure of a design pattern
        4. Categorizing patterns
          1. The Composite Pattern
            1. Advantages and disadvantages of the Composite Pattern
          2. The Adapter Pattern
            1. Advantages and disadvantages of the Adapter Pattern
          3. The Facade Pattern
            1. Creating a simple animation
            2. Advantages and disadvantages of the Fa├žade Pattern
          4. The Observer Pattern
            1. Advantages and disadvantages of the Observer Pattern
            2. Creating a basic example
          5. The Iterator Pattern
            1. Advantages and disadvantages of the Iterator Pattern
          6. The Lazy Initialization Pattern
            1. Advantages and disadvantages of the Lazy Initialization Pattern
          7. The Strategy Pattern
            1. Building a simple toggle effect
            2. Switching between actions
            3. Advantages and disadvantages of the Strategy Pattern
          8. The Proxy Pattern
            1. Advantages and disadvantages of the Proxy Pattern
          9. Builder Pattern
            1. Advantages and disadvantages of the Builder Pattern
        5. Exploring the use of patterns within the jQuery library
        6. Summary
      11. 4. Working with Forms
        1. Exploring the need for form validation
        2. Creating a basic form
        3. Starting with simple HTML5 validation
          1. Using HTML5 over jQuery
        4. Using jQuery to validate our forms
        5. Validating forms using regex statements
          1. Creating a regex validation function for e-mails
          2. Taking it further for URL validation
        6. Building a simple validation plugin
        7. Developing a plugin architecture for validation
          1. Creating our basic form
          2. Creating custom validators
          3. Localizing our content
          4. Centralizing our error messages
          5. Wrapping up development
          6. Noting the use of best practices
          7. Providing fallback support
        8. Creating an advanced contact form using AJAX
        9. Developing an advanced file upload form using jQuery
        10. Summary
      12. 5. Integrating AJAX
        1. Revisiting AJAX
          1. Defining AJAX
          2. Creating a simple example using AJAX
        2. Improving the speed of loading data with static sites
        3. Using localStorage to cache AJAX content
        4. Using callbacks to handle multiple AJAX requests
        5. Enhancing your code with jQuery Deferreds and Promises
        6. Working with Deferreds and Promises
        7. Modifying our advance contact form
          1. Adding file upload capabilities using AJAX
          2. Examining the use of Promises and Deferreds in the demo
        8. Detailing AJAX best practices
        9. Summary
      13. 6. Animating in jQuery
        1. Choosing CSS or jQuery
        2. Controlling the jQuery animation queue
          1. Fixing the problem
          2. Making the transition even smoother
          3. Using a pure CSS solution
        3. Improving jQuery animations
        4. Introducing easing functions
        5. Designing custom animations
          1. Converting to use with jQuery
        6. Implementing some custom animations
          1. Animating rollover buttons
            1. Exploring the code in more detail
          2. Animating an overlay effect
        7. Animating in a responsive website
          1. Considering animation performance on responsive sites
        8. Handling animation requests on a responsive site
        9. Animating content for mobile devices
          1. Improving the appearance of animations
        10. Implementing responsive parallax scrolling
          1. Building a parallax scrolling page
          2. Considering the implications of parallax scrolling
        11. Summary
      14. 7. Advanced Event Handling
        1. Introducing event handling
        2. Delegating events
          1. Revisiting the basics of event delegation
            1. Reworking our code
            2. Supporting older browsers
          2. Exploring a simple demonstration
          3. Exploring the implications of using event delegation
          4. Controlling delegation
            1. Using the stopPropagation() method as an alternative
        3. Using the $.proxy function
        4. Creating and decoupling custom event types
          1. Creating a custom event
          2. Working with the Multiclick event plugin
        5. Namespacing events
        6. Summary
      15. 8. Using jQuery Effects
        1. Revisiting effects
          1. Exploring the differences between animation and effects
        2. Creating custom effects
          1. Exploring the animate() method as the basis for effects
          2. Putting custom effects into action
            1. Creating a clickToggle handler
            2. Sliding content with a slide-fade Toggle
        3. Applying custom easing functions to effects
          1. Adding a custom easing to our effect
          2. Using Bezier curves in effects
            1. Adding Bezier curve support
          3. Using pure CSS as an alternative
        4. Adding callbacks to our effects
        5. Controlling content with jQuery's Promises
        6. Creating and managing the effect queue
        7. Summary
      16. 9. Using the Web Performance APIs
        1. An introduction to the Page Visibility API
        2. Supporting the API
        3. Implementing the Page Visibility API
          1. Breaking down the API
        4. Detecting support for the Page Visibility API
          1. Providing fallback support
          2. Installing visibility.js
          3. Building the demo
        5. Using the API in a practical context
          1. Pausing video or audio
          2. Adding support to a CMS
          3. Exploring ideas for examples
        6. Introducing the requestAnimationFrame API
          1. Exploring the concept
          2. Viewing the API in action
          3. Using the requestAnimationFrame API
          4. Retrofitting the changes to jQuery
            1. Updating existing code
        7. Some examples of using requestAnimationFrame
          1. Creating a scrollable effect
          2. Animating the Google Maps marker
          3. Exploring sources of inspiration
        8. Summary
      17. 10. Manipulating Images
        1. Manipulating colors in images
        2. Adding filters using CSS3
          1. Getting ready
          2. Creating our base page
          3. Changing the brightness level
          4. Adding a sepia filter to our image
          5. Exploring other filters
        3. Blending images using CSS3
        4. Applying filters with CamanJS
          1. Introducing CamanJS as a plugin
          2. Building a simple demo
          3. Getting really creative
        5. Creating simple filters manually
          1. Grayscaling an image
          2. Adding a sepia tone
          3. Blending images
        6. Animating images with filters
          1. Introducing cssAnimate
        7. Creating a signature pad and exporting the image
        8. Capturing and manipulating webcam images
        9. Finishing up
        10. Summary
      18. 11. Authoring Advanced Plugins
        1. Detecting signs of a poorly developed plugin
        2. Introducing design patterns
          1. Creating or using patterns
        3. Designing an advanced plugin
          1. Rebuilding our plugin using boilerplate
        4. Converting animations to use CSS3 automatically
          1. Working with CSS-based animations
          2. Considering the impact of the change
          3. Falling back on jQuery animations
        5. Extending our plugin
        6. Packaging our plugin using Bower
        7. Automating the provision of documentation
        8. Returning values from our plugin
        9. Exploring best practices and principles
        10. Summary
      19. 12. Using jQuery with the Node-WebKit Project
        1. Setting the scene
        2. Introducing Node-WebKit
          1. Operating HTML applications on a desktop
        3. Preparing our development environment
        4. Installing and building our first application
          1. Dissecting the package.json file
        5. Building our simple application
          1. Exploring our demo further
          2. Dissecting our content files
            1. Exploring window.js
            2. Dissecting the BlueImp plugin configuration
            3. Automating the creation of our project
          3. Debugging your application
        6. Packaging and deploying your app
          1. Creating packages manually
          2. Automating the process
          3. Deploying your application
        7. Taking things further
        8. Summary
      20. 13. Enhancing Performance in jQuery
        1. Understanding why performance is critical
        2. Monitoring the speed of jQuery using Firebug
        3. Automating performance monitoring
          1. Gaining insight using Google PageSpeed
        4. Linting jQuery code automatically
        5. Minifying code using NodeJS
          1. Exploring some points of note
          2. Working through a real example
        6. Working out unused JavaScript
        7. Implementing best practices
          1. Designing a strategy for performance
        8. Staying with the use of jQuery
        9. Summary
      21. 14. Testing jQuery
        1. Revisiting QUnit
          1. Installing QUnit
          2. Creating a simple demo
        2. Automating tests with QUnit
        3. Exploring best practices when using QUnit
        4. Summary
      22. Index