Web development with jquery

ffi rs.indd 02/19/2015 Page i

WEB DEVELOPMENT WITH JQUERY®

INTRODUCTION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix

▸ PART I THE JQUERY API

CHAPTER 1 Introduction to jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

CHAPTER 2 Selecting and Filtering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

CHAPTER 3 Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

CHAPTER 4 Manipulating Content and Attributes . . . . . . . . . . . . . . . . . . . . . . . . 89

CHAPTER 5 Iteration of Arrays and Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

CHAPTER 6 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

CHAPTER 7 AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177

CHAPTER 8 Animation and Easing Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

CHAPTER 9 Plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

CHAPTER 10 Scrollbars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267

CHAPTER 11 HTML5 Drag and Drop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

▸ PART II JQUERY UI

CHAPTER 12 Draggable and Droppable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323

CHAPTER 13 Sortable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339

CHAPTER 14 Selectable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361

CHAPTER 15 Accordion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373

CHAPTER 16 Datepicker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383

CHAPTER 17 Dialog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399

CHAPTER 18 Tabs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

▸ PART III POPULAR THIRD-PARTY JQUERY PLUGINS

CHAPTER 19 Tablesorter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433

CHAPTER 20 Creating an Interactive Slideshow . . . . . . . . . . . . . . . . . . . . . . . . . . 443

CHAPTER 21 Working with HTML5 Audio and Video . . . . . . . . . . . . . . . . . . . . . . 459

CHAPTER 22 Creating a Simple WYSIWYG Editor . . . . . . . . . . . . . . . . . . . . . . . . 467

ffi rs.indd 02/19/2015 Page ii

▸ PART IV APPENDICES

APPENDIX A Exercise Answers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483

APPENDIX B jQuery Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493

APPENDIX C Selecting, Traversing, and Filtering . . . . . . . . . . . . . . . . . . . . . . . . . 501

APPENDIX D Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509

APPENDIX E Manipulating Content, Attributes, and Custom Data . . . . . . . . . . 523

APPENDIX F More Content Manipulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527

APPENDIX G AJAX Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 533

APPENDIX H CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543

APPENDIX I Utilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547

APPENDIX J Draggable and Droppable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551

APPENDIX K Sortable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 561

APPENDIX L Selectable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571

APPENDIX M Animation and Easing Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573

APPENDIX N Accordion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 585

APPENDIX O Datepicker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 589

APPENDIX P Dialog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 599

APPENDIX Q Tabs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 605

APPENDIX R Resizable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 611

APPENDIX S Slider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 615

APPENDIX T Tablesorter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 619

APPENDIX U MediaElement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 623

INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 627

ffi rs.indd 02/19/2015 Page iii

Web Development with jQuery®

ffi rs.indd 02/19/2015 Page v

Web Development with jQuery®

Richard York

ffi rs.indd 02/19/2015 Page vi

Web Development with jQuery®

Published by

John Wiley & Sons, Inc.

10475 Crosspoint Boulevard

Indianapolis, IN 46256

www.wiley.com

Copyright © 2015 by John Wiley & Sons, Inc., Indianapolis, Indiana

Published simultaneously in Canada

ISBN: 978-1-118-86607-8

ISBN: 978-1-118-86599-6 (ebk)

ISBN: 978-1-118-86600-9 (ebk)

Manufactured in the United States of America

10 9 8 7 6 5 4 3 2 1

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 specifi cally disclaim all warranties, including

without limitation warranties of fi tness for a particular purpose. No warranty may be created or extended by sales or

promotional 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, read ers 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.

Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with stan￾dard print versions of this book may not be included in e-books or in print-on-demand. If this book refers to media such

as a CD or DVD that is not included in the version you purchased, you may download this material at http://book

support.wiley.com. For more information about Wiley products, visit www.wiley.com.

Library of Congress Control Number: 2014948560

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 affi liates, in the United States and other countries,

and may not be used without written permission. jQuery is a registered trademark of Software Freedom Conservancy. All

other trademarks are the property of their respective owners. John Wiley & Sons, Inc., is not associated with any product

or vendor mentioned in this book.

ffi rs.indd 02/19/2015 Page vii

ABOUT THE AUTHOR

RICHARD YORK has written four previous Wrox books, including Beginning JavaScript and CSS

Development with jQuery (2009).

ABOUT THE CONTRIBUTOR AND

TECHNICAL EDITOR

PETER HENDRICKSON has been developing software as a hobby since 1989 and professionally since

2001. He is currently a Manager of Software Engineering at salesforce.com, where he has developed

both user interface and middle-tier components for the Salesforce Marketing Cloud. In addition to

his work technical editing many chapters of the book, Peter contributed by writing several chapters.

ABOUT THE TECHNICAL EDITOR

NIK DEVEREAUX joined ViaSat in 2003 and is currently a program director for ViaSat’s Central

Engineering department. He manages the Software Engineering Offi ce and University Partnerships &

Recruiting programs. In this role, Nik’s primary goal is to grow the size, skill set, and strategic alignment

of the entire software engineering community across all business areas and offi ce locations. He received

his bachelor’s and master’s degrees from UC San Diego.

ffi rs.indd 02/19/2015 Page ix

CREDITS

PROJECT EDITOR

John Sleeva

TECHNICAL EDITOR

Peter Hendrickson

Nik Devereaux

PRODUCTION MANAGER

Kathleen Wisor

COPY EDITOR

San Dee Phillips

MANAGER OF CONTENT DEVELOPMENT &

ASSEMBLY

Mary Beth Wakefi eld

MARKETING DIRECTOR

David Mayhew

MARKETING MANAGER

Carrie Sherrill

PROFESSIONAL TECHNOLOGY &

STRATEGY DIRECTOR

Barry Pruett

BUSINESS MANAGER

Amy Knies

ASSOCIATE PUBLISHER

Jim Minatel

PROJECT COORDINATOR, COVER

Patrick Redmond

PROOFREADER

Amy Schneider

INDEXER

Johnna VanHoose Dinse

COVER DESIGNER

Wiley

COVER IMAGE

©iStock.com/George Pchemyan

ftoc.indd 02/19/2015 Page xi

CONTENTS

INTRODUCTION xix

PART I: THE JQUERY API

CHAPTER 1: INTRODUCTION TO JQUERY 3

What jQuery Can Do for You 5

Who Develops jQuery? 7

Obtaining jQuery 7

Installing jQuery 7

Programming Conventions 10

Markup and CSS Conventions 10

JavaScript Conventions 15

Summary 26

CHAPTER 2: SELECTING AND FILTERING 27

The Origin of the Selectors API 28

Using the Selectors API 29

Filtering a Selection 33

Working Within the Context of a Selection 34

Working with an Element’s Relatives 45

Slicing a Selection 58

Adding to a Selection 59

Summary 60

CHAPTER 3: EVENTS 63

The Various Event Wrapper Methods 63

Attaching Other Events 68

Attaching Persistent Event Handlers 69

Removing Event Handlers 75

Creating Custom Events 80

Summary 86

CHAPTER 4: MANIPULATING CONTENT AND ATTRIBUTES 89

Setting, Retrieving, and Removing Attributes 89

Setting Multiple Attributes 96

Manipulating Class Names 97

xii

CONTENTS

ftoc.indd 02/19/2015 Page xii

Manipulating HTML and Text Content 102

Getting, Setting, and Removing Content 103

Appending and Prepending Content 108

Inserting Beside Content 111

Inserting Beside Content via a Selection 112

Wrapping Content 117

Replacing Elements 123

Removing Content 126

Cloning Content 130

Summary 133

CHAPTER 5: ITERATION OF ARRAYS AND OBJECTS 135

Enumerating Arrays 135

Enumerating Objects 139

Iterating a Selection 141

Filtering Selections and Arrays 143

Filtering a Selection 143

Filtering a Selection with a Callback Function 146

Filtering an Array 147

Mapping a Selection or an Array 151

Mapping a Selection 151

Mapping an Array 153

Array Utility Methods 156

Making an Array 157

Finding a Value Within an Array 158

Merging Two Arrays 160

Summary 162

CHAPTER 6: CSS 165

Working with CSS Properties 165

jQuery’s Pseudo-Classes 167

Obtaining Outer Dimensions 167

Summary 174

CHAPTER 7: AJAX 177

Making a Server Request 178

What’s the Difference Between GET and POST? 179

RESTful Requests 180

Formats Used to Transport Data with an AJAX Request 180

Making a GET Request with jQuery 181

xiii

CONTENTS

ftoc.indd 02/19/2015 Page xiii

Loading HTML Snippets from the Server 195

Dynamically Loading JavaScript 200

AJAX Events 205

Using AJAX Event Methods 210

Attaching AJAX Events to Individual Requests 211

Sending a REST Request 213

Summary 220

CHAPTER 8: ANIMATION AND EASING EFFECTS 223

Showing and Hiding Elements 223

Sliding Elements 231

Fading Elements 234

Custom Animation 237

Animation Options 241

Summary 242

CHAPTER 9: PLUGINS 243

Writing a Plugin 243

Writing a Simple jQuery Plugin 243

Inspecting the Document Object Model 248

Writing a Context Menu jQuery Plugin 250

Good Practice for jQuery Plugin Development 265

Summary 265

CHAPTER 10: SCROLLBARS 267

Getting the Position of a Scrollbar 267

Scrolling to a Particular Element

within a Scrolling <div> 272

Scrolling to the Top 276

Summary 277

CHAPTER 11: HTML5 DRAG AND DROP 279

Implementing Drag and Drop 279

Prerequisite Plugins 286

Event Setup 289

Implementing Drag-and-Drop File Uploads 294

Adding the File Information Data Object 309

Using a Custom XMLHttpRequest Object 313

Additional Utilities 316

Summary 319