book

jQuery Cookbook

Name: jQuery Cookbook
Author: Cody Lindley
ISBN: 9781449383015

by Cody Lindley

November 2009

Intermediate to advanced

480 pages

11h 50m

English

O'Reilly Media, Inc.

Read now

Unlock full access

jQuery Cookbook
SPECIAL OFFER: Upgrade this ebook with O’Reilly
A Note Regarding Supplemental Files
Foreword
Contributors
Chapter AuthorsTech Editors
Preface
Who This Book Is ForWhat You’ll LearnjQuery Style and ConventionsOther OptionsIf You Have Problems Making Examples WorkIf You Like (or Don’t Like) This BookConventions Used in This BookUsing Code ExamplesSafari® Books OnlineHow to Contact Us
1. jQuery Basics
IntroductionWhy jQuery?The jQuery PhilosophyFind some elements and do something with themChainingThe jQuery wrapper setHow the jQuery API Is Organized1.1. Including the jQuery Library Code in an HTML PageProblemSolutionDiscussion1.2. Executing jQuery/JavaScript Coded After the DOM Has Loaded but Before Complete Page LoadProblemSolutionDiscussion1.3. Selecting DOM Elements Using Selectors and the jQuery FunctionProblemSolutionDiscussion1.4. Selecting DOM Elements Within a Specified ContextProblemSolutionDiscussion1.5. Filtering a Wrapper Set of DOM ElementsProblemSolutionDiscussion1.6. Finding Descendant Elements Within the Currently Selected Wrapper SetProblemSolutionDiscussion1.7. Returning to the Prior Selection Before a Destructive ChangeProblemSolutionDiscussion1.8. Including the Previous Selection with the Current SelectionProblemSolutionDiscussion1.9. Traversing the DOM Based on Your Current Context to Acquire a New Set of DOM ElementsProblemSolutionDiscussion1.10. Creating, Operating on, and Inserting DOM ElementsProblemSolutionDiscussion1.11. Removing DOM ElementsProblemSolutionDiscussion1.12. Replacing DOM ElementsProblemSolutionDiscussion1.13. Cloning DOM ElementsProblemSolutionDiscussion1.14. Getting, Setting, and Removing DOM Element AttributesProblemSolutionDiscussion1.15. Getting and Setting HTML ContentProblemSolutionDiscussion1.16. Getting and Setting Text ContentProblemSolutionDiscussion1.17. Using the $ Alias Without Creating Global ConflictsProblemSolutionDiscussion
2. Selecting Elements with jQuery
Introduction2.1. Selecting Child Elements OnlyProblemSolutionDiscussion2.2. Selecting Specific SiblingsProblemSolutionDiscussion2.3. Selecting Elements by Index OrderProblemSolutionDiscussion2.4. Selecting Elements That Are Currently AnimatingProblemSolutionDiscussion2.5. Selecting Elements Based on What They ContainProblemSolutionDiscussion2.6. Selecting Elements by What They Don’t MatchProblemSolutionDiscussion2.7. Selecting Elements Based on Their VisibilityProblemSolutionDiscussion2.8. Selecting Elements Based on AttributesProblemSolutionDiscussion2.9. Selecting Form Elements by TypeProblemSolutionDiscussion2.10. Selecting an Element with Specific CharacteristicsProblemSolutionDiscussion2.11. Using the Context ParameterProblemSolutionDiscussion2.12. Creating a Custom Filter SelectorProblemSolutionDiscussion
3. Beyond the Basics
Introduction3.1. Looping Through a Set of Selected ResultsProblemSolutionDiscussion3.2. Reducing the Selection Set to a Specified ItemProblemSolutionDiscussion3.3. Convert a Selected jQuery Object into a Raw DOM ObjectProblemSolutionDiscussion3.4. Getting the Index of an Item in a SelectionProblemSolutionDiscussion3.5. Making a Unique Array of Values from an Existing ArrayProblemSolutionDiscussion3.6. Performing an Action on a Subset of the Selected SetProblemSolutionDiscussion3.7. Configuring jQuery Not to Conflict with Other LibrariesProblemSolutionDiscussion3.8. Adding Functionality with PluginsProblemSolutionDiscussion3.9. Determining the Exact Query That Was UsedProblemSolutionDiscussion
4. jQuery Utilities
Introduction4.1. Detecting Features with jQuery.supportProblemSolutionDiscussion4.2. Iterating Over Arrays and Objects with jQuery.eachProblemSolutionDiscussion4.3. Filtering Arrays with jQuery.grepProblemSolutionDiscussion4.4. Iterating and Modifying Array Entries with jQuery.mapProblemSolutionDiscussion4.5. Combining Two Arrays with jQuery.mergeProblemSolutionDiscussion4.6. Filtering Out Duplicate Array Entries with jQuery.uniqueProblemSolutionDiscussion4.7. Testing Callback Functions with jQuery.isFunctionProblemSolutionDiscussion4.8. Removing Whitespace from Strings or Form Values with jQuery.trimProblemSolutionDiscussion4.9. Attaching Objects and Data to DOM with jQuery.dataProblemSolutionDiscussion4.10. Extending Objects with jQuery.extendProblemSolutionDiscussion

5. Faster, Simpler, More Fun
Introduction5.1. That’s Not jQuery, It’s JavaScript!ProblemSolutionDiscussion5.2. What’s Wrong with $(this)?ProblemSolutionDiscussion5.3. Removing Redundant RepetitionProblemSolution 1Solution 2Discussion5.4. Formatting Your jQuery ChainsProblemSolutionDiscussion5.5. Borrowing Code from Other LibrariesProblemSolutionDiscussion5.6. Writing a Custom IteratorProblemSolutionDiscussion5.7. Toggling an AttributeProblemSolutionDiscussion5.8. Finding the BottlenecksProblemSolutionDiscussion5.9. Caching Your jQuery ObjectsProblemSolutionDiscussion5.10. Writing Faster SelectorsProblemSolutionDiscussion5.11. Loading Tables FasterProblemSolutionDiscussion5.12. Coding Bare-Metal LoopsProblemSolutionDiscussion5.13. Reducing Name LookupsProblemSolutionDiscussion5.14. Updating the DOM Faster with .innerHTMLProblemSolutionDiscussion5.15. Debugging? Break Those ChainsProblemSolutionDiscussion5.16. Is It a jQuery Bug?ProblemSolutionDiscussion5.17. Tracing into jQueryProblem 1Solution 1Problem 2Solution 2Discussion5.18. Making Fewer Server RequestsProblemSolutionDiscussion5.19. Writing Unobtrusive JavaScriptProblemSolutionDiscussion5.20. Using jQuery for Progressive EnhancementProblemSolutionDiscussion5.21. Making Your Pages AccessibleProblemSolutionDiscussion
6. Dimensions
Introduction6.1. Finding the Dimensions of the Window and DocumentProblemSolutionDiscussion6.2. Finding the Dimensions of an ElementProblemSolutionDiscussion6.3. Finding the Offset of an ElementProblemSolutionDiscussion6.4. Scrolling an Element into ViewProblemSolution: Scrolling the Whole WindowSolution: Scrolling Inside an Element6.5. Determining Whether an Element Is Within the ViewportProblemSolution6.6. Centering an Element Within the ViewportProblemSolution6.7. Absolutely Positioning an Element at Its Current PositionProblemSolution6.8. Positioning an Element Relative to Another ElementProblemSolution6.9. Switching Stylesheets Based on Browser WidthProblemSolutionsSolution 1: Changing the Class on the Body ElementSolution 2: Changing the href Attribute of the Stylesheet That’s Responsible for Size-Related StylingSolution 3: Include All Size-Related Stylesheets in the Page, but Enable Only One at a TimeDiscussion
7. Effects
IntroductionAnimate MethodAnimation SpeedsEffects Template7.1. Sliding and Fading Elements in and out of ViewProblemSolutionSlideFadeBothDiscussion7.2. Making Elements Visible by Sliding Them UpProblemSolutionHTMLCSSjQueryDiscussion7.3. Creating a Horizontal AccordionProblemSolutionHTMLCSSjQueryDiscussion7.4. Simultaneously Sliding and Fading ElementsSolutionDiscussion7.5. Applying Sequential EffectsProblemSolutionManual callbackAutomatic sequenceDiscussion7.6. Determining Whether Elements Are Currently Being AnimatedProblemSolutionDiscussion7.7. Stopping and Resetting AnimationsProblemSolutionDiscussion7.8. Using Custom Easing Methods for EffectsProblemSolutionDiscussion7.9. Disabling All EffectsProblemSolutionDiscussion7.10. Using jQuery UI for Advanced EffectsProblemSolutionCSSjQueryDiscussion
8. Events
Introduction8.1. Attaching a Handler to Many EventsProblemSolutionDiscussion8.2. Reusing a Handler Function with Different DataProblemSolutionDiscussion8.3. Removing a Whole Set of Event HandlersProblemSolutionDiscussionHow to bind with a namespace?How to clean up my plugin?8.4. Triggering Specific Event HandlersProblemSolutionDiscussionHow to trigger handlers with a certain namespace?How to trigger handlers that do not have a namespace?8.5. Passing Dynamic Data to Event HandlersProblemSolutionDiscussionPassing extra argumentsSome more examplesPassing a custom event objectWhat’s the difference with event.data?8.6. Accessing an Element ASAP (Before document.ready)ProblemSolutionDiscussionHide an element right away (or another style operation)Bind event handlers to an element ASAPAny other situationPollingCustomly positioned scripts8.7. Stopping the Handler Execution LoopProblemSolutionDiscussionExamplesSimple form validationKilling all eventsDisadvantages of this approach8.8. Getting the Correct Element When Using event.targetProblemSolutionDiscussion8.9. Avoid Multiple hover() Animations in ParallelProblemSolutionDiscussionExampleNot there yet8.10. Making Event Handlers Work for Newly Added ElementsProblemSolutionDiscussionWhy do event handlers get lost ?A little introduction to event delegationPros and cons of each approachRebindingEvent delegationConclusion
9. Advanced Events
Introduction9.1. Getting jQuery to Work When Loaded DynamicallyProblemSolutionDiscussionWhat is jQuery.ready()?Why was this happening?9.2. Speeding Up Global Event TriggeringProblemSolutionDiscussionPros and consMaking the listeners functional9.3. Creating Your Own EventsProblemSolutionDiscussionHandling every binding to your eventA real-world exampleExisting uses for this feature9.4. Letting Event Handlers Provide Needed DataProblemSolutionDiscussionHow can we do this with jQuery 1.3+?How this was achieved before jQuery 1.3Allowing event handlers to prevent actions9.5. Creating Event-Driven PluginsProblemSolutionDiscussionAn exampleWhat happens if an element already has one of these events?How can I allow others to clean up the added event handlers?What’s the difference with other approaches?Allowing the plugin to accept commandsReturning an object with methods9.6. Getting Notified When jQuery Methods Are CalledProblemSolutionDiscussionOverloading the desired methodTriggering an event prior to the executionExecuting the original methodTriggering an event after the executionReturning the resultPutting it all togetherWhere to go from here?9.7. Using Objects’ Methods as Event ListenersProblemSolutionDiscussionWhere did the node go?The exampleThe objectsBinding the methods
10. HTML Form Enhancements from Scratch
Introduction10.1. Focusing a Text Input on Page LoadProblemSolutionDiscussion10.2. Disabling and Enabling Form ElementsProblemSolution 1Solution 2Discussion10.3. Selecting Radio Buttons AutomaticallyProblemSolution 1Solution 2Discussion10.4. (De)selecting All Checkboxes Using Dedicated LinksProblemSolutionDiscussion10.5. (De)selecting All Checkboxes Using a Single ToggleProblemSolutionDiscussion10.6. Adding and Removing Select OptionsProblemSolutionDiscussion10.7. Autotabbing Based on Character CountProblemSolutionDiscussion10.8. Displaying Remaining Character CountProblemSolutionDiscussion10.9. Constraining Text Input to Specific CharactersProblemSolutionDiscussion10.10. Submitting a Form Using AjaxProblemSolutionDiscussion10.11. Validating FormsProblemSolutionDiscussion
11. HTML Form Enhancements with Plugins
IntroductionBasic Approach11.1. Validating FormsProblemSolutionDiscussionMethodsCustom methodsRulesDependenciesCustom expressionsError messagesLocalizationError elementLayoutHandling the submitLimitations11.2. Creating Masked Input FieldsProblemSolutionDiscussionLimitations11.3. Autocompleting Text FieldsProblemSolutionDiscussion11.4. Selecting a Range of ValuesProblemSolutionDiscussion11.5. Entering a Range-Constrained ValueProblemSolutionDiscussionGoogle Maps integration11.6. Uploading Files in the BackgroundProblemSolutionDiscussion11.7. Limiting the Length of Text InputsProblemSolutionDiscussion11.8. Displaying Labels Above Input FieldsProblemSolutionDiscussion11.9. Growing an Input with Its ContentProblemSolutionDiscussion11.10. Choosing a DateProblemSolutionDiscussionLocalization
12. jQuery Plugins
Introduction12.1. Where Do You Find jQuery Plugins?ProblemSolutionDiscussionSearch through the jQuery Plugin RepositorySearch through Google CodeSearch through GitHubPerform a Google searchSearch through SourceForge12.2. When Should You Write a jQuery Plugin?ProblemSolutionDiscussionBuild a plugin if there is a potential audienceKnow and communicate the level of support you are willing to providePlan for participation from others12.3. Writing Your First jQuery PluginProblemSolutionWriting a custom jQuery methodWriting a custom jQuery functionDiscussion12.4. Passing Options into Your PluginProblemSolutionDiscussion12.5. Using the $ Shortcut in Your PluginProblemSolutionDiscussion12.6. Including Private Functions in Your PluginProblemSolutionDiscussion12.7. Supporting the Metadata PluginProblemSolutionDiscussion12.8. Adding a Static Function to Your PluginProblemSolutionDiscussion12.9. Unit Testing Your Plugin with QUnitProblemSolutionDiscussion
13. Interface Components from Scratch
Introduction13.1. Creating Custom Tool TipsProblemSolutionTool tip—HTML codeTool tip—jQuery codeDiscussion13.2. Navigating with a File-Tree ExpanderProblemSolutionFile tree—HTML codeFile tree—jQuery codeDiscussion13.3. Expanding an AccordionProblemSolutionAccordion—HTML codeAccordion—jQuery codeDiscussion13.4. Tabbing Through a DocumentProblemSolutionTabs—HTML codeTabs—jQuery codeDiscussion13.5. Displaying a Simple Modal WindowProblemSolutionModal—HTML codeModal—jQuery codeDiscussion13.6. Building Drop-Down MenusProblemSolutionDrop-down—HTML codeDrop-down—jQuery codeDiscussion13.7. Cross-Fading Rotating ImagesProblemSolutionRotator—HTML codeRotator—jQuery codeDiscussion13.8. Sliding PanelsProblemSolutionPanels—HTML codePanels—jQuery codeDiscussion
14. User Interfaces with jQuery UI
IntroductionInteractionsWidgetsEffectsBasic UsageHow This Chapter Is Organized14.1. Including the Entire jQuery UI SuiteProblemSolutionDiscussion14.2. Including an Individual jQuery UI Plugin or TwoProblemSolutionDiscussion14.3. Initializing a jQuery UI Plugin with Default OptionsProblemSolutionDiscussion14.4. Initializing a jQuery UI Plugin with Custom OptionsProblemSolutionDiscussion14.5. Creating Your Very Own jQuery UI Plugin DefaultsProblemSolutionDiscussion14.6. Getting and Setting jQuery UI Plugin OptionsProblemSolution 1: Getting the ValueSolution 2: Setting the ValueDiscussion14.7. Calling jQuery UI Plugin MethodsProblemSolutionDiscussion14.8. Handling jQuery UI Plugin EventsProblemSolution 1: Pass a Callback Function to the Event Name OptionSolution 2: Bind to the Custom Event Using the Event TypeDiscussion14.9. Destroying a jQuery UI PluginProblemSolutionDiscussion14.10. Creating a jQuery UI Music PlayerProblemSolutionHTML5 audioThe music playerPlay and pause buttonCurrent and total time labelsSlider track for song positionProgress bar in track to show bufferingVolume sliderWidget background and top styling
15. jQuery UI Theming
IntroductionUnderstanding the Components of jQuery UI CSS15.1. Styling jQuery UI Widgets with ThemeRollerProblemSolutionStep 1. Open ThemeRollerStep 2. Create and preview a themeStep 3. Download the jQuery UI widgets and themeStep 4. Merge files into your project directoryStep 5. Reference the theme stylesheet in your projectDiscussion15.2. Overriding jQuery UI Layout and Theme StylesProblemSolutionStep 1. Review the widget markup and styles for jQuery UI pluginsStep 2. Create an override stylesheetStep 3. Edit the style rules in your override stylesheetScope overridesWrite override rulesDiscussion15.3. Applying a Theme to Non-jQuery UI ComponentsProblemSolutionStep 1: Review available Framework classes to identify those you can apply to your componentsStep 2: Apply clickable-state Framework classesDiscussion15.4. Referencing Multiple Themes on a Single PageProblemSolutionStep 1. Create another theme using ThemeRollerStep 2. Scope the new theme and download itStep 3. Merge files into your project directoryStep 4. Reference the scoped theme stylesheet in your project15.5. Appendix: Additional CSS Resources
16. jQuery, Ajax, Data Formats: HTML, XML, JSON, JSONP
Introduction16.1. jQuery and AjaxProblemSolutionDiscussion16.2. Using Ajax on Your Whole SiteProblemSolutionDiscussion16.3. Using Simple Ajax with User FeedbackProblemSolutionDiscussion16.4. Using Ajax Shortcuts and Data TypesProblemSolutionDiscussion16.5. Using HTML Fragments and jQueryProblemSolutionDiscussion16.6. Converting XML to DOMProblemSolutionDiscussion16.7. Creating JSONProblemSolutionDiscussion16.8. Parsing JSONProblemSolutionDiscussion16.9. Using jQuery and JSONPProblemSolutionDiscussion
17. Using jQuery in Large Projects
Introduction17.1. Using Client-Side StorageProblemSolutionDiscussion17.2. Saving Application State for a Single SessionProblemSolutionDiscussion17.3. Saving Application State Between SessionsProblemSolutionDiscussion17.4. Using a JavaScript Template EngineProblemSolutionDiscussion17.5. Queuing Ajax RequestsProblemSolutionDiscussion17.6. Dealing with Ajax and the Back ButtonProblemSolutionDiscussion17.7. Putting JavaScript at the End of a PageProblemSolutionDiscussion
18. Unit Testing
Introduction18.1. Automating Unit TestingProblemSolutionDiscussion18.2. Asserting ResultsProblemSolutionok( boolean[, message ])equals( actual, expected[, message ])same( actual, expected[, message ])18.3. Testing Synchronous CallbacksProblemSolutionDiscussion18.4. Testing Asynchronous CallbacksProblemSolutionDiscussion18.5. Testing User ActionsProblemSolutionDiscussion18.6. Keeping Tests AtomicProblemSolutionDiscussion18.7. Grouping TestsProblemSolutionDiscussion18.8. Selecting Tests to RunProblemSolutionDiscussion
Index
Colophon
SPECIAL OFFER: Upgrade this ebook with O’Reilly
Copyright

404

Not Found

Either this content does not exist or you do not have access to it. Try searching for something new.

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

jQuery Cookbook

by Cody Lindley

404

Not Found