book

Learning jQuery - Fourth Edition

by Jonathan Chaffer, Karl Swedberg

June 2013

Beginner

444 pages

9h 45m

English

Packt Publishing

Read now

Unlock full access

Support files, eBooks, discount offers and moreWhy Subscribe?Free Access for Packt account holders
What this book covers

Downloading the example codeErrataPiracyQuestions
What jQuery does
Downloading jQueryDeciding on the version of jQuery to useSetting up jQuery in an HTML documentAdding our jQuery codeFinding the poem textInjecting the new classExecuting the codeThe finished product
Chrome Developer Tools
Understanding the DOM
Styling list-item levels
Styling links
Styling alternate rowsFinding elements based on textual contentForm selectors
Styling specific cellsChaining
Further reading
Performing tasks on page loadTiming of code executionHandling multiple scripts on one pageAlternate syntax for .ready()Passing an argument to the .ready() callback
A simple style switcherEnabling the other buttonsMaking use of the event handler contextConsolidating code using the event contextShorthand eventsShowing and hiding advanced features
The journey of an eventSide effects of event bubbling
Event targetsStopping event propagationPreventing default actionsDelegating eventsUsing built-in event-delegation capabilities
Giving namespaces to event handlersRebinding events
Reacting to keyboard events
Further reading
Modifying CSS with inline propertiesSetting computed style-property valuesUsing vendor-specific style properties
Speeding inFading in and fading outSliding up and sliding downToggling visibility
Building effects by handAnimating multiple properties at oncePositioning with CSS
Working with a single set of elementsBypassing the queueQueuing effects manuallyWorking with multiple sets of elementsQueuing with callbacksIn a nutshell
Further reading
Manipulating attributes and propertiesNon-class attributesValue callbacksDOM element propertiesThe value of form controls
The $() function revisitedCreating new elementsInserting new elementsMoving elementsWrapping elementsExplicit iterationUsing inverted insertion methods
Cloning for pull quotes
Further reading
Loading data on demandAppending HTMLWorking with JavaScript objectsRetrieving JSONUsing global jQuery functionsExecuting a scriptLoading an XML document
Performing a GET requestPerforming a POST requestSerializing a form
Using JSONP for remote data
The low-level Ajax methodModifying default optionsLoading parts of an HTML page
Further reading
Finding plugins and help
Downloading and referencing the Cycle pluginCalling a plugin methodSpecifying plugin method parametersModifying parameter defaults
Custom selectorsGlobal function plugins
EffectsColor animationsClass animationsAdvanced easingAdditional effectsInteraction componentsWidgetsjQuery UI ThemeRoller
HTML5 custom data attributesMobile navigationDelivering multiple pages in one documentInteractive elementsList viewsToolbar buttonsAdvanced features
Using the dollar ($) alias in plugins
Adding multiple functionsExtending the global jQuery objectIsolating functions within namespaces
Object method contextImplicit iterationEnabling method chaining
The options objectDefault parameter valuesCallback functionsCustomizable defaults
Creating a widgetDestroying widgetsEnabling and disabling widgetsAccepting widget optionsAdding submethodsTriggering widget events
Distributing a plugin
Selecting and traversing revisitedDynamic table filteringStriping table rowsCombining filtering and stripingMore selectors and traversal methods
Writing a custom selector pluginSelector performanceThe Sizzle selector implementationTesting selector speed
jQuery object propertiesThe DOM element stackWriting a DOM traversal method pluginDOM traversal performanceImproving performance using chainingImproving performance with caching
Further reading
Revisiting eventsLoading additional pages of dataDisplaying data on hovering
Using jQuery's delegation capabilitiesChoosing a delegation scopeDelegating early
Infinite scrollingCustom event parameters
Other ways to perform throttling
More about special events
Animation revisited
Determining the animation stateHalting a running animationCaution when halting animations
Disabling all effectsDefining effect durations
Animation promises
Further reading
Sorting table rowsSorting tables on the serverSorting tables using AjaxSorting tables within the browser
Adding links around existing textSorting simple JavaScript arraysSorting DOM elements
Performing additional precomputationStoring non-string dataAlternating sort directions
Modifying the JSON objectRebuilding content on demand
Using shorthand element-creation syntaxDOM manipulation hooksWriting a CSS hook
Further reading
Implementing progressive enhancement with AjaxHarvesting JSONP data
Ajax promisesCaching responses
Data type convertersAdding Ajax prefiltersDefining alternate transports
Further reading
Creating inner functionsCalling inner functions from elsewhereUnderstanding variable scope
Passing arguments to $(document).ready()Assigning event handlersBinding handlers in loopsGiving names to functions
Avoiding accidental reference loopsManaging loops between the DOM and JavaScriptDisentangling reference loops with jQuery
Downloading QUnit
Asynchronous testing
Further reading
Selector expressionsSimple CSSPosition among siblingsPosition among matched elementsAttributesFormsMiscellaneous selectors
FilteringDescendantsSiblingsAncestorsCollection manipulationWorking with selected elements
BindingShorthand bindingTriggeringShorthand triggeringUtility
Predefined effectsCustom animationsQueue manipulation
Attributes and propertiesContentCSSDimensionsInsertionReplacementRemovalCopyingData
Issuing requestsRequest monitoringConfigurationUtilities
Object creationMethods of deferred objectsMethods of promise objects
Properties of the jQuery objectArrays and objectsObject introspectionOther

Content preview from Learning jQuery - Fourth Edition

Delivering different content for Ajax requests

When returning HTML data, we have shown how the document fragments appear unstyled if we actually let the browser go to the page rather than use JavaScript. To provide a better experience than this to users without JavaScript, we can conditionally load a complete document with the <html>, <head>, and <body> elements and all that they contain. To do so, we can take advantage of a request header that jQuery sends along with every Ajax request. In our server-side code (PHP in this case), we just need to look for the X-Requested-With header. If it is set and has a value of XMLHttpRequest, we only deliver the fragment; otherwise, we deliver the full document. A basic implementation in PHP might look like ...