Book Image

Learning jQuery - Fourth Edition - Fourth Edition

Book Image

Learning jQuery - Fourth Edition - Fourth Edition

Overview of this book

To build interesting, interactive sites, developers are turning to JavaScript libraries such as jQuery to automate common tasks and simplify complicated ones. Because many web developers have more experience with HTML and CSS than with JavaScript, the library's design lends itself to a quick start for designers with little programming experience. Experienced programmers will also be aided by its conceptual consistency. LearningjQuery - Fourth Edition is revised and updated version of jQuery. You will learn the basics of jQuery for adding interactions and animations to your pages. Even if previous attempts at writing JavaScript have left you baffled, this book will guide you past the pitfalls associated with AJAX, events, effects, and advanced JavaScript language features. Starting with an introduction to jQuery, you will first be shown how to write a functioning jQuery program in just three lines of code. Learn how to add impact to your actions through a set of simple visual effects and to create, copy, reassemble, and embellish content using jQuery's DOM modification methods. The book will take you through many detailed, real-world examples, and even equip you to extend the jQuery library itself with your own plug-ins.
Table of Contents (24 chapters)
Learning jQuery Fourth Edition
About the Authors
About the Reviewers


In 2005, inspired by pioneers in the field such as Dean Edwards and Simon Willison, John Resig put together a set of functions to make it easy to programmatically find elements on a web page and assign behaviors to them. By the time he first publicly announced his project in January 2006, he had added DOM modification and basic animations. He gave it the name jQuery to emphasize the central role of finding or querying parts of a web page and acting on them with JavaScript. Rapidly over the years since then, jQuery has grown in its feature set, improved in its performance, and gained widespread adoption by many of the most popular sites on the Internet. While Resig has since stepped down from his role as lead developer of the project, jQuery has blossomed, in true open source fashion, to the point where it now boasts a top-notch core team headed by Dave Methvin, as well as a vibrant community of thousands of additional JavaScript developers.

The jQuery JavaScript library can enhance your websites regardless of your background. It provides a wide range of features, an easy-to-learn syntax, and robust cross-platform compatibility in a single compact file. What's more, hundreds of plugins have been developed to extend jQuery's functionality, making it an essential tool for nearly every client-side scripting occasion.

Learning jQuery Fourth Edition 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. This book guides you past the pitfalls associated with Ajax, events, effects, and advanced JavaScript language features, and provides you with a brief reference to the jQuery library to return to again and again.

What this book covers

Chapter 1, Getting Started, will get your feet wet with the jQuery JavaScript library. The chapter begins with a description of jQuery and what it can do for you. It then walks you through downloading and setting up the library, as well as writing your first script.

Chapter 2, Selecting Elements, will teach how to use jQuery's selector expressions and DOM traversal methods to find elements on the page, wherever they may be. You'll use jQuery to apply styling to a diverse set of page elements, sometimes in a way that pure CSS cannot.

Chapter 3, Handling Events, will walk you through jQuery's event-handling mechanism to fire off behaviors when browser events occur. You'll see how jQuery makes it easy to attach events to elements unobtrusively, even before the page finishes loading. Also, you'll get an overview of deeper topics, such as event bubbling, delegation, and namespacing.

Chapter 4, Styling and Animating, will introduce you to jQuery's animation techniques and how to hide, show, and move page elements with effects that are both useful and pleasing to the eye.

Chapter 5, Manipulating the DOM, will teach you how to change your page on command. This chapter will also teach you how to alter the very structure of an HTML document, as well as adding to its content on the fly.

Chapter 6, Sending Data with Ajax, will walk you through many ways in which jQuery makes it easy to access server-side functionality without resorting to clunky page refreshes. With the basic components of the library well in hand, you will be ready to explore how the library can expand to fit your needs.

Chapter 7, Using Plugins, will show you how to find, install, and use plugins, including the powerful jQuery UI and jQuery Mobile plugin libraries.

Chapter 8, Developing Plugins, will teach you how to take advantage of jQuery's impressive extension capabilities to develop your own plugins from the ground up. You'll create your own utility functions, add jQuery object methods, and discover the jQuery UI widget factory. Next, you'll take a second tour through jQuery's building blocks, learning more advanced techniques.

Chapter 9, Advanced Selectors and Traversing, will refine your knowledge of selectors and traversals, gaining the ability to optimize selectors for performance, manipulate the DOM element stack, and write plugins that expand selecting and traversing capabilities.

Chapter 10, Advanced Events, will dive further into techniques such as delegation and throttling that can greatly improve event-handling performance. You'll also create custom and special events that add even more capabilities to the jQuery library.

Chapter 11, Advanced Effects, will fine-tune the visual effects of jQuery that can be provided by crafting custom-easing functions and reacting to each step of an animation. You'll gain the ability to manipulate animations as they occur and schedule actions with custom queuing.

Chapter 12, Advanced DOM Manipulation, will provide you with more practice modifying the DOM with techniques such as attaching arbitrary data to elements. You'll also learn how to extend the way jQuery processes CSS properties on elements.

Chapter 13, Advanced Ajax, will help you achieve a greater understanding of Ajax transactions, including the jQuery deferred object system for handling data that may become available at a later time.

Appendix A, JavaScript Closures, will help you gain a solid understanding of closures in JavaScript—what they are and how you can use them to your advantage.

Appendix B, Testing JavaScript with QUnit, will teach you about the QUnit library for unit testing of JavaScript programs. This library will add to your toolkit for developing and maintaining highly sophisticated web applications.

Appendix C, Quick Reference, will provide a glimpse of the entire jQuery library, including every one of its methods and selector expressions. Its easy-to-scan format is perfect for those moments when you know what you want to do, but you're just unsure about the right method name or selector.

What you need for this book

In order to run the example code demonstrated in this book, you need a modern web browser such as Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Internet Explorer.

To experiment with the examples and to work on the chapter-ending exercises, you will also need:

  • A basic text editor

  • Web development tools for the browser such as the Chrome Developer Tools or Firebug (as described in the Using development tools section of Chapter 1, Getting Started )

  • The full code package for each chapter, which includes a copy of the jQuery library (seen in the following Downloading the example code section)

Additionally, to run some of the Ajax examples in Chapter 6, Sending Data with Ajax and beyond, you will need a PHP-enabled web server.

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. Basic JavaScript programming knowledge is required. You will need to know the basics of HTML and CSS, and should be comfortable with the syntax of JavaScript. Prior knowledge of jQuery is not assumed, nor is experience with any other JavaScript libraries required.

By reading this book, you will become familiar with the functionality and syntax of jQuery 1.10.x and jQuery 2.0.x, the latest versions at the time of writing.


In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: "In addition, we can interact with this console directly from our code, using the console.log() method."

A block of code is set as follows:

$(document).ready(function() {

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

$('#switcher-narrow').bind('click', function() {

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "The Console tab will be of most frequent use to us while learning jQuery."


Warnings or important notes appear in a box like this.


Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to , and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

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.

In addition, the examples can be viewed in an interactive browser at


Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from


Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.


You can contact us at if you are having a problem with any aspect of the book, and we will do our best to address it.