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 <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 <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. [...]... change the values for CSS properties (Chapter 3 provides a primer in CSS if you need it.) The DOM API support for CSS is pretty comprehensive, but the simplest way of doing this is to use the style property, which is defined by the HTMLElement object The object returned by the style property defines properties that correspond to CSS properties (I realize that there are a lot of properties in this sentence,... 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 8 CHAPTER 1  PUTTING JQUERY IN CONTEXT Getting an HTML Editor One... of the tagName and src properties for each object to the console The output written to the console is as follows: Element: Element: Element: Element: Element: Element: IMG IMG IMG IMG IMG IMG http://www.jacquisflowershop.com /jquery/ astor.png http://www.jacquisflowershop.com /jquery/ daffodil.png http://www.jacquisflowershop.com /jquery/ rose.png http://www.jacquisflowershop.com /jquery/ peony.png http://www.jacquisflowershop.com /jquery/ primula.png... PUTTING JQUERY IN CONTEXT 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... types, including the properties shown in Table 2-3 Table 2-3 Basic HTMLElement Properties Property Description Returns className Gets or sets the list of classes to which the element belongs string id Gets or sets the value of the id attribute string lang Gets or sets the value of the lang attribute string tagName Returns the tag name (indicating the element type) string Many more properties are available... before the rest of the document has been loaded and processed This presents a problem when you are working with the DOM because it means your searches for elements via the Document object are performed before the objects you are interested in have been created in the model To avoid this, I have placed the script element at the end of the document jQuery provides a nice way of dealing with this issue, as... class="info">(closed on national holidays) This example has two script elements The first imports the jQuery library to the document, and the second is a simple script that uses some basic jQuery functionality Don’t worry about what the second script does for the moment We’ll get into jQuery properly starting in Chapter 5 The script element can appear in the head or body element in an HTML document... focus on using jQuery to access the DOM, but in this section I will show you some of the built-in support, in part, to demonstrate how much more elegant the jQuery approach can be 28 CHAPTER 2  HTML PRIMER Using the DOM The JavaScript object that defines the basic functionality that is available in the DOM for all types of elements is called HTMLElement The HTMLElement object defines properties and... 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... covering jQuery in depth The example document contains one script element, which is shown in Listing 2-7 Listing 2-7 The script Element from the Example Document When you define the src attribute for the script element, you are telling the browser that you want to load the JavaScript contained in another file In this case, this is the main jQuery . 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. 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,