Tài liệu Beginning JavaScript and CSS Development with jQuery ppt

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 Wrox Programmer to Programmer TM TM

www.it-ebooks.info

23642ffirs.indd 4 5/4/09 12:57:35 PM

www.it-ebooks.info

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

www.it-ebooks.info

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

www.it-ebooks.info

Beginning

JavaScript®and CSS Development with jQuery

27794ffirs.indd 3 3/16/09 3:14:20 PM

www.it-ebooks.info

27794ffirs.indd 4 3/16/09 3:14:20 PM

www.it-ebooks.info

Beginning

JavaScript®and CSS Development with jQuery

Richard York

27794ffirs.indd 5 3/16/09 3:14:20 PM

www.it-ebooks.info

23642ffirs.indd 4 5/4/09 12:57:35 PM

www.it-ebooks.info

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

www.it-ebooks.info

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

www.it-ebooks.info

27794ffirs.indd 8 3/16/09 3:14:20 PM

www.it-ebooks.info

Credits

Senior Development Editor

Tom Dinse

Technical Editor

Sam Judson

Senior Production Editor

Debra Banninger

Copy Editor

Cate Caffrey

Editorial Manager

Mary Beth Wakefield

Production Manager

Tim Tate

Vice President and Executive Group Publisher

Richard Swadley

Vice President and Executive Publisher

Barry Pruett

Associate Publisher

Jim Minatel

Project Coordinator, Cover

Lynsey Stanford

Compositor

James D. Kramer,

Happenstance Type-o-Rama

Proofreader

Nancy Carrasco

Indexer

J & J Indexing

27794ffirs.indd 9 3/16/09 3:14:20 PM

www.it-ebooks.info

27794ffirs.indd 10 3/16/09 3:14:20 PM

www.it-ebooks.info

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

www.it-ebooks.info

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

www.it-ebooks.info