Web Development with jQuery (2015)

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 working with a selection to give you fine-grained control over what elements you're working with from the DOM. It talks about methods that enable you to select ancestor elements, parent elements, sibling elements, and descendant elements; how to remove elements from a selection, how to add elements to a selection, and how to reduce a selection to a specific subset of elements.

· Chapter 3: Events—This chapter discusses jQuery's event wrapper methods, how to attach event handlers that don't have built-in wrapper methods, how to remove event handlers, how to attach persistent event handlers, how to create custom events, and how to namespace your events for easier reference.

· Chapter 4: Manipulating Content and Attributes—You learn how to use the methods that jQuery exposes for working with content, text, and HTML, and element attributes. jQuery provides methods for doing just about everything you'll want to do to an element.

· Chapter 5: Iteration of Arrays and Objects—This is about how you can enumerate over a selection of elements or an array using jQuery. As with everything else, jQuery provides an easier way that requires fewer lines of code to loop over the contents of an array or a selection of elements from the DOM.

· Chapter 6: CSS—You learn about the methods that jQuery exposes for working with CSS properties and declarations. jQuery provides intuitive and versatile methods that enable you to manipulate CSS in a variety of ways.

· Chapter 7: AJAX—An elaboration on the methods that jQuery exposes for making AJAX requests from a server, which enable you to request server content without working directly with the XMLHttpRequest object and supports handling server responses in a variety of formats.

· Chapter 8: Animation and Easing Effects—This covers the methods jQuery provides for animating elements, including showing and hiding via a simple animation, fading in and fading out, sliding up and sliding down, using completely custom animation, and a variety of easing effects that you can use to control the flow of time in an animation.

· Chapter 9: Plugins—How to make your own jQuery plugins.

· Chapter 10: Scrollbars—An explanation of making containers scrollable, including getting and setting the scroll position.

· Chapter 11: HTML5 Drag and Drop—The official W3C drag-and drop API for dragging and dropping elements within a browser window. This API is considerably different from the Draggable and Droppable jQuery UI plugins because it enables drag and drop between completely different browser windows or applications. Also introduced is the W3C drag-and-drop file upload specification.

Part II: jQuery UI

· Chapter 12: Draggable and Droppable—You learn how to implement the Draggable and the Droppable jQuery UI plugins to create drag-and-drop API, an alternative to the HTML5 drag-and-drop API introduced in Chapter 11.

· Chapter 13: Sortable—How you can make lists sortable using drag-and-drop.

· Chapter 14: Selectable—Learn about the portion of the jQuery UI library that enables you to make a selection by drawing a box with your mouse, just like you might do in your OS's file management application.

· Chapter 15: Accordion—See how to make a polished-looking sidebar that has panes that transition like an accordion. When you mouse over an element, one pane collapses via an animation, and another one expands, also via an animation.

· Chapter 16: Datepicker—You make a standard form input field into a Datepicker using jQuery's Datepicker widget.

· Chapter 17: Dialog—You create virtual pop-up windows, using the jQuery UI library, that look and act like real pop-up windows but are entirely contained in the same web page that launches them and are built using pure markup, CSS, and JavaScript.

· Chapter 18: Tabs—The jQuery UI tab component, which enables you to take a document and split it into several tabs and navigate between those tabs without needing to load another page.

Part III: Popular Third-Party jQuery Plugins

· Chapter 19: Tablesorter—An introduction to a third-party jQuery plugin used for sorting HTML tables by one or more columns.

· Chapter 20: Creating an Interactive Slideshow—You set up a slideshow plugin, a more complicated example of creating a jQuery plugin, which you can then expand on.

· Chapter 21: Working with HTML5 Audio and Video—Covers the MediaElement plugin, which bridges audio and video support across desktop and mobile platforms for various popular media formats, such as H.264 and MP3 audio.

· Chapter 22: Creating a Simple WYSIWYG Editor—Discusses the contenteditable attribute and the various components needed to make a text editor inside the browser.

Part IV: Appendices

· Appendix A—This appendix contains the answers to chapter exercises.

· Appendix B–U—These appendices contain reference materials for jQuery and jQuery UI.

What You Need to Use This Book

To make use of the examples in this book, you need the following:

· Several Internet browsers to test your web pages

· Text-editing software or your favorite IDE

Designing content for websites requires reaching more than one type of audience. Some of your audience may use different operating systems or different browsers other than those you installed on your computer. This book focuses on the most popular browsers available at the time of this writing:

· Microsoft Internet Explorer 10 or newer for Windows

· Safari 7 or newer for Mac OS X

· Firefox 30 or newer for Mac OS X, Windows, or Linux

· Google Chrome 36 or newer for Mac OS X, Windows, or Linux

It is likely that some or most of the examples will work in older versions of these browsers, but that has not been tested.

Conventions

To help you get the most from the text and keep track of what's happening, you can find a number of conventions throughout the book.

WARNING Boxes such as this one hold important, not-to-be forgotten information that is directly relevant to the surrounding text.

NOTE Notes, tips, hints, tricks, and asides to the current discussion are offset and placed in italics like this.

As for styles in the text:

· We highlight with italics new terms and important words when we introduce them.

· We show keyboard strokes like this: Ctrl+A.

· We show URLs and code within the text like so: persistence.properties.

· We present code in the following way:

We use a monofont type with no highlighting for most code examples.