Pro jQuery

989 Pages·2012·23.89 MB·English

by  Freeman, Adam

Freeman

US $39.99

Shelve in
Web Development/JavaScript

User level:
Intermediate–Advanced

www.apress.com

SOURCE CODE ONLINE

RELATED

BOOKS FOR PROFESSIONALS BY PROFESSIONALS®

Pro jQuery

Master web development with Pro jQuery. This book shows you how you can get the
most from jQuery and simplify website and application development. It details how
you can work less by working smarter and get your code to do more.
Author Adam Freeman starts you off with a basic example and then builds your
knowledge up to include each of the core features of jQuery. You’ll learn how jQuery
makes it possible to work with inline or remote data, how to create rich and responsive
interfaces for your web applications, as well as how to use jQuery Mobile. jQuery’s
features are given a no-nonsense, in-depth treatment and chapters contain examples
that demonstrate both the power and the subtlety of jQuery.

With Pro jQuery, you’ll:

• Understand the capabilities of jQuery and why it is special
• Use the core of jQuery to enrich HTML, including tables, forms, and data displays
• Use jQuery UI to create rich and fluid user experiences
• Use rich interactions such as drag and drop, sortable data, and touch sensitivity
• Use jQuery Mobile to create touch-enabled interfaces for mobile devices
and tablets
• Extend jQuery by creating custom plugins and widgets

This book is packed with the details you’ll need to be effective with jQuery. Turn to
Pro jQuery and learn the knowledge and skills that will help make you a true web
development master.

For your convenience Apress has placed some of the front
matter material after the index. Please use the Bookmarks
and Contents at a Glance links to access them.

Download from Wow! eBook <www.wowebook.com>

iv

Contents at a Glance

 About the Author.............................................................................................. xxviii
 About the Technical Reviewer ........................................................................... xxix
 Acknowledgments .............................................................................................. xxx
 Part 1: Getting Ready..............................................................................................1
 Chapter 1: Putting jQuery in Context ......................................................................3
 Chapter 2: HTML Primer........................................................................................13
 Chapter 3: CSS Primer ..........................................................................................37
 Chapter 4: JavaScript Primer ...............................................................................67
 Part 2: Working with jQuery .................................................................................97
 Chapter 5: jQuery Basics ......................................................................................99
 Chapter 6: Managing the Element Selection.......................................................123
 Chapter 7: Manipulating the DOM.......................................................................153
 Chapter 8: Manipulating Elements......................................................................187
 Chapter 9: Working with Events .........................................................................223
 Chapter 10: Using jQuery Effects ........................................................................247
 Chapter 11: Refactoring the Example: Part I ......................................................277
 Part 3: Working with Data and Ajax....................................................................291
 Chapter 12: Using Data Templates......................................................................293
 Chapter 13: Working with Forms........................................................................327
 Chapter 14: Using Ajax: Part I.............................................................................371
 Chapter 15: Using Ajax: Part II............................................................................399
 Chapter 16: Refactoring the Example: Part II .....................................................431
 Part 4: Using jQuery UI........................................................................................467

 CONTENTS

v

 Chapter 17: Setting Up jQuery UI ........................................................................469
 Chapter 18: Using the Button, Progress Bar, and Slider Widgets......................477
 Chapter 19: Using the Autocomplete and Accordion Widgets ............................513
 Chapter 20: Using the Tabs Widget.....................................................................549
 Chapter 21: Using the Datepicker Widget...........................................................587
 Chapter 22: Using the Dialog Widget ..................................................................621
 Chapter 23: Using the Drag & Drop Interactions.................................................641
 Chapter 24: Using the Other Interactions ...........................................................673
 Chapter 25: Refactoring the Example: Part III ....................................................699
 Part 5: Using jQuery Mobile................................................................................727
 Chapter 26: Getting Started with jQuery Mobile .................................................729
 Chapter 27: Pages and Navigation......................................................................761
 Chapter 28: Dialogs, Themes, and Layouts.........................................................791
 Chapter 29: Buttons and Collapsible Blocks.......................................................805
 Chapter 30: Using jQuery Mobile Forms .............................................................827
 Chapter 31: jQuery Mobile Lists..........................................................................853
 Chapter 32: Refactoring the Mobile Example: Part IV.........................................875
 Part 6: Advanced Features..................................................................................901
 Chapter 33: Using the jQuery Utility Methods.....................................................903
 Chapter 34: The jQuery UI Effects & CSS Framework .........................................921
 Chapter 35: Using Deferred Objects....................................................................939
 Index...................................................................................................................971

P A R T 1

Getting Ready

C H A P T E R 1

3

Putting jQuery in Context

At its heart, jQuery does something that sounds pretty dull: it lets you modify the contents of HTML
documents by manipulating the model that the browser creates when it processes the HTML (known as
DOM manipulation, as I’ll explain later). If you are reading this, you have probably already done some
DOM manipulation, either using another JavaScript library or even using the built-in API that most
modern web browsers support, and you have picked up this book because you want to do it in a better
way.
jQuery goes beyond better. It makes DOM manipulation a pleasure and, on occasion, an actual joy.
There is something so elegant and graceful about the way that jQuery works that transforms a task that
can be pure drudgery into something that is simple and easy, and once you start using jQuery, there is
no going back. Here are the top reasons that I use jQuery in my projects:

•
jQuery is expressive. I can do more work with much less code than when using the
browser DOM API.

•
jQuery methods apply to multiple elements. The DOM API approach of select-
iterate-modify is gone, meaning fewer for loops to iterate through elements and
fewer mistakes.

•
jQuery deals with implementation differences between browsers. I don’t have to
worry about whether IE supports a feature in an odd way, for example; I just tell
jQuery what I want, and it works around the implementation differences.

•
jQuery is open source. When I don’t understand how something works or I don’t
quite get the result I was expecting, I can read through the JavaScript code and, if
needed, make changes.

Not everything is perfect, of course, and there are one or two rough edges, which I’ll explain as I get
into the details. But even with the occasional flaw, I love working with jQuery, and I hope you will find it
equally compelling and enjoyable to use. To me, the genius of jQuery is that it takes something that is a
major grind in web development and makes it simple, quicker, and easier. I can’t ask for more than that.

Understanding jQuery UI and jQuery Mobile

In addition to the core jQuery library, I also cover jQuery UI and jQuery Mobile, which are user interface
libraries built on top of the jQuery. jQuery UI is a general-purpose UI toolkit intended to be used on any
device, and jQuery Mobile is designed for use with touch-enabled devices such as smartphones and
tablets.

CHAPTER 1  PUTTING JQUERY IN CONTEXT

4

Understanding jQuery Plugins

jQuery plugins extend the functionality of the basic library. There are some plugins that are so good and
so widely used that I have covered them in this book. There are a lot of plugins available (although the
quality can vary), so if you don’t like the plugins I describe in this book, you can be confident that an
alternative approach is available.

What Do I Need to Know?

Before reading this book, you should be familiar with the basics of web development, have an
understanding of how HTML and CSS work, and, ideally, have a working knowledge of JavaScript. If you
are a little hazy on some of these details, I provide refreshers for HTML, CSS, and JavaScript in Chapters
2, 3, and 4. You won’t find a comprehensive reference for HTML elements and CSS properties, though.
There just isn’t the space in a book about jQuery to cover HTML in its entirety. If you want a complete
reference for HTML and CSS, then I suggest another of my books: The Definitive Guide to HTML5, also
published by Apress.

What Is the Structure of This Book?

This book is split into six parts, each of which covers a set of related topics.

Part 1: Getting Ready

Part 1 of this book provides the information you need to get ready for the rest of the book. It includes this
chapter and primers/refreshers for HTML, CSS, and JavaScript. Later in this chapter, I’ll describe the
software that you will need in order to follow along.

Part 2: Working with jQuery

Part 2 of this book introduces you to the jQuery library, starting with a basic example and building up to
include each of the core features: element selection, DOM manipulation, events, and effects.

Part 3: Working with Data and Ajax

Part 3 of this book shows how jQuery makes it possible to work with inline or remote data. I show you
how you can generate HTML content from data, how you can validate data entered into web forms, and
how you can use jQuery to perform asynchronous operations, including Ajax.

Part 4: Using jQuery UI

jQuery UI is one of the two user interface libraries that I describe in this book. Built on, and integrated
with, the core jQuery library, jQuery UI allows you to create rich and responsive interfaces for your web
applications.

CHAPTER 1  PUTTING JQUERY IN CONTEXT

5

Part 5: Using jQuery Mobile

jQuery Mobile is the other user interface library that I cover in this book. jQuery Mobile is built on top of
jQuery and incorporates some basic feature from jQuery UI but has been optimized for creating
smartphone and tablet interfaces. Fewer user interface widgets are available in jQuery Mobile, but those
that are supported are optimized for touch interaction and for use presentation on smaller displays.

Part 6: Advanced Features

The final part of this book describes some jQuery and jQuery UI features that are not commonly used
but that can be helpful in complex projects. These are advanced features that require a better
understanding of HTML, CSS, and jQuery itself. In the case of Chapter 35, a basic knowledge of
asynchronous programming is very helpful.

Are There Lots of Examples?

There are loads of examples. One of the nice aspects of jQuery is that almost any task can be performed
in several different ways, allowing you to develop a personal jQuery style. To show the different
approaches you can take, I have included a lot of different examples—so many, in fact, that I include the
complete HTML document you are working with only once in each chapter in order to fit everything in.
The first example in every chapter will be a complete HTML document, as shown in Listing 1-1, for
example.

Listing 1-1. A Complete Example Document

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-1.7.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script type="text/javascript">
$(document).ready(function() {

var labelElems = document.getElementsByTagName("label");
var jq = $('img[src*=daffodil]');

$('img:even').add('img[src*=primula]').add(jq)
.add(labelElems).css("border", "thick double red");

});
</script>
</head>
<body>
<h1>Jacqui's Flower Shop</h1>
<form method="post">
<div id="oblock">
<div class="dtable">
<div id="row1" class="drow">
<div class="dcell">

CHAPTER 1  PUTTING JQUERY IN CONTEXT

6

<img src="astor.png"/><label for="astor">Astor:</label>
<input name="astor" value="0" required>
</div>
<div class="dcell">
<img src="daffodil.png"/><label for="daffodil">Daffodil:</label>
<input name="daffodil" value="0" required >
</div>
<div class="dcell">
<img src="rose.png"/><label for="rose">Rose:</label>
<input name="rose" value="0" required>
</div>
</div>
<div id="row2"class="drow">
<div class="dcell">
<img src="peony.png"/><label for="peony">Peony:</label>
<input name="peony" value="0" required>
</div>
<div class="dcell">
<img src="primula.png"/><label for="primula">Primula:</label>
<input name="primula" value="0" required>
</div>
<div class="dcell">
<img src="snowdrop.png"/><label for="snowdrop">Snowdrop:</label>
<input name="snowdrop" value="0" required>
</div>
</div>
</div>
</div>
<div id="buttonDiv"><button type="submit">Place Order</button></div>
</form>
</body>
</html>

This listing is taken from Chapter 5. Don’t worry about what it does; just be aware that the first
example in each chapter will be a complete HTML document, similar to the one shown in the listing.
Almost all of the examples are based around the same basic HTML document, which displays a simple
flower shop. It isn’t the most exciting example, but it is self-contained and includes all of the things we
are interested in when working with jQuery.
For the second and subsequent examples, I just show you the elements that change. This is
generally just the script element, which is where your jQuery code lives. You can spot a partial the
listing because it starts and ends with ellipsis (...), as shown in Listing 1-2.

CHAPTER 1  PUTTING JQUERY IN CONTEXT

7

Listing 1-2. A Partial Listing

...
<script type="text/javascript">
$(document).ready(function() {

var jq = $('label');

// select and operate on the first element
jq.first().css("border", "thick double red");

// select and operate on the last element
jq.last().css("border", "thick double green");

// select and operate on an element by index
jq.eq(2).css("border", "thick double black");
jq.eq(-2).css("border", "thick double black");

});
</script>
...

This is the second listing from Chapter 5. You can see that just the script element appears, and I
have highlighted a number of statements. This is how I draw your attention to the part of the example
that shows the jQuery feature I am using. In a partial listing like this, only the element that is shown has
changed from the complete document shown at the start of the chapter.
I have kept the examples in this book very focused on individual features. This is to give you the best
coverage of how jQuery operates. But in doing this, you can lose sight of how different features fit
together, so at the end of each part of the book, there is a short chapter in which I refactor the example
document to incorporate all of the topics in the previous chapters and present a joined-up view of
what’s possible.

Where Can I Get the Example Code?

You can download all of the examples for all of the chapters in this book from Apress.com. The
download is available without charge and includes all of the supporting resources that are required to
re-create the examples without having to type them in (including images, JavaScript libraries, and CSS
style sheets). You don’t have to download the code, but it is the easiest way of experimenting with the
examples and cutting and pasting techniques into your own projects.

 Tip Even though I list just the changes in a lot of the code listings in the chapters, each example in the source
code download is a complete HTML document that you can load directly into your browser.

CHAPTER 1  PUTTING JQUERY IN CONTEXT

8

What Software Do I Need for This Book?

To follow the examples in this book, you will need various pieces of software, as described in the
following sections.

Getting jQuery

The very first thing you need is the jQuery library, which is available from http://jquery.com. There is a
download button right on the front page of the web site and an option to choose either the production or
development release, as shown in Figure 1-1.

Figure 1-1. Downloading the jQuery library

You’ll be using the development version for this book. I explain the difference between these
versions and show you how to use the jQuery library in Chapter 5.

 Tip I tell you how to obtain and install the jQuery UI and jQuery Mobile libraries in Chapters 17 and 26,
respectively.

CHAPTER 1  PUTTING JQUERY IN CONTEXT

9

Getting an HTML Editor

One of the most important tools for web development is an editor with which you can create HTML
documents. HTML is just text, so you can use a very basic editor, but there are some dedicated packages
available that make the development smoother and simpler, and many of them are available without
charge.
I tend to use Komodo Edit from Active State. It is free, it is simple, and it has pretty good support for
HTML, JavaScript, and jQuery. I have no affiliation with Active State, other than I use its software. You
can get Komodo Edit from http://activestate.com, and there are versions for Windows, Mac, and
Linux.
As an alternative, JsFiddle is a popular online editor that provides support for working with jQuery. I
don’t get on with it (it is structured in a way that conflicts with my development habits), but it does seem
pretty flexible and powerful. It is free to use and is available at http://jsfiddle.net.

Getting a Web Browser

You need a web browser to view your HTML documents and test your jQuery and JavaScript code. I like
Google Chrome: I find it quick, I like the simple UI, and the developer tools are pretty good. Whenever
you see a screenshot in this book (which is often), it will be Google Chrome that you see.
That said, you don’t have to use the same browser I do, but I do recommend you pick one with good
developer tools. Mozilla Firefox has some excellent JavaScript tools available through the Firebug
extension, which you can get at http://getfirebug.com.
If you don’t like Chrome or Firefox, then your next best bet is Internet Explorer. A lot of web
programmers have issues with IE, but version 9 is pretty good in my experience, and IE10 (which is in
beta as I write this) looks very promising. The developer tools are not as comprehensive as with Chrome
or Firefox, but they are entirely adequate for the purposes of this book.

Getting a Web Server

If you want to re-create the examples in this book, you will need a web server so that the browser has
somewhere from which to load the example HTML document and related resources (such as images and
JavaScript files). A lot of web servers are available, and most of them are open source and free of charge.
It doesn’t matter which web server you use. I have used Microsoft’s IIS 7.5 in this book, but that’s just
because I have a Windows Server machine already set up and ready to go.

Getting Node.js

Starting in Part 3, you’ll start using Node.js in addition to a regular web server. Node.js is very popular at
the moment, but I have used it for the simple reason that it is based on JavaScript, so you don’t have to
deal with a separate web application framework. You won’t be digging into any detail at all about
Node.js, and I’ll be treating it as a black box (although I do show you the server scripts so you can see
what’s happening on the server if you are interested).
You can download Node.js from http://nodejs.org. There is a precompiled binary for Windows
and source code that you can build for other platforms. In this book, I am using version 0.5.9, which is
likely to be superseded by the time you read this, but the server scripts should still work without any
problems.

Download from Wow! eBook <www.wowebook.com>

CHAPTER 1  PUTTING JQUERY IN CONTEXT

10

Setting Up and Testing Node.js

The simplest way to test Node.js is with a simple script. Save the contents of Listing 1-3 to a file called
NodeTest.js. I have done this in the same directory as my Node.js binary.

Listing 1-3. A Node.js Test Script

var http = require('http');
var url = require('url');

http.createServer(function (req, res) {
console.log("Request: " + req.method + " to " + req.url);

res.writeHead(200, "OK");
res.write("<h1>Hello</h1>Node.js is working");
res.end();

}).listen(80);
console.log("Ready on port 80");

This is a simple test script that returns a fragment of HTML when it receives an HTTP GET request.

 Tip Don’t worry if that last sentence didn’t make complete sense. You don’t need to know how HTTP and web
servers work to use jQuery, and I provide a crash course in HTML in Chapter 2.

To test Node.js, run the binary specifying the file you just created as an argument. For my Windows
installation, I typed the following at the console prompt:

node NodeTest.js

To make sure everything is working, navigate to port 80 on the machine that is running Node.js. You
should see something very similar to Figure 1-2, indicating that everything is as expected.

CHAPTER 1  PUTTING JQUERY IN CONTEXT

11

Figure 1-2. Testing Node.js

I run Node.js on a different machine to the regular web server, which means that using port 80
doesn’t cause me any problems. If you have only one machine available, run the web server on port 80
and change the Node.js script to use another port. I have highlighted the part of the test script in
Listing 1-3 that specifies which port is used.

Image Attribution

Throughout this book, I use a set of images in the examples. Thanks to the following people for kind
permission to use their photographs: Horia Varlan, David Short, Geishaboy500, Tanaka Juuyoh, Mervi
Eskelinen, Fancy Speed Queen, Alan “craigie3000” Craigie, and melalouise.

Summary

In this chapter, I outlined the content and structure of this book and set out the software that is required
for jQuery web development, all of which can be obtained free of charge. The next three chapters refresh
your basic skills in HTML, CSS, and JavaScript. If you are familiar with these topics, then skip to
Chapter 5 where I introduce jQuery.

C H A P T E R 2

13

HTML Primer

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’ll rely on in later chapters.
The latest version of HTML, which is known as HTML5, is a topic in its own right. HTML5 has more
than 100 elements, and each of them has its own purpose and functionality. That said, you need only a
basic knowledge of HTML to understand how jQuery works, but if you want to learn about the details of
HTML, then I suggest another of my books: The Definitive Guide to HTML5, also published by Apress.

Introducing a Basic HTML Document

The best place to start is to look at an HTML document. From this, you can see the basic structure and
hierarchy that all HTML documents follow. Listing 2-1 shows a simple HTML document. I’ll use this
document throughout this chapter to introduce the core concepts of HTML.

Listing 2-1. A Simple HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-1.7.js" type="text/javascript"></script>
<style>
h1 {
width: 700px; border: thick double black; margin-left: auto;
margin-right: auto; text-align: center; font-size: x-large; padding: .5em;
color: darkgreen; background-image: url("border.png");
background-size: contain; margin-top: 0;
}
.dtable {display: table;}
.drow {display: table-row;}
.dcell {display: table-cell; padding: 10px;}
.dcell > * {vertical-align: middle}
input {width: 2em; text-align: right; border: thin solid black; padding: 2px;}
label {width: 5em; padding-left: .5em;display: inline-block;}
#buttonDiv {text-align: center;}