WIXLIB

www.PacktPub.comSupport iles, eBooks, discount offers and moreYou might want to visit www.PacktPub.com for support iles and downloads relatedto your book.Did you know that Packt offers eBook versions of every book published, with PDFand ePub iles available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy.Get in touch with us at service@packtpub.com for more details.At www.PacktPub.com, you can also read a collection of free technical articles, signup for a range of free newsletters and receive exclusive discounts and offers on Packtbooks and eBooks.TMhttp://PacktLib.PacktPub.comDo you need instant solutions to your IT questions? PacktLib is Packt's onlinedigital book library. Here, you can access, read and search across Packt's entirelibrary of books.Why Subscribe? Fully searchable across every book published by Packt Copy and paste, print and bookmark content On demand and accessible via web browserFree Access for Packt account holdersIf you have an account with Packt at www.PacktPub.com, you can use this to accessPacktLib today and view nine entirely free books. Simply use your login credentialsfor immediate access.www.it-ebooks.info

www.it-ebooks.info

Table of ContentsPrefaceChapter 1: Getting Started17What jQuery doesWhy jQuery works wellMaking our irst jQuery-powered web pageDownloading jQueryDeciding on the version of jQuery to useSetting up jQuery in an HTML documentAdding our jQuery codeFinding the poem textInjecting the new classExecuting the code891111121215161616The inished productPlain JavaScript versus jQueryUsing development toolsChrome Developer ToolsSummaryChapter 2: Selecting ElementsUnderstanding the DOMUsing the () functionCSS selectorsStyling list-item levelsAttribute selectorsStyling linksCustom selectorsStyling alternate rowsFinding elements based on textual contentForm 234353839

Table of ContentsDOM traversal methodsStyling speciic cellsChainingAccessing DOM elementsSummaryFurther readingExercises40424445464647Chapter 3: Handling Events49Chapter 4: Styling and Animating85Performing tasks on page loadTiming of code executionHandling multiple scripts on one pageAlternate syntax for .ready()Passing an argument to the .ready() callbackHandling simple eventsA simple style switcherEnabling the other buttonsMaking use of the event handler contextConsolidating code using the event contextShorthand eventsShowing and hiding advanced featuresEvent propagationThe journey of an eventSide effects of event bubblingAltering the journey – the event objectEvent targetsStopping event propagationPreventing default actionsDelegating eventsUsing built-in event-delegation capabilitiesRemoving an event handlerGiving namespaces to event handlersRebinding eventsSimulating user interactionReacting to keyboard eventsSummaryFurther readingExercisesModifying CSS with inline propertiesSetting computed style-property values[ ii 7696970717474757678798282828588

Table of ContentsUsing vendor-speciic style propertiesHiding and showing elementsEffects and durationSpeeding inFading in and fading outSliding up and sliding downToggling visibilityCreating custom animationsBuilding effects by handAnimating multiple properties at oncePositioning with CSS9191949495969799100101103Simultaneous versus queued effectsWorking with a single set of elementsBypassing the queueQueuing effects manually105105106107Working with multiple sets of elementsQueuing with callbacks109111In a nutshellSummaryFurther readingExercisesChapter 5: Manipulating the DOMManipulating attributes and propertiesNon-class attributesValue callbacksDOM element propertiesThe value of form controlsDOM tree manipulationThe () function revisitedCreating new elementsInserting new elementsMoving elementsWrapping 124126Explicit iteration127Using inverted insertion methodsCopying elementsCloning for pull quotesContent getter and setter methodsDOM manipulation methods in a nutshellSummaryFurther readingExercises[ iii ]www.it-ebooks.info129132133136138139139140

Table of ContentsChapter 6: Sending Data with AjaxLoading data on demandAppending HTMLWorking with JavaScript objectsRetrieving JSONUsing global jQuery functionsExecuting a script141142143146147148152Loading an XML documentChoosing a data formatPassing data to the serverPerforming a GET requestPerforming a POST requestSerializing a formDelivering different content for Ajax requestsKeeping an eye on the requestError handlingAjax and eventsSecurity limitationsUsing JSONP for remote dataExploring additional optionsThe low-level Ajax methodModifying default optionsLoading parts of an HTML pageSummaryFurther readingExercisesChapter 7: Using 77177180180180181Finding plugins and helpUsing a pluginDownloading and referencing the Cycle pluginCalling a plugin methodSpecifying plugin method parametersModifying parameter defaultsOther types of pluginsCustom selectorsGlobal function pluginsThe jQuery UI plugin libraryEffectsColor animationsClass animationsAdvanced easing[ iv 89189190191

Table of ContentsAdditional effects191Interaction componentsWidgetsjQuery UI ThemeRollerThe jQuery Mobile plugin libraryHTML5 custom data attributesMobile navigationDelivering multiple pages in one documentInteractive elements192194197197198198204205List viewsToolbar buttons206208Advanced featuresSummaryExercises209209210Chapter 8: Developing Plugins211Extending the global jQuery objectIsolating functions within namespaces216217Using the dollar ( ) alias in pluginsAdding new global functionsAdding multiple functions211212215Adding jQuery object methodsObject method contextImplicit iterationEnabling method chainingProviding lexible method parametersThe options objectDefault parameter valuesCallback functionsCustomizable defaultsCreating plugins with the jQuery UI widget factoryCreating a widgetDestroying widgetsEnabling and disabling widgetsAccepting widget optionsAdding submethodsTriggering widget eventsPlugin design recommendationsDistributing a 239

Table of ContentsChapter 9: Advanced Selectors and TraversingSelecting and traversing revisitedDynamic table ilteringStriping table rowsCombining iltering and stripingMore selectors and traversal methodsCustomizing and optimizing selectorsWriting a custom selector pluginSelector performanceThe Sizzle selector implementationTesting selector speedDOM traversal under the hoodjQuery object propertiesThe DOM element stackWriting a DOM traversal method pluginDOM traversal performanceImproving performance using chainingImproving performance with 59261261262SummaryFurther readingExercises263263263Chapter 10: Advanced EventsRevisiting eventsLoading additional pages of dataDisplaying data on hoveringEvent delegationUsing jQuery's delegation capabilitiesChoosing a delegation scopeDelegating earlyDeining custom eventsIninite scrollingCustom event parametersThrottling eventsOther ways to perform throttlingExtending eventsMore about special eventsSummaryFurther readingExercises[ vi 78279280281284285285285

Table of ContentsChapter 11: Advanced EffectsAnimation revisitedObserving and interrupting animationsDetermining the animation stateHalting a running animationCaution when halting animations287287290290291292Using global effect propertiesDisabling all effectsDeining effect durationsMultiproperty easingUsing deferred objectsAnimation promisesTaking ine-grained control of animationsSummaryFurther readingExercisesChapter 12: Advanced DOM ManipulationSorting table rowsSorting tables on the serverSorting tables using AjaxSorting tables within the browserMoving and inserting elements revisitedAdding links around existing textSorting simple JavaScript arraysSorting DOM elementsStoring data alongside DOM elementsPerforming additional precomputationStoring non-string dataAlternating sort directionsUsing HTML5 custom data attributesSorting and building rows with JSONModifying the JSON objectRebuilding content on demandRevisiting attribute manipulationUsing shorthand element-creation syntaxDOM manipulation hooksWriting a CSS hookSummaryFurther 326327328329330330[ vii ]www.it-ebooks.info

Table of ContentsChapter 13: Advanced Ajax331Appendix A: JavaScript Closures355Implementing progressive enhancement with AjaxHarvesting JSONP dataHandling Ajax errorsUsing the jqXHR objectAjax promisesCaching responsesThrottling Ajax requestsExtending Ajax capabilitiesData type convertersAdding Ajax preiltersDeining alternate transportsSummaryFurther readingExercisesCreating inner functionsCalling inner functions from elsewhereUnderstanding variable scopeHandling interactions between closuresCreating closures in jQueryPassing arguments to (document).ready()Assigning event handlersBinding handlers in loopsGiving names to functionsHandling memory-leak hazardsAvoiding accidental reference loopsManaging loops between the DOM and JavaScriptDisentangling reference loops with jQuerySummaryAppendix B: Testing JavaScript with QUnitDownloading QUnitSetting up the documentOrganizing testsAdding and running testsAsynchronous testingOther types of testsPractical considerationsFurther readingSummary[ viii 371373374374375376379380380381381

Table of ContentsAppendix C: Quick Reference383Selector expressionsSimple CSSPosition among siblingsPosition among matched elementsAttributesFormsMiscellaneous selectorsDOM traversal tion manipulationWorking with selected elementsEvent methodsBindingShorthand bindingTriggeringShorthand triggeringUtilityEffect methodsPredeined effectsCustom animationsQueue manipulationDOM manipulation methodsAttributes and RemovalCopyingDataAjax methodsIssuing requestsRequest 394395395396396397397398398399399399399400400401[ ix ]www.it-ebooks.info

Table of ContentsDeferred objectsObject creationMethods of deferred objectsMethods of promise objectsMiscellaneous properties and functionsProperties of the jQuery objectArrays and objectsObject 405[x]www.it-ebooks.info

PrefaceIn 2005, inspired by pioneers in the ield such as Dean Edwards and Simon Willison,John Resig put together a set of functions to make it easy to programmatically indelements on a web page and assign behaviors to them. By the time he irst publiclyannounced his project in January 2006, he had added DOM modiication and basicanimations. He gave it the name jQuery to emphasize the central role of inding orquerying parts of a web page and acting on them with JavaScript. Rapidly over theyears since then, jQuery has grown in its feature set, improved in its performance,and gained widespread adoption by many of the most popular sites on the Internet.While Resig has since stepped down from his role as lead developer of the project,jQuery has blossomed, in true open source fashion, to the point where it now boastsa top-notch core team headed by Dave Methvin, as well as a vibrant community ofthousands of additional JavaScript developers.The jQuery JavaScript library can enhance your websites regardless of yourbackground. It provides a wide range of features, an easy-to-learn syntax, and robustcross-platform compatibility in a single compact ile. What's more, hundreds ofplugins have been developed to extend jQuery's functionality, making it an essentialtool for nearly every client-side scripting occasion.Learning jQuery Fourth Edition provides a gentle introduction to jQuery concepts,allowing you to add interactions and animations to your pages—even if previousattempts at writing JavaScript have left you bafled. This book guides you past thepitfalls associated with Ajax, events, effects, and advanced JavaScript languagefeatures, and provides you with a brief reference to the jQuery library to return toagain and again.www.it-ebooks.info

PrefaceWhat this book coversChapter 1, Getting Started, will get your feet wet with the jQuery JavaScript library.The chapter begins with a description of jQuery and what it can do for you. It thenwalks you through downloading and setting up the library, as well as writing yourirst script.Chapter 2, Selecting Elements, will teach how to use jQuery's selector expressions andDOM traversal methods to ind elements on the page, wherever they may be. You'lluse jQuery to apply styling to a diverse set of page elements, sometimes in a waythat pure CSS cannot.Chapter 3, Handling Events, will walk you through jQuery's event-handlingmechanism to ire off behaviors when browser events occur. You'll see howjQuery makes it easy to attach events to elements unobtrusively, even before thepage inishes loading. Also, you'll get an overview of deeper topics, such as eventbubbling, delegation, and namespacing.Chapter 4, Styling and Animating, will introduce you to jQuery's animation techniquesand how to hide, show, and move page elements with effects that are both usefuland pleasing to the eye.Chapter 5, Manipulating the DOM, will teach you how to change your page oncommand. This chapter will also teach you how to alter the very structure of anHTML document, as well as adding to its content on the ly.Chapter 6, Sending Data with Ajax, will walk you through many ways in whichjQuery makes it easy to access server-side functionality without resorting to clunkypage refreshes. With the basic components of the library well in hand, you will beready to explore how the library can expand to it your needs.Chapter 7, Using Plugins, will show you how to ind, install, and use plugins,including the powerful jQuery UI and jQuery Mobile plugin libraries.Chapter 8, Developing Plugins, will teach you how to take advantage of jQuery'simpressive extension capabilities to develop your own plugins from the ground up.You'll create your own utility functions, add jQuery object methods, and discover thejQuery UI widget factory. Next, you'll take a second tour through jQuery's buildingblocks, learning more advanced techniques.Chapter 9, Advanced Selectors and Traversing, will reine your knowledge ofselectors and traversals, gaining the ability to optimize selectors for performance,manipulate the DOM element stack, and write plugins that expand selecting andtraversing capabilities.[2]www.it-ebooks.info

PrefaceChapter 10, Advanced Events, will dive further into techniques such as delegation andthrottling that can greatly improve event-handling performance. You'll also createcustom and special events that add even more capabilities to the jQuery library.Chapter 11, Advanced Effects, will ine-tune the visual effects of jQuery that canbe provided by crafting custom-easing functions and reacting to each step of ananimation. You'll gain the ability to manipulate animations as they occur andschedule actions with custom queuing.Chapter 12, Advanced DOM Manipulation, will provide you with more practicemodifying the DOM with techniques such as attaching arbitrary data to elements.You'll also learn how to extend the way jQuery processes CSS properties on elements.Chapter 13, Advanced Ajax, will help you achieve a greater understanding of Ajaxtransactions, including the jQuery deferred object system for handling data that maybecome available at a later time.Appendix A, JavaScript Closures, will help you gain a solid understanding of closuresin JavaScript—what they are and how you can use them to your advantage.Appendix B, Testing JavaScript with QUnit, will teach you about the QUnit libraryfor unit testing of JavaScript programs. This library will add to your toolkit fordeveloping and maintaining highly sophisticated web applications.Appendix C, Quick Reference, will provide a glimpse of the entire jQuery library,including every one of its methods and selector expressions. Its easy-to-scan formatis perfect for those moments when you know what you want to do, but you're justunsure about the right method name or selector.What you need for this bookIn order to run the example code demonstrated in this book, you need a modernweb browser such as Google Chrome, Mozilla Firefox, Apple Safari, or MicrosoftInternet Explorer.To experiment with the examples and to work on the chapter-ending exercises,you will also need: A basic text editor Web development tools for the browser such as the Chrome DeveloperTools or Firebug (as described in the Using development tools section ofChapter 1, Getting Started ) The full code package for each chapter, which includes a copy of thejQuery library (seen in the following Downloading the example code section)[3]www.it-ebooks.info

PrefaceAdditionally, to run some of the Ajax examples in Chapter 6, Sending Data with Ajaxand beyond, you will need a PHP-enabled web server.Who this book is forThis book is for web designers who want to create interactive elements for theirdesigns and for developers who want to create the best user interface for their webapplications. Basic JavaScript programming knowledge is required. You will needto know the basics of HTML and CSS, and should be comfortable with the syntaxof JavaScript. Prior knowledge of jQuery is not assumed, nor is experience with anyother JavaScript libraries required.By reading this book, you will become familiar with the functionality and syntax ofjQuery 1.10.x and jQuery 2.0.x, the latest versions at the time of writing.ConventionsIn this book, you will ind a number of styles of text that distinguish betweendifferent kinds of information. Here are some examples of these styles, and anexplanation of their meaning.Code words in text are shown as follows: "In addition, we can interact with thisconsole directly from our code, using the console.log() method."A block of code is set as follows: (document).ready(function() { ('div.poem-stanza').addClass('highlight');});When we wish to draw your attention to a particular part of a code block, therelevant lines or items are set in bold: ('#switcher-narrow').bind('click', function() { ('body').removeClass().addClass('narrow');});New terms and important words are shown in bold. Words that you see on thescreen, in menus or dialog boxes for example, appear in the text like this: "TheConsole tab will be of most frequent use to us while learning jQuery."[4]www.it-ebooks.info

PrefaceWarnings or important notes appear in a box like this.Tips and tricks appear like this.Reader feedbackFeedba

of writing Learning jQuery. As the irst book about jQuery, it set the standard that other jQuery—and really, other JavaScript books in general—have tried to match. It's consistently been one of the top-selling JavaScript books since its release, in no small part due to its quality and attention to detail.