1 java ee課程拓展技術(shù)手冊(cè)jquery in action

1、Bear Bibeault YehudaKatzCovers jQuery 1.4 and jQuery UI 1.8IN ACTIONSECOND EDITIONM A N N I N GPraise for the First EditionThisis an excellent work, aworthy successortoothers in Mannings “In Action” series. It is highly readable and chock-full of workingcode. The Lab pages area marvelous wayto explo

2、re the library, whichshould become animportant part ofevery web developers arsenal. Fivestars all round!David Sills, JavaLobby, DzoneIhighly recommend thebookforlearning thefundamentals of jQuery andthen serving asa good reference bookasyouleverage thepower of jQuery moreandmoreinyourdailydevelopmen

3、t.David Hayden, MVP C#, CThe 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 bookare relevant, and make thepoint effectively.Thecodesnippetsare ea

4、sily distinguishable from the rest of the text, and the text is clear and easy to follow.Grant Palin, BloggerItworks andmakes for avery readable bookthat youcan just breeze through very quickly and pick up and retain a lot of information.Rich Strahl, BloggerThanks to the authors Bear Bibeault and Ye

5、huda Katz and their exemplary style, this compre- hensivebook, oroperating manual as it might becalled, canbetakeninafront-to-back approach to learn fromscratch, orasareference to thosealready dabbling in jQuery andneedingverifica- tion of best practices.Matthew McCullough, Denver Open Source Users

6、GroupWith its capable technical coverage, extensive use of sample code, and approachable style, jQueryin Action isavaluable resource forany Webdeveloper seeking tomaximizethepower of JavaScript, and a must-have for anyone interested in learning jQuery.Michael J. Ross, Web Developer, Slashdot Contrib

7、utorMore Praise for the First EditionAn 8 out of 10buy it! If you want to learn jQuery then this is an excellent book.John Whish, Founder, Adobe ColdFusion User Group for DevonIhighly recommend this booktoany noviceoradvanced JavaScript developers who finallywant to get serious about JavaScript and

8、start writing optimized and elegant code without all the hassle of traditional JavaScript code authoring.Vals BlogjQueryin Action offers arichinvestigation ofthe up-and-coming jQuery libraryforclient-side JavaScript.www.DZI think that jQuery in Action is an excellent book that will help you l

9、earn and understand jQuery. I certainly enjoyed reading the book.Gunnar Hillert, Atlanta Java User GroupjQuery in ActionSecond EditionBEARBIBEAULT YEHUDA KATZM A N N I N GGreenwich (74 w. long.)For online information and ordering of this and other Manning books, please visit . The pub

10、lisher offers discounts on this book when ordered in quantity. For more information, please contactSpecial Sales Department Manning Publications Co. 180 Broad St.Suite 1323Stamford, CT 06901Email: 2010 by Manning Publications Co. All rights reserved.No part ofthis publication maybe

11、reproduced, stored in aretrieval system, ortransmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher.Manyofthe designationsused bymanufacturers andsellerstodistinguish theirproducts are claimed as trademarks. Where thos

12、e designations appear inthe book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps.Recognizing theimportance of preserving what has been written, itis Mannings policy tohave the books we publish printedon acid-free paper,and weex

13、ert our bestefforts tothatend. Recognizing alsoourresponsibility toconservetheresourcesofour 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. 180 Broad St.Suite 1323Stamford, CT 06901Developme

14、nt editor: Lianna Wlasiuk Copyeditor: Andy Carroll Typesetter: Dottie MarsicoCover designer: Marija TudorISBN 978-1-935182-32-0Printed in the United States of America1 2 3 4 5 6 7 8 9 10 MAL 15 14 13 12 11 10 brief contentsPART 1CORE JQUERY1 Introducing jQuery 3 Selecting the elements upon which to

15、act 18 Bringing pages to life with jQuery 55 Events are where it happens! 93 Energizing pages with animations and effects138 Beyondthe DOM withjQuery utility functions 169 Expand your reach by extending jQuery 204 Talk to the server with Ajax 23512345678PART 2JQUERY UI279 Introducing jQuery UI: them

16、es and effects 281 jQuery UImouseinteractions: Follow thatmouse! 305 jQuery UI widgets: Beyond HTML controls 346 JavaScript that you needtoknowbutmight not! 41591011appendixvcontentslist of lab pages xiiiforeword to the first edition xv preface to the second edition xvii preface to the first edition

17、 xix acknowledgments xxiiabout this book xxv about the authors xxxabout the coverillustration xxxiiPART 1CORE JQUERY11Introducing jQuery31.11.2Power in the economy of code 4 Unobtrusive JavaScript 6Separating behavior from structure 6Segregating the script 71.3jQuery fundamentalsThe jQuery wrapper 8

18、8Utility functions 11Thedocumentready handler 11Making DOM elements 13ExtendingjQuery 14Using jQuery withother libraries 161.4Summary 16viiviiiCONTENTS2Selecting the elements upon which to act182.1Selecting elements for manipulation 19Controlling thecontext 20 Using basic CSS selectors 22Using child

19、, container, and attribute selectors 23Selecting byposition 27Using CSS and custom jQuery filter selectors 292.22.3Generating new HTML 32Managing the wrapped element set35Determining thesize ofawrappedset 37Obtaining elements from awrapped set 37Slicing and dicing a wrapped elementset 41Gettingwrapp

20、ed sets using relationships 49 Even moreways to use awrapped set 51Managing jQuery cha522.4Summary 543Bringing pages to life with jQuery553.1Working with element properties and attributes 56Manipulating element properties 58Fetching attributevalues 58Setting attribute values 60RemovingStoring custom

21、 data onattributes 62 Fun with attributes 62 elements 643.2Changing element styling 65Adding and removing class names 66 setting styles 70Setting element content 77Getting and3.3Replacing HTML or text content 77Movingand copyingelements 78 Wrapping and unwrappingelements 84Removing elements 86 Cloni

22、ng elements 87 Replacing elements 883.43.5Dealing with form element values 89Summary 924Events are where ithappens!934.1Understanding thebrowser event models 95The DOM Level 0 Event Model 95The DOM Level 2 EventModel 101The Internet Explorer Event Model 1064.2The jQuery Event Model 106Binding event

23、handlers with jQuery 107 Removing eventhandlers 111 pecting the Eventtance 112Proactivelymanaging event handlers 115Triggering event handlers117Other event-related methods 119CONTENTSix4.3 Putting events (and more) to work124Filtering largedatasets 124Element creation bytemplatereplication 126Settin

24、g up the mainline markup 129Adding new filters 130 Adding the qualifying controls 133Removing unwanted filters andother tasks 134 room for improvement 1354.4 Summary 136Energizing pages with animations and effectsTheres always51385.1Showing and hiding elements 139Implementinga collapsible“module” 14

25、0 Toggling the display state of elements 143Animating the display state of elements 1445.2Showing and hiding elements gradually 144Fading elements intoand out of existence 149Sliding elements up and down 152Stopping animations 153Creating custom animationsA custom scaleanimation 156 A custom puff an

26、imation 1575.3154A custom drop animation 1565.4Animations and Queuing 159Simultaneous animations 159Queuingfunctions forexecution 162Summary 167erting functions intothe effectsqueue 1665.56Beyond the DOM with jQuery utility functions1696.1Using the jQuery flags 170Disabling animations 170 Detecting

27、user agent support 171 The browser detection flags 175Using other libraries with jQuery 177 Manipulating JavaScript objects and collections1806.26.3Trimming strings 180Iterating through properties andcollections 181 Filtering arrays 183Translating arrays 184More fun with JavaScript arrays 186 Extend

28、ing objects 187 Serializing parameter values 189 Testing objects 1936.4Miscellaneous utility functions 194Doing nothing 194Testing for containment 194Tackingdata ontoelements 195 Prebinding function contexts 195Parsing JSON 198Evaluating expressions 199Dynamically loading scripts 199Summary 2026.5xC

29、ONTENTS7Expand your reach by extending jQuery2047.17.2Why extend jQuery? 205The jQuery plugin authoring guidelines 205Naming filesand functions 206 complex parameter lists 208Beware the $ 207 Taming7.3Writing custom utility functions210Creatingadatamanipulation utility function 211 formatter 212Addi

30、ng new wrapper methods 216Writing adate7.4Applying multiple operations in a wrapper method 218 Retaining state within a wrapper method 223Summary 2337.58Talktothe server with Ajax2358.1Brushing up on Ajax 236Creating an XHRtance 237Initiating the request 239Keeping track of progress 240Getting the r

31、esponse 2408.2Loading content into elementsLoading content with jQuery 243 fragments 245241Loading dynamic HTML8.3Making GET and POST requests 250Getting data with GET 252 Making POST requests 254 dropdowns 255Getting JSON data 254 Implementing cascading8.4Taking full control of an Ajax request 261M

32、aking Ajax requests withall the trimmings 261 Setting requestdefaults 264Handling Ajax events 2658.5Putting it all together 268Implementing the Termifier 270 Putting the Termifier to thetest 274Improving the Termifier 2778.6Summary 278PART 2JQUERY UI2799Introducing jQuery UI: themes and effects2819.

33、1 Configuring and downloading the UI library282Configuring and downloading 283 Using the UI library 284CONTENTSxi9.2jQuery themesand styling 285Overview 286Using the ThemeRoller tool 2889.3jQuery UIEffects 291The jQuery UIeffects 291Extended coreanimationcapabilities 296 Augmented visibility methods

34、 296Animating class transitions 297Easings 2999.49.5Advanced positioning 300Summary 30310jQuery UI mouse interactions: Follow that mouse!30510.1Dragging things around 307Making elements draggable 308 Controlling draggability 313Draggability events 31210.2Dropping dragged things 314Making elements dr

35、oppable 315 Droppability events 318Sorting stuff 322Making thingssortable 323 Connecting sortables 32710.3Sortability events 327Fetching the sortorder 32910.4Changing the size of things 330Making thingsresizable 331 Resizability events 334 Styling the handles 335Making things selectable33610.5Creati

36、ng selectables 340Selectable events342Finding theselected and selectable elements 344Summary 34510.611jQuery UI widgets: Beyond HTML controls34611.1Buttons and buttonsets 347Button appearancewithin UI themes 348Creating themedbuttons 349 Button icons 352Styling buttons 353Sliders 354Button events 35

37、211.2Creating slider widgets 354Slider events 358Styling tips forsliders 359Progress bars 36011.3Creating progress bars 361 Progress bar events 362An auto-updating progressbar plugin 363 progressbars 369StylingxiiCONTENTS11.4Autocompleters 369Creating autocomplete widgets 370 Autocomplete sources 37

38、2Autocomplete events 375Autocompletingtyle 37611.5Date pickers 377Creating jQuery datepickers 377Datepicker date formats 385Datepicker events 387Tabs 389Datepicker utility functions 38711.6Creating tabbed content 389 Tab events 396Stylingtabs 397Accordions 397Creating accordionwidgets 39811.7Accordi

39、on events 402Styling classesfor accordions 403Loading accordion panels usingAjax404Dialog boxes 405Creating dialogboxes 405 Dialog events 41011.8Dialog boxclassnames 411Some dialogbox tricks 41211.911.10Summary 413The end? 414appendixJavaScript that you need to know but might not!415index 433 listof

40、 lab pagesSelectors20Operations35Move and Copy81Effects148$.param()192Rounded Corners288UI Effects291UI Easings299Positioning301Draggables308Droppables315Sortables324Resizables331Selectables338Buttons350Sliders356Autocompleters372Datepickers379Tabs392Accordions401Dialogs408xiii foreword to the first

41、 editionIts all about simplicity. Why should web developers be forced to write long, complex, book-length pieces of code when they want to create simple pieces of interaction? Theres nothing that says that complexity has to be a requirement for developing web applications.When I first set out to cre

42、ate jQuery I decided that I wanted an emphasis on small, simple code that served all the practical applications that web developers deal with day to day. I was greatly pleased as I read through jQuery in Action to see in it an excel- lent manifestation of the principles of the jQuery library.With an

43、 overwhelming emphasis on practical, real-world code presented in a terse, to-the-point format, jQuery in Action will serve as an ideal resource for those looking to familiarize themselves with the library.Whats pleased me the most about this book is the significant attention to detail that Bear and

44、 Yehuda have paid to the inner workings of the library. They were thor- ough in their investigation and dissemination of the jQuery API. It felt like nary a daywent by in which I wasnt graced with an email ortant message from them askingfor clarification, reporting newly discovered bugs, or recommen

45、ding improvements to the library. You can be safe knowing that the resource that you have before you is one of the best thought-out and researched pieces of literature on the jQuery library.One thing that surprised me about the contents of this book is the explicit inclu-sion of jQuery plugand the t

46、actics and theory behind jQuery plugin development.The reason why jQuery is able to stay so simple is through the use of its pluginxvxviFOREWORD TO THE FIRST EDITIONarchitecture. It provides a number of documented extension points upon which plu-gcan add functionality. Often that functionality, whil

47、e useful, is not genericenough for inclusion in jQuery itselfwhich is what makes the plugin architecturenecessary. A few of the plugdiscussed in this book, like the Forms, Dimension, andLiveQuery plug, have seen widespread adoption and the reason is obvious: Theyreexpertly constructed, documented, a

48、nd maintained. Be sure to pay special attention to how plug are utilized and constructed as their use is fundamental to the jQuery experience.With resources like this book, the jQuery project is sure to continue to grow and succeed. I hope the book will end up serving you well as you begin your expl

49、oration and use of jQuery.JOHNRESIG CREATOR OF jQUERY preface to the second editionItsbeen two years since the first edition of jQuery in Action was published. Was it really necessary to update the book so soon?Absolutely!Compared to the steady world of server-side languages such as Java, the client

50、-side technologies of the web move at a mighty fast clip. And jQuery isnt eating anyones dust; rather, its at the forefront of the rush!The jQuery team releases a major new version of the library just about every year (lately, striving for every January), in addition to the minor updates that are ma

51、de throughout the calendar year. That means that there have been numerous minor releases, and two major versions since the publication of the first edition, which waswritten agat jQuery 1.2. And what updates jQuery 1.3 and jQuery 1.4 have been!With each major release, the capabilities of jQuery have

52、 been extended andenhancedignificant ways. Whether it be the addition of custom events, eventnamespaces, function and effect queuing, or simply the large handful of really useful methods and functions that have been added, the range of capabilities that jQuery spans has increased significantly since

53、 the first edition hit the stands.And that doesnt even consider jQuery UI! In its nascent stages two years ago, jQuery UI merited a few sections in one chapter of the first edition. Since then, jQueryUI has growncopeandmaturityandwarrants a complete bookpart in this edition,consisting of three full

54、chapters.So it should come as no surprise that this second edition has made its way onto the shelves covering the advances that jQuery and jQuery UI have made over the past two years.xviixviiiPREFACE TO THE SECOND EDITIONWhats new in the second edition?When we decided to go ahead with creating a sec

55、ond edition of jQuery in Action, I remember someone saying to me, “Should be a piece of cake. After all, you just need to make some updates to the first edition.”How wrong they were! It actually took longer to complete this second edition than to write the book in the first place. You see, we didnt want to fall into the trap of “phoning it in” by just adding updates here and there and calling it done. We wanted this second edition to be much more than a warmed over version of the first edition.Anyone comparing the ta