Pro jQuery 2.0

At its heart, jQuery does something that sounds dull: it lets you modify the contents of web pages by manipulating the model that the browser creates when it processes the HTML, a process known as

DOM (Document Object Model) manipulation

, which I describe in detail later. If you have picked up this book, then you have probably already done some DOM manipulation, using either another JavaScript library or the built-in web browser API (application programming interface), and now you want to do it in a better way.

We are going to spend a lot of time in this book working on HTML documents. In this chapter, I set out the information you’ll need to understand what we are doing later in the book. This isn’t an HTML tutorial but rather a summary of the key characteristics of HTML that I rely on in later chapters.

Cascading Style Sheets (CSS) are the means by which you control the appearance (more properly known as

presentation

) of HTML elements. CSS has a special significance for jQuery for two reasons. The first is that you can use

CSS selectors

(which I describe in this chapter) to tell jQuery how to find elements in an HTML document. The second reason is that one of the most common tasks that jQuery is used for is to change the CSS styles that are applied to elements.

jQuery is a JavaScript library that you add to your HTML documents and that is executed by a browser. You employ the features of the jQuery library by adding your own code to the document as well – and this requires a basic understanding of how to write JavaScript. In this chapter, I provide a primer for the JavaScript language, focusing on the features that are most pertinent when working with jQuery.

In this chapter, I will introduce you to your first jQuery script. The script is simple, but it demonstrates many of the most important characteristics of jQuery, including how you select elements in the document, how such selections are presented to you, and the nature of the relationship between jQuery and the built-in DOM API that is part of the HTML specification.

Most of the time, the use of jQuery follows a distinctive two-step pattern. The first step is to select some elements, and the second step is to perform one or more operations on those elements. In this chapter, I focus on the first step, showing you how to take control of the jQuery selection and tailor it to your exact needs. I’ll also show you how to use jQuery to navigate the DOM. In both cases, you start with one selection and perform operations on it until it contains just the elements you require. As you’ll see, the correlation between the elements you start with and those you finish with can be as simple or as sophisticated as you like.

In the previous chapter, I showed you how to select elements. One of the most powerful things you can do with the selection is to change the structure of the HTML document itself, known as

manipulating the DOM

. In this chapter, I’ll show you the different ways in which you can alter the structure, including inserting elements as children, parents, or siblings of other elements. I’ll also show you how to create new elements, how to move elements from one part of the document to another, and how to remove elements entirely.

In this chapter, I show you how to use jQuery manipulate elements, including how to get and set attributes, how to use the jQuery convenience methods for working with classes and CSS properties, and how to get and set HTML and text content. I also show you a nice feature that allows you to associate data with elements.

In this chapter, I describe the jQuery support for events. If you are unfamiliar with events, then I provided a brief overview of how they work and how they are propagated through the DOM (Domain Object Model) in Chapter 2. jQuery provides some useful event-related features, of which my favorite is the ability to automatically associate event handler functions with elements as they are added to the DOM.

For the most part, jQuery UI contains the user interface (UI) functionality associated with jQuery, but the core library includes some basic effects and animations, and these are the topic of this chapter. Although I describe them as basic, they can be used to achieve some pretty sophisticated effects. The main focus is on animating the visibility of elements, but you can use these features to animate a range of CSS properties in a number of ways.

In the previous chapters, I showed you each functional area in isolation: how to deal with events, how to manipulate the DOM (Domain Object Model), and so on. The real power and flexibility of jQuery arise when you combine these features, and in this chapter, I am going to demonstrate the combination by refactoring the flower shop example document.

In the previous edition of this book, I introduced data templates using the

jQuery Templates

plug-in. This history of this plug-in was rather odd. Microsoft and the jQuery team announced that three plug-ins developed by Microsoft had been accepted as “official” plug-ins, a status that had not been accorded to any other plug-in. A while later, the jQuery team announced that the plug-ins were deprecated, that the official status was removed, and that there were plans to replace them with other functionality. A replacement for the template plug-in would be created as part of jQuery UI (which I describe in Part IV of this book).

In this chapter, I will show you the jQuery support for working with HTML forms. In part, I will recap the form-related events and the jQuery methods you can use to manage them, but most of this chapter is dedicated to a plug-in that provides a great mechanism for validating the values that users enter into a form before it is submitted to a server. If you have written any kind of form-based web application, you will have realized that users will enter all sorts of data into a form, so validation is an important process.

Ajax

stands for Asynchronous JavaScript and XML but is generally a word in its own right these days. Ajax allows you to make requests to the server asynchronously, meaning, in short, that your request happens in the background and doesn’t prevent the user from interacting with the content in your HTML document. The most common use for Ajax is to submit data from a

form

element. The advantage of doing this is that the browser doesn’t have to load a new document to display the server’s response and you can use the standard jQuery functions to display the data within the document seamlessly.

In this chapter, I show you how to use the low-level jQuery Ajax API (application programming interface). The term

low level

implies rooting around in the guts of the request, but that really isn’t the case. The methods I describe in this chapter are not as convenient as those in Chapter 14, but with a little more effort you can configure the fine detail of the request when the configuration used by the shorthand and convenience methods doesn’t quite do the job.

I introduced some rich features in this part of the book, and as I did in before in Chapter 11, I want to bring them together to give a broader view of jQuery.

Downloading and installing jQuery UI is more complicated than for other JavaScript libraries. It is not burdensome, but it requires some explanation, which I provide in this chapter. You only need to get set up for development for this book, but I have also included details of how to install the minimized files that are suitable for production deployment and how to use jQuery UI through a content distribution network (CDN).

Now that you have configured, downloaded, and installed jQuery UI, you can start to look at the widgets it contains. These are the major functional blocks of jQuery UI, and although there are other features (such as effects, which I describe in Chapter 35), jQuery UI is known for the widgets..

In this chapter, I describe the jQuery UI autocomplete and accordion widgets. They are more complex than the widgets I showed you in Chapter 18, but they follow the same pattern of settings, methods, and events. These are highly configurable, flexible, and clever user interface controls, and used wisely they can significantly enhance the appearance and usability of your documents and web applications.

The tabs widget is superficially similar to the accordion that I described in Chapter 19 but offers more functionality and opportunities for customization. In common with the earlier widget chapters, I start with details of how to create the widget and then show you the settings, methods, and events that the widgets support. I finish this chapter with an example of how you can use the tabs widget to present forms to users in sections, which is a useful technique for dealing with long forms that require a lot of data input.

This chapter focuses on the jQuery UI datepicker widget, which provides a convenient mechanism for helping users select dates. Getting date information from users is notoriously problematic because of the wide range of formats in which dates can be expressed. The datepicker widget can make it easier for the user to select a date in a way that is more consistent and less prone to errors and using a regular text

input

element.

In this chapter, I describe the jQuery UI dialog and spinner widgets.

Table 22-1

provides the summary for this chapter.

In this chapter, I describe the jQuery UI menu and tooltip widgets.

Table 23-1

provides the summary for this chapter.

In addition to the widgets I showed you in

Chapters 18

–

23

, jQuery UI includes a set of

interactions

. These are lower-level building blocks that allow you to add functionality to your web application interface. In this chapter, I describe the

draggable

and

droppable

interactions, which you can use to add drag and drop to an HTML document.

In this chapter, I describe the three remaining jQuery UI interactions:

sortable

,

selectable

, and

resizable

. These interactions are less used (and less useful) than

draggable

and

droppable

, which I described in Chapter 24. The interactions in this chapter can be useful, but they use models that are hard to highlight to the user. Because of that, they perform best as supplements to other, more conventional, approaches.

In this part of the book, I introduced you to the jQuery UI widgets and interactions. These allow you to create rich web applications that are consistently themed and that can be endlessly configured and tweaked to meet your needs. In this chapter, I’ll add some of these features to the example to demonstrate how they can fit together.

In this chapter, I show you how to obtain jQuery Mobile and add it to an HTML document. I also explain that jQuery Mobile takes a different approach to creating widgets and how you must adapt to accommodate this approach. Touch-enabled devices provide some unique challenges for web application developers, and I explain some of the core features that jQuery Mobile provides to help simplify the process and set out some general guidance for the development and testing of mobile web apps.

In this chapter, I describe one of the key building blocks for jQuery Mobile applications:

pages

. I touched on pages in Chapter 27, but now I’ll go into the detail and show how to define, configure, and navigate between pages. I'll also show you two useful jQuery Mobile features for styling and structuring the content in pages: themes and grid layouts.

In this chapter, I introduce the first two jQuery Mobile widgets: the dialog and popup. jQuery Mobile widgets behave slightly differently from those in jQuery UI, but – as you'll learn – there is a common approach that underpins both libraries.

In this chapter, I describe two additional jQuery Mobile widgets:

buttons

and

collapsible blocks

. The jQuery Mobile button widget works in a similar way to the jQuery UI buttons you saw earlier in the book, with the exception that you can create and use simple buttons without using any custom JavaScript code at all, relying instead on

data

attributes.

There are particular difficulties when presenting a form on a mobile device. There is little enough screen real estate available to start with, and you need to give the user form elements that are easy to manipulate by touch without creating a page that requires endless scrolling to complete. In this chapter, I show you how jQuery Mobile enhances form elements so that they are consistent with other widgets and can be readily used on a touch screen.

In this chapter, I describe the jQuery Mobile list and panel widgets. Lists are an important tool in building mobile web applications, and they often provide simple and obvious navigation around the different functional areas of a web application. The beauty of lists is that they are compact, even when the individual list items are large enough to be selected by touch. They are also extremely well understood by users. Simply placing an arrow icon at the right edge of a list item (which jQuery Mobile does by default) makes it clear to most users that selecting the item will cause some kind of selection or navigation to occur.

In prior chapters in this part of the book, I introduced you to jQuery Mobile. In this chapter, I’ll build a more complete example that uses the jQuery Mobile functionality. By its nature, jQuery Mobile is a lot simpler than jQuery UI, and there are a lot fewer design choices available. Your development efforts with jQuery Mobile are further constrained by the unique issues that face mobile device development.

jQuery includes a number of utility methods that perform advanced operations on jQuery objects or which supplement the JavaScript language to provide features that are usually present in programing languages. You may never need any of these methods, but they are used internally by jQuery, and making them publicly available means that you can save time and effort when you come across an odd problem that the jQuery team has already solved.

In this chapter I describe two utility features that jQuery UI provides. The first is a set of enhancements to existing jQuery methods that can animate colors, changes in element visibility, and the application of CSS classes. The other feature is a set of CSS classes that to apply a jQuery UI theme to the rest of our HTML documents in order to create a consistent look across an entire web application.

Throughout this book, you have seen examples that relied on

callbacks

– you provide a function that is executed when something occurs. A good example is the way events are handled, using a method such as

click

, passing in a function as an argument. The code statements in the function are not performed until the user triggers the event – until that point our function is dormant.