Beginning JavaScript ® and CSS Development with jQuery Richard York 27794ffirs.indd 5 3/16/09 3:14:20 PM Beginning JavaScript ® and CSS Development with jQuery Published by Wiley Publishing, Inc. 10475 Crosspoint Boulevard Indianapolis, IN 46256 www.wiley.com Copyright © 2009 by Wiley Publishing, Inc., Indianapolis, Indiana Published simultaneously in Canada ISBN: 978-0-470-22779-4 Manufactured in the United States of America 10 9 8 7 6 5 4 3 2 1 Library of Congress Cataloging-in-Publication Data York, Richard. Beginning JavaScript and CSS development with jQuery / Richard York. p. cm. Includes index. ISBN 978-0-470-22779-4 (paper/website) 1. JavaScript (Computer program language) 2. Web sites Design. 3. Cascading style sheets. I. Title. QA76.73.J38Y67 2009 006.7’6 dc22 2009005636 No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions . Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No warranty may be created or extended by sales or pro- motional materials. The advice and strategies contained herein may not be suitable for every situation. This work is sold with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional services. If professional assistance is required, the services of a competent professional person should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact that an organization or Web site is referred to in this work as a citation and/or a potential source of further information does not mean that the author or the publisher endorses the information the organization or Web site may provide or recommendations it may make. Further, readers should be aware that Internet Web sites listed in this work may have changed or disappeared between when this work was written and when it is read. For general information on our other products and services please contact our Customer Care Department within the United States at (877) 762-2974, outside the United States at (317) 572-3993 or fax (317) 572-4002. Trademarks: Wiley, the Wiley logo, Wrox, the Wrox logo, Programmer to Programmer, and related trade dress are trade- marks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries, and may not be used without written permission. JavaScript is a registered trademark of Sun Microsystems, Inc. All other trademarks are the property of their respective owners. Wiley Publishing, Inc., is not associated with any product or vendor mentioned in this book. Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books. 27794ffirs.indd 6 3/16/09 3:14:20 PM Contents Introduction xix Part I: jQuery API 1 Chapter 1: Introduction to jQuery 3 What Does jQuery Do for Me? 4 Who Develops jQuery? 5 Obtaining jQuery 5 Installing jQuery 5 Programming Conventions 8 XHTML and CSS Conventions 9 JavaScript Conventions 16 Summary 25 Chapter 2: Selecting and Filtering 27 The Origin of the Selectors API 28 Using the Selectors API 29 Filtering a Selection 37 Searching within a Selection with find() 38 Finding an Element’s Siblings with siblings() 39 Selecting Specific Siblings 42 Searching Ancestors Using the parents() and parent() Methods 46 Selecting Children Elements 48 Selecting Elements via What You Don’t Want 50 Selecting a Snippet of the Results 51 Adding More Elements to a Selection 53 Selecting One Specific Element from a Result Set 55 Summary 66 Exercises 66 Chapter 3: Events 69 Assigning an Event with the Traditional Event Model 69 Assigning Events with the W3C Event Model 72 The this Object 73 The event Object 75 xii Contents The Microsoft JScript Event Model 77 Creating a Universal Event API 78 Binding Events with jQuery’s bind() Method 80 Binding Events with jQuery’s Event Methods 82 Triggering Events 83 Summary 93 Exercises 93 Chapter 4: Manipulating Content and Attributes 95 Setting and Accessing Attributes 95 Manipulating Class Names 105 Manipulating HTML and Text Content 109 Getting, Setting, and Removing Content 110 Appending and Prepending Content 115 Inserting Beside Content 123 Inserting Beside Content via a Selection 125 Wrapping Content 129 Replacing Elements 146 Removing Content 150 Cloning Content 154 Summary 162 Exercises 163 Chapter 5: Arrays and Iteration 165 Basic Iteration 165 Calling each() Directly 167 Variable Scope 168 Emulating break and continue 170 Iterating a Selection 172 Filtering Selections and Arrays 173 Filtering a Selection 174 Filtering a Selection with a Callback Function 175 Filtering an Array 177 Mapping a Selection or an Array 180 Mapping a Selection 180 Mapping an Array 183 Array Utility Methods 196 Making an Array 197 Finding a Value within an Array 197 xiii Contents Merging Two Arrays 198 Removing Duplicate Items 199 Summary 204 Exercises 205 Chapter 6: CSS 207 The css() Method 207 The outerWidth() and outerHeight() Methods 208 Summary 217 Exercises 217 Chapter 7: AJAX 219 Making a Server Request 220 What’s the Difference between GET and POST? 220 Formats Used to Transport Data with an AJAX Request 221 Making a GET Request with jQuery 222 Loading HTML Snippets from the Server 240 Dynamically Loading JavaScript 265 AJAX Events 267 Making an AJAX-Style File Upload 272 Summary 275 Exercises 276 Chapter 8: Effects 277 Showing and Hiding Elements 277 Sliding Elements 279 Fading Elements 280 Custom Animation 281 Summary 283 Exercises 284 Chapter 9: Plugins 285 Writing a Plugin 285 Good Practice for jQuery Plugin Development 295 Summary 296 Exercises 296 xiv Contents Part II: jQuery UI 297 Chapter 10: Implementing Drag-and-Drop 299 Making Elements Draggable 300 Making Elements Draggable with Ghosting 308 Dragging between Windows in Safari 311 Delegating Drop Zones for Dragged Elements 314 Summary 326 Exercises 326 Chapter 11: Drag-and-Drop Sorting 327 Making a List Sortable 327 Customizing Sortables 338 Saving the State of Sorted Lists 347 Summary 353 Exercises 354 Chapter 12: Selection by Drawing a Box 355 Introducing the Selectables Plugin 355 Summary 372 Exercises 372 Chapter 13: Accordion UI 373 Building an Accordion UI 373 Setting Auto-Height 376 Changing the Default Pane 377 Toggling the alwaysOpen Option 380 Changing the Accordion Event 380 Filling the Height of the Parent Element 381 Setting the Header Elements 381 Styling Selected Panes 384 Selecting a Content Pane by Location 387 Summary 390 Exercises 391 xv Contents Chapter 14: Datepicker 393 Implementing a Datepicker 393 Styling the Datepicker 395 Setting the Range of Allowed Dates 403 Allowing a Date Range to Be Selected 404 Localizing the Datepicker 405 Setting the Date Format 405 Localizing Datepicker Text 406 Changing the Starting Weekday 407 Summary 408 Exercises 408 Chapter 15: Dialogs 409 Implementing a Dialog 409 Examining a Dialog’s Markup 411 Making a Modal Dialog 417 Auto-Opening the Dialog 419 Controlling Dynamic Interaction 420 Animating the Dialog 421 Working with Dialog Events 422 Summary 423 Exercises 424 Chapter 16: Tabs 425 Implementing Tabs 425 Loading Remote Content via AJAX 432 Animating Tab Transitions 436 Summary 437 What Next? 437 Exercises 438 Appendix A: Answers to Exercises 439 Chapter 2 439 Chapter 3 439 Chapter 4 440 Chapter 5 441 xvi Contents Chapter 6 441 Chapter 7 442 Chapter 8 442 Chapter 9 443 Chapter 10 443 Chapter 11 444 Chapter 12 444 Chapter 13 444 Chapter 14 445 Chapter 15 445 Chapter 16 445 Appendix B: Selectors Supported by jQuery 447 Appendix C: Selecting and Filtering 451 Appendix D: Events 453 Event Object Normalization 455 Appendix E: Manipulating Attributes and Data Caching 457 Appendix F: Manipulating Content 459 Appendix G: AJAX Methods 461 Appendix H: CSS 465 Appendix I: Utilities 467 Appendix J: Draggables and Droppables 469 Appendix K: Sortables 475 Appendix L: Selectables 479 Notes 480 Appendix M: Effects 481 Speed 481 Callback Function 481 xvii Contents Appendix N: Accordion 485 Appendix O: Datepicker 487 Appendix P: Dialog 497 Appendix Q: Tabs 501 Appendix R: Re-Sizables 505 Appendix S: Sliders 509 Index 511 Introduction The jQuery JavaScript framework is a rising star in the world of web development. JavaScript frame- works in general have grown to become immensely popular in the past few years in parallel with the ever-increasing presence of JavaScript-driven, so-called Web 2.0 websites that make heavy use of tech- nologies like AJAX and JavaScript in general for slick graphical enhancements that would be impossible or much more cumbersome to incorporate without JavaScript. jQuery’s mission as a JavaScript library is simple — it strives to make the lives of web developers eas- ier by patching over certain portions of cross-browser development and by making other tasks com- monly needed by developers much easier. jQuery has the real, proven ability to reduce many lines of plain-vanilla JavaScript to just a few lines, and, in many cases, just a single line. jQuery strives to remove barriers to JavaScript development by removing redundancy wherever possible and normal- izing 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 like getting the mouse cursor’s position when an event has taken place. jQuery is a compact, lightweight library that currently works in Microsoft’s Internet Explorer browser from version 6 on, Firefox from version 1.5 on, Safari from version 2.0.2 on, Opera from version 9 on, and Google’s new Chrome browser from version 0.2 on. Getting started with jQuery is very easy — all you have to do is include a single link of markup in your HTML or XHTML documents that includes the library. Throughout this book, I demonstrate jQuery’s API (Application Programming Interface) components in detail and show you how all the nuts and bolts of this framework come together to enable you to rapidly develop client-side applications. I also cover the jQuery UI library, which makes redundant user-interface (UI) tasks on the client side ridiculously easy and accessible to everyday web developers who might not have much JavaScript pro- gramming expertise. Have you ever wanted to create an animated accordion effect like the one found on Apple’s Mac home page at www.apple.com/mac ? With jQuery, not only can you create this effect with your own look and feel, but also it’s dead simple to boot. Have you ever wondered how websites make virtual pop-up windows using JavaScript, HTML, and CSS? The jQuery UI library provides the ability to create these pop-up windows and includes the ability to animate transitions like fading the window on and off, or having it re-size from very small to full sized. The jQuery UI library gives you the ability to use animations and transitions using JavaScript, markup, and CSS that you may have thought previously could only have been done with Adobe’s Flash player. The jQuery framework itself has enjoyed a great deal of mainstream exposure. It has been used by Google, Dell, Digg, NBC, CBS, Netflix, The Mozilla Foundation, and the popular WordPress and Drupal PHP frameworks. jQuery is fast — superfast — and it has a small footprint. It’s only 15 KB, using the compressed and gzipped version. 27794flast.indd 19 3/16/09 11:33:36 AM [...]... 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, I recommend doing so with a beginning JavaScript book on hand as well Specifically, I recommend the following Wrox books for more help with the basics: ❑❑ Beginning Web Programming with HTML, XHTML, and CSS, 2nd ed (2008),... this: if (jQuery) { jQuery( document).ready( function() { jQuery( ‘p’).addClass(‘tmpFrameworkLoaded’); jQuery( ‘p’).text( jQuery successfully loaded and running!’); } ); } 7 Part I: jQuery API An event is attached to jQuery s ready event, which is executed as soon as the DOM is fully loaded, or all markup content, JavaScript and CSS, but not images In old-time JavaScript, you would have made your JavaScript. .. show you how to write JavaScript applications using jQuery, and by the end of this book, you too will be able to create Web 2.0 applications that function seamlessly across multiple browsers and platforms Part I: jQuery API In this chapter, I begin discussion of jQuery by introducing what you get out of jQuery, who develops jQuery, how you obtain jQuery, and how you install jQuery and test that it is... 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 — In this chapter, you learn about the methods that jQuery exposes for working with CSS properties and declarations jQuery provides intuitive and versatile methods that let you manipulate CSS in a variety... ❑❑ Beginning CSS: Cascading Style Sheets for Web Design, 2nd ed (2007), also written by yours truly ❑❑ Beginning JavaScript, 3rd ed (2007), by Paul Wilton and Jeremy McPeak For further knowledge of JavaScript above and beyond what is covered in this book, I recommend Professional JavaScript for Web Developers, 2nd ed (2009), by Nicholas C Zakas What This Book Covers This book covers the jQuery JavaScript. .. simple-to-understand plug-in architecture ❑❑ jQuery helps reduce redundancy in navigation and UI functionality, like tabs, CSS and markupbased pop-up dialogues, animations, and transitions, and lots of other things jQuery won’t do your laundry, walk the dog, or broker world peace (yet), but it does bring a lot to the table in terms of making client-side website development easier Is jQuery the only JavaScript. .. developer and creator is John Resig, whose website is located at www.ejohn.org John resides in Boston, Massachusetts and is a JavaScript Evangelist for the Mozilla Corporation There are also several other people who have contributed to jQuery and continue to assist with its development You can learn more about these people and what roles they played in jQuery s development at http://docs .jquery. com/About/Contributors... exposed by the jQuery library, and the second half covers the jQuery UI library Part 1: jQuery API ❑❑ Chapter 1: Introduction to jQuery — In this first chapter, I discuss a little of where jQuery came from and why it was needed Then I walk you through downloading and creating your first jQuery- enabled JavaScript xxi 27794flast.indd 21 3/16/09 11:33:36 AM Introduction ❑❑ Chapter 2: Selecting and Filtering... Throughout this book, I talk about standards, de facto and official, and how to develop and design webbased documents and even web-based applications that take those standards into account For example, I talk extensively about how to separate behavior (JavaScript) from presentation (CSS) and structure (XHTML) JavaScript written in this way is commonly referred to as non-intrusive JavaScript — it’s nonintrusive... issues with your programs, but jQuery makes it much less likely and eliminates a hefty chunk of compatibility issues 4 Chapter 1: Introduction to jQuery Who Develops jQuery? I won’t spend a lot of time talking about the history of JavaScript frameworks, why they exist, and so on I prefer to get straight to the point That said, a brief mention of the people involved with developing jQuery is in order jQuery s . Beginning JavaScript ® and CSS Development with jQuery Richard York 27794ffirs.indd 5 3/16/09 3:14:20 PM Beginning JavaScript ® and CSS Development with jQuery Published by Wiley Publishing,. Cataloging-in-Publication Data York, Richard. Beginning JavaScript and CSS development with jQuery / Richard York. p. cm. Includes index. ISBN 978-0-470-22779-4 (paper/website) 1. JavaScript (Computer program. xix Part I: jQuery API 1 Chapter 1: Introduction to jQuery 3 What Does jQuery Do for Me? 4 Who Develops jQuery? 5 Obtaining jQuery 5 Installing jQuery 5 Programming Conventions 8 XHTML and CSS Conventions