jquery in Action Second Edition BEAR BIBEAULT YEHUDA KATZ!II MANNING Greenwich (74 0 w. lang.)
'. "'~""l" brief contents 1 _ IntroducingjQuery 3 2 _ Selecting the elements upon which to act 18 3 _ Bringing pages to life withjquery 55 4 _ Events are where it happens! 93 5 _ Energizing pages with animations and effects 138 6 _ Beyond the DOM withjquery utility functions 169 7 _ Expand yom reach by extendingjquery 204 8 _ Talk to the server with Ajax 235 PART 2 9 _ IntroducingjQuery VI: themes and effects 281 10 _ jquery VI mouse interactions: Follow that mouse! 305 11 _ jquery VI widgets: Beyond HTML controls 346 appendix _ JavaScript that you need to know but might not! 415 v
contents list oj!ab pages XIZt joreword to the first edition xv prejace to the second edition xvii prejace to the first edition xix acknowledgments xxii about this book xxv about the authors xxx about the cover illustration xxxii PART 1 CORE JQUERY. 1 1 IntroducingjQJl.ery 3 1.1 Power in the economy ofcode 4 1.2 UnobtrusiveJavaScript 6 Separating behaviorfrom structure 6. Segregating the script 7 1.3 jquery fundamentals 8 ThejQuery wrapper 8. Utility junctions 11 The document ready handler 11. Making DOM elements 13 Extending jquery 14 UsingjQuery with other libraries 16 1.4 Summary 16 vü
viii 2 3 4 CONTENTS Selecting the elements upon which to act 18 2.1 Selecting elements far manipulation 19 Controlling the context 20 Using basic CSS selectors 22 Using child, container, and attribute selectors 23. Selerling 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 Determiningthe size ofa wrapped set 37. Obtainingelementsfrom a wrapped set 37 Slicingand dicing a wrapped element set 41. l.etting wrapped sets using relationships 49 Even more ways to use a wrapped set 51. ManagingjQuery chains 52 2.4 Summary 54 Bringing pages to life withjq!.tery 55 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 setting styles 70 3.3 Setting element content 77 66. Getting and &placinghtml or text content 77. Moving and copying elements 78. Wrapping and unwrapping elements 84 Rernoving elements 86 Cloningelements 87. Replacing elements 88 3.4 Dealing with form element values 89 3.5 Summary 92 Events are where it happens! 93 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 ThejQuery 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 5 6 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 Removingunwantedfilters and other tasks 134 There's always room for improvement 135 4.4 Summary 136 Energizing pages with animations and effects 138 5.1 Showing and hiding elements 139 Implementingacollapsible "module" ofelements 143 5.2 Animating the display state of elements 144 140. Togglingthedisplaystate Showing and hidingelements gradually 144. Fading elements into and out ofexistence 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 puffanimation 157 5.4 Animations and Queuing 159 Simultaneous animations 159. Queuingfunctionsfor execution 162. Insertingfunctions into the effects queue 166 5.5 Summary 167 Beyond the DOM withjq}lery utilityfunctions 169 6.1 Using thejquery 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 ManipulatingJavaScript objects and collections 180 Trimming strings 180. Iterating through properties and collections 181. Filtering arrays 183. Translating arrays 184 More fun withjavascript arrays 186. Extending objects 187 Serializingparameter values 189. Testing objects 193 6.4 Miscellaneous utility functions 194 Doing nothing 194. Testingfor containment 194 Tacking data onto elements 195 Prebindingfunction contexts 195 ParsingJSON 198. Evaluating expressions 199 Dynamically loading scripts 199 6.5 Summary 202
x CONTENTS 8 Expand your reach by extendingjquery 204 7.1 WhyextendjQuery? 205 7.2 ThejQuery plugin authoring guidelines 205 Namingfiles andfunctions 206 Beware the $ 207 Taming complex parameter lists 208 7.3 Writing custom utility functions 210 Creating a data manipulation utility function 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 seroer with Ajax 235 8.1 Brushing up on Ajax 236 211 Writing a date Creating an XHR instance 237 Initiating the request 239 Keeping track ofprogress 240 Getting the response 240 8.2 Loading content into elements 241 Loading content with jquery fragments 245 8.3 Making GET and POST requests 250 243 Loading dynamic HTML Getting data with GET 252 GettingJSONdata 254 Making POST requests 254 Implementing cascading dropdowns 255 8.4 Taking full contral of an Ajax request 261 Making Ajax requests with all the trimmings 261 Setting request defaults 264 Handling Ajax events 265 8.5 Putting it all together 268 Implementing the Termifier 270 Putting the Termifier to the test 274 Improving the Termifier 277 8.6 Summary 278 PART 2 JQ'UERY VI 279 IntroducingjQuery UI: themes and effeets 281 9.1 Configuring and downloading the VI library 282 Configuring and downloading 283 Using the UI library 284
CONTENTS xi 9.2 jquery themes and styling 285 Overview 286. Using the ThemeRoller tool 288 9.3 jquery VI Effects 291 The jquery UI effects 291. Extended core animation capabilities 296. Augmented visibility methods 296 A nimating dass transitions 297 Easings 299 9.4 Advanced positioning 300 9.5 Summary 303 jqj1ery VI mouse interactions: Follow that mouse! 305 10.1 Dragging things around 307 Making elements draggable 308. Draggability events 312 Controlling draggability 313 10.2 Dropping dragged things 314 Making elements droppable 315 Droppabilityevents 318 10.3 Sorting stuff 322 Making things sortable 323. Connecting sortables 327 Sortabilityevents 327. Fetching the sort order 329 10.4 Changing the size of things 330 Making things resiwble 331 Resizabilityevents 334 Styling the handles 335 10.5 Making things selectable 336 Creating selectables 340 Selectable events 342 Finding the selected and selectable elements 344 10.6 Summary 345 jquery VIwidgets: Beyond HTML controls 346 11.1 Buttons and buttonsets 347 Button appearance within UI themes 348 Creating themed buttons 349. Button icons 352 Button events 352 Styling buttons 353 11.2 Sliders 354 Creating slider widgets 354. Slider events 358 Styling tips jor sliders 359 11.3 Progress bars 360 Creating progress bars 361 Progress bar events 362 An auto-updating progress bar plugin 363. Styling progress bars 369
xii CONTENTS 11.4 Autocomp1eters 369 11.8 Creating autocomplete widgets 370. Autocomplete sources 372 Autocomplete events 375 Autocompleting in style 376 11.5 Date pickers 377 11.6 Tabs 389 CreatingjQuery datepickers 377 Datepicker date Jormats 385 Datepicker events 387 Datepicker utilityjunctions 387 Creating tabbed content 389. Tab events 396. Styling tabs 397 11.7 Accordions 397 11.9 11.10 Creating accordion widgets 398. Accordion events 402 Styling dassesjor accordions 403. Loading accordion panels using Ajax 404 Dialog boxes 405 Creating dialog boxes 405. Dialog events 410. Dialog box dass names 411. Some dialog box tricks 412 Summary 413 The end? 414 appendix JavaScript that you need to know but might not! 415 index 433