Book Image

Learning jQuery, Third Edition

Book Image

Learning jQuery, Third 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.Learning jQuery Third Edition is revised and updated for version 1.6 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 step 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 Third Edition
Credits
Foreword
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

Preface

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. In the few short 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 remains the lead developer of the project, jQuery has blossomed, in true open-source fashion, to the point where it now boasts a core team of top-notch JavaScript developers, as well as a vibrant community of thousands of 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 Third 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

In Chapter 1, Getting Started, you'll 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.

In Chapter 2, Selecting Elements, you'll learn 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.

In Chapter 3, Handling Events, you'll use 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.

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

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

In Chapter 6, Sending Data with Ajax, you'll discover the 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.

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

In Chapter 8, Developing Plugins, you'll learn 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.

In Chapter 9, Advanced Selectors and Traversing, you'll 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.

In Chapter 10, Advanced Events, you'll 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.

In Chapter 11, Advanced Effects, you'll fine-tune the visual effects jQuery can provide 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.

In Chapter 12, Advanced DOM Manipulation, you'll get 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.

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

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

In Appendix B, Testing JavaScript with QUnit, you'll learn 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.

In Appendix C, Quick Reference, you'll get 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 Mozilla Firefox, Apple Safari, Google Chrome, 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 Firebug (as described in Chapter 1 in the Development Tools section)

  • 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 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. No knowledge of jQuery is 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.6.x, the latest version at the time of writing.

History of the jQuery project

This book covers the functionality and syntax of jQuery 1.6.x, the latest version at the time of writing. The premise behind the library—providing an easy way to find elements on a web page and manipulate them—has not changed over the course of its development, but some syntax details and features have. This brief overview of the project history describes the most significant changes from version to version, which may prove helpful to readers working with legacy versions of the library.

  • Public Development Phase: John Resig first made mention of an improvement on Prototype's Behavior library in August of 2005. This new framework was formally released as jQuery on January 14, 2006.

  • jQuery 1.0 (August 2006): This, the first stable release of the library, already had robust support for CSS selectors, event handling, and AJAX interaction.

  • jQuery 1.1 (January 2007): This release streamlined the API considerably. Many rarely-used methods were combined, reducing the number of methods to learn and document.

  • jQuery 1.1.3 (July 2007): This minor release contained massive speed improvements for jQuery's selector engine. From this version on, jQuery's performance would compare favorably to its fellow JavaScript libraries such as Prototype, Mootools, and Dojo.

  • jQuery 1.2 (September 2007): XPath syntax for selecting elements was removed in this release, as it had become redundant with the CSS syntax. Effect customization became much more flexible in this release, and plugin development became easier with the addition of namespaced events.

  • jQuery UI (September 2007): This new plugin suite was announced to replace the popular, but aging, Interface plugin. A rich collection of prefabricated widgets was included, as well as a set of tools for building sophisticated elements such as drag-and-drop interfaces.

  • jQuery 1.2.6 (May 2008): The functionality of Brandon Aaron's popular Dimensions plugin was brought into the main library.

  • jQuery 1.3 (January 2009): A major overhaul of the selector engine (Sizzle) provided a huge boost to the library’s performance. Event delegation became formally supported.

  • jQuery 1.4 (January 2010): This version, perhaps the most ambitious update since 1.0, brought many performance improvements to DOM manipulation, as well as a large number of new or enhanced methods to nearly every aspect of the library. Version 1.4 was accompanied by fourteen days of announcements and videos on a dedicated website, http://jquery14.com/.

  • jQuery 1.4.2 (February 2010): Two new event delegation methods, .delegate() and .undelegate(), were added, and jQuery’s entire event system saw a comprehensive overhaul for more flexible use and greater cross-browser consistency.

  • jQuery Mobile (August 2010): The jQuery Project publicly outlined its strategy, research, and UI designs for mobile web development with jQuery and a new mobile framework at http://jquerymobile.com/.

  • jQuery 1.5 (January 2011): The Ajax component underwent a major rewrite, adding greater extensibility and performance. Additionally, jQuery 1.5 included an implementation of the Promise pattern for handling queues of both synchronous and asynchronous functions.

  • jQuery 1.6 (May 2011): The Attribute component was rewritten to more accurately reflect the distinction between HTML attributes and DOM properties. Also, the Deferred object, which was introduced in jQuery 1.5, received two new methods: .always() and .pipe().

Tip

Historical Details

Release notes for older jQuery versions can be found on the project's website at http://jquery.org/history.

Conventions

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: "This code illustrates that we can pass any kind of expression into the console.log() method."

A block of code is set as follows:

$('button.show-details').click(function() {
  $('div.details').show();
});

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() {
  $('body').removeClass().addClass('narrow');
});

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, as shown in the following screenshot".

Note

Warnings or important notes appear in a box like this.

Tip

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 book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail .

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 www.packtpub.com/authors.

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 http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Errata

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 http://www.packtpub.com/support, 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 http://www.packtpub.com/support.

Piracy

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.

Questions

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.