Updates, source code, and Wrox technical support at www.wrox.com Beginning JavaScript ® and CSS Development with jQuery Richard York With full-color code and illustrations Full Color Beginning JavaScript ® and CSS Development with jQuery www.wrox.com $44.99 USA $53.99 CAN Wrox Beginning guides are crafted to make learning programming languages and technologies easier than you think, providing a structured, tutorial format that will guide you through all the techniques involved. Recommended Computer Book Categories Programming Languages JavaScript and VBScript ISBN: 978-0-470-22779-4 jQuery allows you to do more in the world of dynamic web applications, with less code and fewer errors. It reduces the amount of JavaScript programming to only a few lines of code while making your JavaScript more intuitive and attractive to work with. At the same time, jQuery makes it easier to manipulate CSS from JavaScript by allowing you to set style for one or many elements at once. With this unique, project-oriented book, author Richard York teaches even the most novice of JavaScript users how to quickly get started utilizing the JavaScript jQuery Library to decrease the amount of code that needs to be written and tested. A four- color code syntax highlighting system provides a visual reinforcement and allows you to see the nuts and bolts that comprise each line and section of code. With this helpful guide and hands-on exercises, you’ll be able to put jQuery to work for you and avoid having to write code from scratch. What you will learn from this book ● How to install and test jQuery ● Techniques to manipulate content and attributes ● Ways to filter and map a selection or an array ● The difference between GET and POST ● How to easily show, hide, slide, and fade elements with smooth animations and transitions ● Good practice for jQuery plugin development ● Methods for making elements draggable ● Ways to customize sortable lists ● How to implement and localize a datepicker Who this book is for This book is for web designers eager to do more with their web-based applications, but who do not necessarily have much JavaScript experience. Some basic knowledge of XHTML and CSS is necessary. Enhance Your Knowledge Advance Your Career JavaScript ® and CSS Development with jQuery York Beginning spine=1.0646" Wrox Programmer to Programmer TM Wrox Programmer to Programmer TM 23642ffirs.indd 4 5/4/09 12:57:35 PM Beginning JavaScript ® and CSS Development with jQuery Introduction xix Part I: jQuery API 1 Chapter 1: Introduction to jQuery 3 Chapter 2: Selecting and Filtering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Chapter 3: Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Chapter 4: Manipulating Content and Attributes 95 Chapter 5: Arrays and Iteration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 Chapter 6: CSS 207 Chapter 7: AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Chapter 8: Effects 277 Chapter 9: Plugins 285 Part II: jQuery UI 297 Chapter 10: Implementing Drag-and-Drop 299 Chapter 11: Drag-and-Drop Sorting 327 Chapter 12: Selection by Drawing a Box 355 Chapter 13: Accordion UI 373 Chapter 14: Datepicker 393 Chapter 15: Dialogs 409 Chapter 16: Tabs 425 Appendix A: Answers to Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439 Appendix B: Selectors Supported by jQuery . . . . . . . . . . . . . . . . . . . . . . . . 447 Appendix C: Selecting and Filtering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451 Appendix D: Events 453 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 27794ffirs.indd 1 3/16/09 3:14:20 PM Appendix L: Selectables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479 Appendix M: Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481 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 27794ffirs.indd 2 3/16/09 3:14:20 PM Beginning JavaScript ® and CSS Development with jQuery 27794ffirs.indd 3 3/16/09 3:14:20 PM 27794ffirs.indd 4 3/16/09 3:14:20 PM Beginning JavaScript ® and CSS Development with jQuery Richard York 27794ffirs.indd 5 3/16/09 3:14:20 PM 23642ffirs.indd 4 5/4/09 12:57:35 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 About the Author Richard York is a web developer and author of three Wrox books in addition to this: Beginning CSS: Cascading Style Sheets for Web Design (Wiley, 2007), CSS Instant Results (Wiley, 2006), and Beginning CSS: Cascading Style Sheets for Web Design, 2nd ed (Wiley, 2007). Website: www.deadmarshes.com 27794ffirs.indd 7 3/16/09 3:14:20 PM [...]... 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),... Part I: jQuery API 1 Chapter 1: Introduction to jQuery 3 What Does jQuery Do for Me? Who Develops jQuery? Obtaining jQuery Installing jQuery Programming Conventions 4 5 5 5 8 XHTML and CSS Conventions JavaScript Conventions 9 16 Summary 25 Chapter 2: Selecting and Filtering 27 The Origin of the Selectors API Using the Selectors API Filtering a Selection 28 29 37 Searching within a Selection with find()... you get out of jQuery, who develops jQuery, how you obtain jQuery, and how you install jQuery and test that it is ready to use As I mentioned in the Introduction, I do not assume that you are a JavaScript expert in this book, but I do assume that you are familiar with basic JavaScript concepts, such as the DOM and attaching events I will do my best to keep examples simple and to the point and avoid layering... 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 Obtaining jQuery jQuery is a free, Open Source JavaScript Framework The current stable, production release version, as of this writing, is 1.2.6 I use version 1.2.6 throughout the course of this book Getting jQuery. .. 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... 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... 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... Code /jquery/ jquery.js You do not have to install jQuery at this exact path The following “Try It Out” assists you with installing jQuery by giving you an alternative dialogue when the script is properly installed Try It Out Installing and Testing jQuery Example 1-1 To install and test jQuery, follow these steps 1 Download the jQuery script from www .jquery. com Alternatively, I have also provided the jQuery. .. ❑❑ 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. .. ❑❑ jQuery makes selecting items from the DOM easier via its sophisticated, built-in ability to use selectors, just like you would use in CSS ❑❑ jQuery makes it really easy to add your own custom methods via its 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 . code, and Wrox technical support at www .wrox. com Beginning JavaScript ® and CSS Development with jQuery Richard York With full-color code and illustrations Full Color Beginning JavaScript ® and. 3:14:20 PM Beginning JavaScript ® and CSS Development with jQuery 27794ffirs.indd 3 3/16/09 3:14:20 PM 27794ffirs.indd 4 3/16/09 3:14:20 PM Beginning JavaScript ® and CSS Development with jQuery Richard. Career JavaScript ® and CSS Development with jQuery York Beginning spine=1.0646" Wrox Programmer to Programmer TM Wrox Programmer to Programmer TM 23642ffirs.indd 4 5/4/09 12:57:35 PM Beginning