Introduction

JQUERY HAS BECOME ESSENTIAL in the world of web development. jQuery's mission as a JavaScript library is simple: It strives to make the lives of web developers easier by making many tasks much easier. jQuery began as a library to patch cross-browser inconsistencies, to make developing in JavaScript easier, while it still provides a lot of cross-browser normalization. As browsers have advanced and filled in holes in compatibility, jQuery has become leaner, more efficient, and better at fulfilling the task of providing an API that makes developing JavaScript easier.

jQuery has the proven capability to reduce many lines of ordinary JavaScript to just a few lines, and, in many cases, just a single line of jQuery-enabled JavaScript. The trade-off is including the additional size and complexity of the jQuery library (and possibly additional related downloads) in the materials your users need to obtain to use your website or application. This is less of a trade-off today as more and more people have access to high-speed Internet. High-speed internet, although still pathetic in the United States when compared to some other nations, has inched up in overall speed. So, the additional download isn't all that much when you consider the big picture.

jQuery strives to remove barriers in JavaScript development by removing redundancy wherever possible. jQuery 1.9 and earlier focus more on normalizing cross-browser JavaScript development in key areas where browsers would otherwise differ, such as Microsoft's Event API and the W3C Event API, and other, more remedial tasks such as getting the mouse cursor's position when an event has taken place. With the normalization efforts taking place in the browsers, jQuery 2.0 can shed a great deal of legacy baggage that focused on bridging things such as event compatibility between Internet Explorer and everyone else. Now, the latest version of Internet Explorer has the standard event API in strict standards rendering mode, so when you include the right Document Type Declaration, there is no need to bridge event support.

jQuery 1.9 should be used if you need to work with older versions of Internet Explorer, such as IE8. Both jQuery 1.9 and jQuery 2.0 work with all the modern browsers, including the latest versions of Safari, Firefox, Google Chrome, and Internet Explorer.

Getting started with jQuery is easy-all you need to do is include a single script in your HTML or XHTML documents to include the base jQuery JavaScript library. Throughout this book, jQuery's API (Application Programming Interface) components are demonstrated in detail and show you how everything within this framework comes together to enable you to rapidly develop web applications.

This book also covers the jQuery UI library, which makes redundant user interface (UI) tasks on the client side easier and more accessible to everyday web developers who might not have much JavaScript programming expertise. The jQuery UI library includes widgets such as dialogs, tabs, accordions, and a datepicker; for a complete demonstration, view the examples available at http://www.jqueryui.com.

A large, thriving community of jQuery plugins is available for free, and a few of the most popular are covered. In addition, you learn how to create your own jQuery plugins, from simple to complex.

Who This Book Is For

This book is for anyone interested in doing more with less JavaScript. You should have an understanding of JavaScript, as this book doesn't go into detail about JavaScript itself. You need to understand the Document Object Model (DOM) and JavaScript programming syntax. In addition, you need to know your way around CSS and HTML5 or XHTML5, as knowledge of those technologies is also assumed. This book covers primarily programming in JavaScript with jQuery.

A complete beginner might grasp what is taking place in the examples in this book but might not understand certain terminology and programming concepts that would be presented in a beginner's JavaScript guide. So, if you are a beginner and insist with pressing forward, you should do so with a beginning JavaScript book on hand as well. Specifically, consider the following Wrox books for more help with the basics:

• Beginning HTML, XHTML, CSS, and JavaScript (2009), by Jon Duckett
• Beginning CSS: Cascading Style Sheets for Web Design, 3rd Edition (2011), by Ian Pouncey and Richard York
• Beginning JavaScript, 4th Edition (2009), by Paul Wilton and Jeremy McPeak

For further knowledge of JavaScript beyond what is covered in this book, check out Professional JavaScript for Web Developers, 3rd Edition (2012), by Nicholas C. Zakas.

What This Book Covers

This book covers the jQuery JavaScript framework and the jQuery UI JavaScript framework, in addition to some popular third-party plugins and how to write and use your own third-party plugins. It covers each method exposed by jQuery's API, which contains methods to make common, redundant tasks go more quickly in less code. Some examples are methods that help you to select elements from a markup document through the DOM and methods that help you to traverse through those selections and filter them using jQuery's fine-grained controls. This makes working with the DOM easier and more effortless. It also covers jQuery's event model, which both wraps around the normal W3C event API and provides an API that when used correctly can heavily optimize and reduce complexity in your applications.

Later in the book, you see how to leverage the jQuery UI library to make user interface (UI) widgets. jQuery gives you the ability to break up content among multiple tabs in the same page. You have the ability to customize the look and feel of the tabs, and even to create a polished look and feel by providing different effects when you mouse over tabs and click them. The jQuery UI library also makes it easy to create accordion sidebars. These sidebars have two or more panels, and when you mouse over an item, one pane transitions to another via a smooth, seamless animation wherein the preceding pane collapses and the proceeding pane expands.

The jQuery UI library also gives you the ability to make any element draggable with the mouse cursor; by clicking, holding and moving the mouse, you can move elements around a page to any position you like. It also makes it easy to create drag-and-drop user interfaces. You can use jQuery UI to make droppable zones, where you take elements from other parts of a page and drop them on another, similarly to how you might interact with your operating system's file manager when you want to move a folder from one place to another. You can also make lists that are sortable via drag-and-drop, rearranging elements based on where you drop them. You can have a user interface where you drag the mouse cursor to make a selection, as you would in your operating system's file manager when you want to select more than one file or folder. jQuery UI exposes the ability to resize elements on a page using the mouse. All the things that you can imagine doing on your computer's desktop, or within an application, you can do in a web browser with jQuery UI.

jQuery UI also provides a widget for entering a date into a field using a nice, accessible JavaScript-driven calendar that pops up when you click on an input field.

You can make custom pop-up dialogs that are like virtual pop-up windows, except they don't open a separate browser window-they display using markup, CSS, and JavaScript.

Another widget that jQuery UI provides is a graphical slider bar, similar to your media player's volume control.

As jQuery has done for JavaScript programming in general, jQuery UI strives to do for redundant graphical user interface (GUI) tasks. jQuery UI gives you the ability to make professional user-interface widgets with much less development effort.

If you're interested in reading news about jQuery, how it's evolving, and topics related to web development, you may be interested in reading the official jQuery blog at blog.jquery.com or jQuery's creator John Resig's blog at www.ejohn.org.

If you need help, you can participate in programming discussions at p2p.wrox.com, which you can join for free, to ask programming questions in moderated forums. There are also programming forums provided by the jQuery community, which you can learn more about at http://docs.jquery.com/Discussion.

How This Book Is Structured

This book is divided into four parts: The first covers the basic API exposed by the jQuery library; the second covers the jQuery UI library; and the third covers a few popular jQuery plugins, as well as how to make a more advanced jQuery plugin. Finally, the appendices contain useful reference material.

Part I: The jQuery API

• Chapter 1: Introduction to jQuery-This chapter discusses where jQuery came from and why it is needed. It includes some good programming practices and the specific programming conventions used in this book. The chapter ends with a walkthrough of downloading your first jQuery-enabled JavaScript.
• Chapter 2: Selecting and Filtering-This chapter introduces jQuery's selector engine, which uses selectors like you have used with CSS to make selections from the DOM. It discusses the various methods that jQuery exposes for...