ebook img

Pro jQuery 2.0 PDF

1020 Pages·2013·39.561 MB·English
Save to my drive
Quick download
Download
Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.

Preview Pro jQuery 2.0

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. Contents at a Glance About the Author �������������������������������������������������������������������������������������������������������������xxix About the Technical Reviewer �����������������������������������������������������������������������������������������xxxi Acknowledgments ���������������������������������������������������������������������������������������������������������xxxiii ■ Chapter 1: Putting jQuery in Context ���������������������������������������������������������������������������������1 ■ Chapter 2: HTML Primer ��������������������������������������������������������������������������������������������������11 ■ Chapter 3: CSS Primer �����������������������������������������������������������������������������������������������������33 ■ Chapter 4: JavaScript Primer ������������������������������������������������������������������������������������������61 ■ Chapter 5: jQuery Basics �������������������������������������������������������������������������������������������������93 ■ Chapter 6: Managing the Element Selection �����������������������������������������������������������������117 ■ Chapter 7: Manipulating the DOM ���������������������������������������������������������������������������������145 ■ Chapter 8: Manipulating Elements ��������������������������������������������������������������������������������177 ■ Chapter 9: Working with Events ������������������������������������������������������������������������������������211 ■ Chapter 10: Using jQuery Effects �����������������������������������������������������������������������������������235 ■ Chapter 11: Refactoring the Example: Part I �����������������������������������������������������������������267 ■ Chapter 12: Using Data Templates ���������������������������������������������������������������������������������281 ■ Chapter 13: Working with Forms �����������������������������������������������������������������������������������309 ■ Chapter 14: Using Ajax: Part I ���������������������������������������������������������������������������������������351 ■ Chapter 15: Using Ajax: Part II ��������������������������������������������������������������������������������������381 ■ Chapter 16: Refactoring the Example: Part II ����������������������������������������������������������������411 v ■ Contents at a GlanCe ■ Chapter 17: Setting Up jQuery UI �����������������������������������������������������������������������������������449 ■ Chapter 18: Using the Button, Progress Bar, and Slider Widgets ����������������������������������457 ■ Chapter 19: Using the Autocomplete and Accordion Widgets ���������������������������������������491 ■ Chapter 20: Using the Tabs Widget ��������������������������������������������������������������������������������527 ■ Chapter 21: Using the Datepicker Widget ����������������������������������������������������������������������555 ■ Chapter 22: Using the Dialog and Spinner Widgets �������������������������������������������������������587 ■ Chapter 23: Using the Menu and Tooltip Widgets ����������������������������������������������������������621 ■ Chapter 24: Using the Drag-and-Drop Interactions �������������������������������������������������������653 ■ Chapter 25: Using the Other Interactions ����������������������������������������������������������������������683 ■ Chapter 26: Refactoring the Example: Part III ���������������������������������������������������������������709 ■ Chapter 27: Getting Started with jQuery Mobile ������������������������������������������������������������737 ■ Chapter 28: Pages, Themes & Layouts ��������������������������������������������������������������������������763 ■ Chapter 29: The Dialog & Popup Widgets ����������������������������������������������������������������������797 ■ Chapter 30: Buttons and Collapsible Blocks �����������������������������������������������������������������823 ■ Chapter 31: Using jQuery Mobile Forms ������������������������������������������������������������������������847 ■ Chapter 32: Using Lists and Panels �������������������������������������������������������������������������������879 ■ Chapter 33: Refactoring the Example: Part IV ���������������������������������������������������������������903 ■ Chapter 34: Using the jQuery Utility Methods����������������������������������������������������������������929 ■ Chapter 35: The jQuery UI Effects & CSS Framework ����������������������������������������������������945 ■ Chapter 36: Using Deferred Objects ������������������������������������������������������������������������������963 Index ���������������������������������������������������������������������������������������������������������������������������������995 vi Chapter 1 Putting jQuery in Context 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. jQuery goes beyond better. It makes DOM manipulation a pleasure and, on occasion, an actual joy. There is something 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. 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 code. • 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 Internet Explorer (IE) supports a feature in an odd way, for example; I just tell jQuery what I want, and it works around the implementation differences for me. • jQuery is open source. When I don’t understand how something works or I don’t quite get the result I expect, I can read through the JavaScript code and, if needed, make changes. 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. 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. 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 (UI) libraries built on top of 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. Understanding jQuery Plug-ins jQuery plug-ins extend the functionality of the basic library. Some plug-ins are so good and so widely used that I have covered them in this book. There are a lot of plug-ins available (although the quality can vary), so if you don’t like the plug-ins I describe in this book, you can be confident that an alternative approach is available. 1 Chapter 1 ■ putting jQuery in Context 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 (cascading style sheets) 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. 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 UI widgets are available in jQuery Mobile, but those that are supported are optimized for touch interaction and for presentation on smaller displays. Part 6: Advanced Features The final part of this book describes some jQuery and jQuery UI features not commonly used but which can be helpful in complex projects. These are advanced features that require a better understanding of HTML, CSS, and jQuery itself. When reading Chapter 36, a basic knowledge of asynchronous programming is very helpful. 2 Chapter 1 ■ putting jQuery in Context What’s New in This Edition? Since the first edition of this book, jQuery, jQuery UI, and jQuery Mobile have all undergone substantial changes. What’s New for Core jQuery? The API for the core jQuery library is remarkably stable. Some years ago, the jQuery team starting listing changes that they intended to make, and these were implemented with the release of jQuery version 1.9. Some of these changes are quite substantial and I have indicated the changes in each chapter throughout Part 2 of this book. The good news is that these changes are very rare and the API is likely to remain stable for several years. That’s not to say that new features won’t be added, but the code that you develop today will continue to work without modification for some time to come. The bad news is that the jQuery team did something unusual when they released jQuery 1.9—they also released jQuery 2.0, and thus they split development into two lines of parallel releases: jQuery 1.x and jQuery 2.x. Both release lines have the same API but jQuery 2.x doesn’t support versions 6, 7, and 8 of IE. The older versions of IE are notorious in their non-standard approach to HTML, CSS, and JavaScript, and removing all of the checks for odd behavior and the associated workarounds makes jQuery 2.x smaller and faster. ■ Tip at the time of this writing, the current versions of jQuery are 2.0.2 and 1.10.1. it is important to understand that jQuery 2.0.2 doesn’t supersede version 1.10.1. they are both the latest release and the only difference is that jQuery 1.10.1 preserves support for older versions of internet explorer. You should use jQuery 2.x if you are sure that none of your users will have Internet Explorer 6, 7, or 8. If that is not the case—or if you are not sure—then you should use jQuery 1.x. These versions of IE are still widely used, especially in large corporations, and you should think carefully about the effect of using the 2.x line. There are no legacy users in the idealized world of programming books, and I’ll be using the jQuery 2.0.2 library throughout most this book—but you can substitute any version of the jQuery 1.x line (from version 1.9 onward) and get the same result and preserve support for the old versions of IE. ■ Tip i use jQuery 1.x in part 4, when i describe jQuery Mobile. jQuery Mobile tends to lag behind the main jQuery release and, as i write this, only supports jQuery 1.x. What’s New for jQuery UI? jQuery UI has also been updated. The API for using the existing user interface widgets has been updated to be more consistent and to work more closely with the HTML elements that underpin them and some new widgets have been added. Throughout Part 3 of this book, you will find that I show the important changes at the start of each chapter, just as I did for the changes to jQuery itself in Part 2. What’s New for jQuery Mobile? jQuery Mobile has matured a lot since the previous edition of this book. The API has been normalized, new widgets have been added, and the overall developer experience is much more consistent with jQuery and jQuery UI. To reflect this maturity, I have completely rewritten Part 4 to bring it in line with the rest of the book. There are more examples, reference tables, and demonstrations of specific features. 3 Chapter 1 ■ putting jQuery in Context What Else Is New? From Chapter 12 onward, I use templates to generate HTML elements from data. This is an important technique and I use it liberally. The library that I used in the previous edition has reached the end of its life and I have chosen a replacement. The new library doesn’t come with direct integration into jQuery and so in Chapter 12, I provide a custom plug-in that makes using the template library I selected easy to use with jQuery. All of the examples that follow Chapter 12 have been revised to use the new library. I changed the toolset that I use for testing mobile applications, preferring to use a cloud-based testing service rather than maintaining my own emulators. I explain why I have done this in Chapter 27. 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 some chapters in order to fit everything in. The first example in every chapter is 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> <link rel="stylesheet" type="text/css" href="styles.css"/> <script src="jquery-2.0.2.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("img:odd").mouseenter(function (e) { $(this).css("opacity", 0.5); }).mouseout(function (e) { $(this).css("opacity", 1.0); }); }); </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"> <img src="aster.png"/><label for="aster">Aster:</label> <input name="aster" 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"> 4 Chapter 1 ■ putting jQuery in Context <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 is a complete HTML document, similar to the one shown in Listing 1-1. 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 only 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 listing because it starts and ends with ellipsis (...), as shown in Listing 1-2. Listing 1-2. A Partial Listing ... <script type="text/javascript"> jQuery(document).ready(function () { jQuery("img:odd").mouseenter(function(e) { jQuery(this).css("opacity", 0.5); }).mouseout(function(e) { jQuery(this).css("opacity", 1.0); }); }); </script> ... Listing 1-2 is a subsequent 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 I show has changed from the complete document shown at the start of the chapter. 5 Chapter 1 ■ putting jQuery in Context 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 the examples for all the chapters in this book in the Source Code/Download area of the Apress web site (www.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. 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 6

See more

The list of books you might like

Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.