Bear Bibeault Covers jQuery 1.4 and jQuery UI 1.8 Yehuda Katz IN ACTION SECOND EDITION MANNING Praise for the First Edition This is an excellent work, a worthy successor to others in Manning’s “In Action” series. It is highly readable and chock-full of working code. The Lab pages are a marvelous way to explore the library, which should become an important part of every web developer’s arsenal. Five stars all ‘round! —David Sills, JavaLobby, Dzone I highly recommend the book for learning the fundamentals of jQuery and then serving as a good reference book as you leverage the power of jQuery more and more in your daily development. —David Hayden, MVP C#, Codebetter.com The Elements of Style for JavaScript. —Joshua Heyer, Trane Inc. For those new to jQuery, this book is a good primer that covers a range of common uses of the framework.... The examples throughout the book are relevant, and make the point effectively. The code snippets are easily distinguishable from the rest of the text, and the text is clear and easy to follow. —Grant Palin, Blogger It works and makes for a very readable book that you can just breeze through very quickly and pick up and retain a lot of information. —Rich Strahl, Blogger Thanks to the authors Bear Bibeault and Yehuda Katz and their exemplary style, this compre- hensive book, or operating manual as it might be called, can be taken in a front-to-back approach to learn from scratch, or as a reference to those already dabbling in jQuery and needing verifica- tion of best practices. —Matthew McCullough, —Denver Open Source Users Group With its capable technical coverage, extensive use of sample code, and approachable style, jQuery in Action is a valuable resource for any Web developer seeking to maximize the power of JavaScript, and a must-have for anyone interested in learning jQuery. —Michael J. Ross, —Web Developer, Slashdot Contributor More Praise for the First Edition An 8 out of 10—buy it! If you want to learn jQuery then this is an excellent book... —John Whish, Founder, —Adobe ColdFusion User Group for Devon I highly recommend this book to any novice or advanced JavaScript developers who finally want to get serious about JavaScript and start writing optimized and elegant code without all the hassle of traditional JavaScript code authoring. —Val’s Blog jQuery in Action offers a rich investigation of the up-and-coming jQuery library for client-side JavaScript. —www.DZone.com I think that jQuery in Action is an excellent book that will help you learn and understand jQuery. I certainly enjoyed reading the book. —Gunnar Hillert, —Atlanta Java User Group jQuery in Action Second Edition BEAR BIBEAULT YEHUDA KATZ MANNING Greenwich (74° w. long.) For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact Special Sales Department Manning Publications Co. 180 Broad St. Suite 1323 Stamford, CT 06901 Email: [email protected] ©2010 by Manning Publications Co. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps. Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without the use of elemental chlorine. Manning Publications Co. Development editor: Lianna Wlasiuk 180 Broad St. Copyeditor: Andy Carroll Suite 1323 Typesetter: Dottie Marsico Stamford, CT 06901 Cover designer: Marija Tudor ISBN 978-1-935182-32-0 Printed in the United States of America 12345678910–MAL–151413121110 brief contents PART 1CORE JQUERY.............................................................. 1 1 ■ Introducing jQuery 3 2 ■ Selecting the elements upon which to act 18 3 ■ Bringing pages to life with jQuery 55 4 ■ Events are where it happens! 93 5 ■ Energizing pages with animations and effects 138 6 ■ Beyond the DOM with jQuery utility functions 169 7 ■ Expand your reach by extending jQuery 204 8 ■ Talk to the server with Ajax 235 PART 2 JQUERY UI .............................................................. 279 9 ■ Introducing jQuery UI: themes and effects 281 10 ■ jQuery UI mouse interactions: Follow that mouse! 305 11 ■ jQuery UI widgets: Beyond HTML controls 346 appendix ■ JavaScript that you need to know but might not! 415 v contents list of lab pages xiii foreword to the first edition xv preface to the second edition xvii preface to the first edition xix acknowledgments xxii about this book xxv about the authors xxx about the cover illustration xxxii PART 1CORE JQUERY .................................................. 1 Introducing jQuery 3 1 1.1 Power in the economy of code 4 1.2 Unobtrusive JavaScript 6 Separating behavior from structure 6 ■ Segregating the script 7 1.3 jQuery fundamentals 8 The jQuery wrapper 8 ■ Utility functions 11 ■ The document ready handler 11 ■ Making DOM elements 13 ■ Extending jQuery 14 ■ Using jQuery with other libraries 16 1.4 Summary 16 vii viii CONTENTS Selecting the elements upon which to act 18 2 2.1 Selecting elements for manipulation 19 Controlling the context 20 ■ Using basic CSS selectors 22 Using child, container, and attribute selectors 23 ■ Selecting by position 27 ■ Using CSS and custom jQuery filter selectors 29 2.2 Generating new HTML 32 2.3 Managing the wrapped element set 35 Determining the size of a wrapped set 37 ■ Obtaining elements from a wrapped set 37 ■ Slicing and dicing a wrapped element set 41 ■ Getting wrapped sets using relationships 49 ■ Even more ways to use a wrapped set 51 ■ Managing jQuery chains 52 2.4 Summary 54 Bringing pages to life with jQuery 55 3 3.1 Working with element properties and attributes 56 Manipulating element properties 58 ■ Fetching attribute values 58 ■ Setting attribute values 60 ■ Removing attributes 62 ■ Fun with attributes 62 ■ Storing custom data on elements 64 3.2 Changing element styling 65 Adding and removing class names 66 ■ Getting and setting styles 70 3.3 Setting element content 77 Replacing HTML or text content 77 ■ Moving and copying elements 78 ■ Wrapping and unwrapping elements 84 Removing elements 86 ■ Cloning elements 87 ■ Replacing elements 88 3.4 Dealing with form element values 89 3.5 Summary 92 Events are where it happens! 93 4 4.1 Understanding the browser event models 95 The DOM Level 0 Event Model 95 ■ The DOM Level 2 Event Model 101 ■ The Internet Explorer Event Model 106 4.2 The jQuery Event Model 106 Binding event handlers with jQuery 107 ■ Removing event handlers 111 ■ Inspecting the Event instance 112 ■ Proactively managing event handlers 115 ■ Triggering event handlers 117 Other event-related methods 119 CONTENTS ix 4.3 Putting events (and more) to work 124 Filtering large data sets 124 ■ Element creation by template replication 126 ■ Setting up the mainline markup 129 Adding new filters 130 ■ Adding the qualifying controls 133 Removing unwanted filters and other tasks 134 ■ There’s always room for improvement 135 4.4 Summary 136 Energizing pages with animations and effects 138 5 5.1 Showing and hiding elements 139 Implementing a collapsible “module” 140 ■ Toggling the display state of elements 143 5.2 Animating the display state of elements 144 Showing and hiding elements gradually 144 ■ Fading elements into and out of existence 149 ■ Sliding elements up and down 152 Stopping animations 153 5.3 Creating custom animations 154 A custom scale animation 156 ■ A custom drop animation 156 A custom puff animation 157 5.4 Animations and Queuing 159 Simultaneous animations 159 ■ Queuing functions for execution 162 ■ Inserting functions into the effects queue 166 5.5 Summary 167 Beyond the DOM with jQuery utility functions 169 6 6.1 Using the jQuery flags 170 Disabling animations 170 ■ Detecting user agent support 171 The browser detection flags 175 6.2 Using other libraries with jQuery 177 6.3 Manipulating JavaScript objects and collections 180 Trimming strings 180 ■ Iterating through properties and collections 181 ■ Filtering arrays 183 ■ Translating arrays 184 More fun with JavaScript arrays 186 ■ Extending objects 187 Serializing parameter values 189 ■ Testing objects 193 6.4 Miscellaneous utility functions 194 Doing nothing 194 ■ Testing for containment 194 ■ Tacking data onto elements 195 ■ Prebinding function contexts 195 Parsing JSON 198 ■ Evaluating expressions 199 Dynamically loading scripts 199 6.5 Summary 202 x CONTENTS Expand your reach by extending jQuery 204 7 7.1 Why extend jQuery? 205 7.2 The jQuery plugin authoring guidelines 205 Naming files and functions 206 ■ Beware the $ 207 ■ Taming complex parameter lists 208 7.3 Writing custom utility functions 210 Creating a data manipulation utility function 211 ■ Writing a date formatter 212 7.4 Adding new wrapper methods 216 Applying multiple operations in a wrapper method 218 Retaining state within a wrapper method 223 7.5 Summary 233 Talk to the server with Ajax