O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning jQuery 3 - Fifth Edition

Book Description

Create efficient and smart web applications with jQuery 3.0 using this step-by-step practical tutorial

About This Book

  • Create a fully featured and responsive client-side application using jQuery
  • Explore all the latest features of jQuery 3.0 and code examples updated to reflect modern JavaScript environments
  • Develop high performance interactive pages

Who This Book Is For

This book is ideal for client-side JavaScript developers. You do need to have any previous experience with jQuery, although basic JavaScript programming knowledge is necessary.

What You Will Learn

  • Create custom interactive elements for your web designs
  • Find out how to create the best user interface for your web applications
  • Use selectors in a variety of ways to get anything you want from a page when you need it
  • Master events to bring your web pages to life
  • Add flair to your actions with a variety of different animation effects
  • Discover the latest features available in jQuery with the latest update of this incredibly popular title
  • Using jQuery npm Packages

In Detail

If you are a web developer and want to create web applications that look good, are efficient, have rich user interfaces, and integrate seamlessly with any backend using AJAX, then this book is the ideal match for you. We’ll show you how you can integrate jQuery 3.0 into your web pages, avoid complex JavaScript code, create brilliant animation effects for your web applications, and create a flawless app.

We start by configuring and customising the jQuery environment, and getting hands-on with DOM manipulation. Next, we’ll explore event handling advanced animations, creating optimised user interfaces, and building useful third-party plugins. Also, we'll learn how to integrate jQuery with your favourite back-end framework.

Moving on, we’ll learn how the ECMAScript 6 features affect your web development process with jQuery. we’ll discover how to use the newly introduced JavaScript promises and the new animation API in jQuery 3.0 in great detail, along with sample code and examples.

By the end of the book, you will be able to successfully create a fully featured and efficient single page web application and leverage all the new features of jQuery 3.0 effectively.

Style and approach

Create efficient client-side apps that look great and run seamlessly across all devices with this step-by-step practical guide. There are illustrative examples for those who need extra help to get started with jQuery web development.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. Preface
    1. What this book covers
    2. What you need for this book
    3. Who this book is for
    4. Conventions
    5. Reader feedback
    6. Customer support
      1. Downloading the example code
      2. Errata
      3. Piracy
      4. Questions
  2. Getting Started
    1. What jQuery does?
    2. Why jQuery works well?
    3. What's new in jQuery 3?
      1. Browser support
      2. Deferred objects
      3. Asynchronous document-ready
      4. All the rest
    4. Making our first jQuery-powered web page
      1. Downloading jQuery
      2. Setting up jQuery in an HTML document
      3. Adding our jQuery code
        1. Finding the poem text
        2. Injecting the new class
        3. Executing the code
      4. The finished product
    5. Plain JavaScript versus jQuery
    6. Using development tools
      1. Chrome Developer Tools
    7. Summary
  3. Selecting Elements
    1. Understanding the DOM
    2. Using the $() function
    3. CSS selectors
      1. Styling list-item levels
    4. Selector specificity
    5. Attribute selectors
      1. Styling links
    6. Custom selectors
      1. Styling alternate rows
      2. Finding elements based on textual content
      3. Form selectors
    7. DOM traversal methods
      1. Styling specific cells
      2. Chaining
    8. Iterating over jQuery objects
    9. Accessing DOM elements
    10. Summary
      1. Further reading
    11. Exercises
  4. Handling Events
    1. Performing tasks on page load
      1. Timing of code execution
      2. Handling multiple scripts on one page
      3. Passing an argument to the document ready callback
    2. Handling simple events
      1. A simple style switcher
      2. Enabling the other buttons
      3. Making use of event handler context
      4. Consolidating code using event context
      5. Shorthand events
      6. Showing and hiding page elements
    3. Event propagation
      1. The journey of an event
      2. Side effects of event bubbling
    4. Altering the journey - the event object
      1. Event targets
      2. Stopping event propagation
      3. Preventing default actions
      4. Delegating events
      5. Using built-in event delegation capabilities
    5. Removing an event handler
      1. Giving namespaces to event handlers
      2. Rebinding events
    6. Simulating user interaction
      1. Reacting to keyboard events
    7. Summary
      1. Further reading
    8. Exercises
  5. Styling and Animating
    1. Modifying CSS with inline properties
      1. Setting computed style property values
      2. Using vendor-specific style properties
    2. Hiding and showing elements
    3. Effects and duration
      1. Speeding in
      2. Fading in and fading out
      3. Sliding up and sliding down
      4. Toggling visibility
    4. Creating custom animations
      1. Building effects by hand
      2. Animating multiple properties at once
        1. Positioning with CSS
    5. Simultaneous versus queued effects
      1. Working with a single set of elements
        1. Bypassing the queue
        2. Queuing effects manually
      2. Working with multiple sets of elements
        1. Queuing with callbacks
      3. In a nutshell
    6. Summary
      1. Further reading
    7. Exercises
  6. Manipulating the DOM
    1. Manipulating attributes and properties
      1. Non-class attributes
        1. Value callbacks
      2. Data attributes
      3. DOM element properties
      4. The value of form controls
    2. DOM tree manipulation
      1. The $() function revisited
      2. Creating new elements
      3. Inserting new elements
      4. Moving elements
      5. Wrapping elements
        1. Explicit iteration
      6. Using inverted insertion methods
    3. Copying elements
      1. Cloning for pull quotes
    4. Content getter and setter methods
    5. DOM manipulation methods in a nutshell
    6. Summary
      1. Further reading
    7. Exercises
  7. Sending Data with Ajax
    1. Loading data on demand
      1. Appending HTML
      2. Working with JavaScript objects
        1. Retrieving JSON
        2. Using global jQuery functions
        3. Executing a script
      3. Loading an XML document
    2. Choosing a data format
    3. Passing data to the server
      1. Performing a GET request
      2. Serializing a form
    4. Keeping an eye on the request
    5. Error handling
    6. Ajax and events
    7. Deferreds and promises
      1. Performing Ajax calls on page load
      2. Using fetch()
    8. Summary
      1. Further reading
    9. Exercises
  8. Using Plugins
    1. Using a plugin
      1. Downloading and referencing the Cycle plugin
      2. Calling a plugin method
      3. Specifying plugin method parameters
      4. Modifying parameter defaults
    2. Other types of plugins
      1. Custom selectors
      2. Global function plugins
    3. The jQuery UI plugin library
      1. Effects
        1. Color animations
        2. Class animations
        3. Advanced easing
        4. Additional effects
      2. Interaction components
      3. Widgets
      4. jQuery UI ThemeRoller
    4. The jQuery Mobile plugin library
      1. HTML5 custom data attributes
      2. Mobile navigation
      3. Delivering multiple pages in one document
      4. Interactive elements
        1. List views
        2. Toolbar buttons
      5. Advanced features
    5. Summary
    6. Exercises
  9. Developing Plugins
    1. Using the dollar ($) alias in plugins
    2. Adding new global functions
      1. Adding multiple functions
        1. Extending the global jQuery object
        2. Isolating functions within namespaces
    3. Adding jQuery object methods
      1. Object method context
      2. Implicit iteration
      3. Enabling method chaining
    4. Providing flexible method parameters
      1. Options objects
      2. Default parameter values
      3. Callback functions
      4. Customizable defaults
    5. Creating plugins with the jQuery UI widget factory
      1. Creating a widget
      2. Destroying widgets
      3. Enabling and disabling widgets
      4. Accepting widget options
      5. Adding methods
      6. Triggering widget events
    6. Plugin design recommendations
      1. Distributing a plugin
    7. Summary
    8. Exercises
  10. Advanced Selectors and Traversing
    1. Selecting and traversing revisited
      1. Dynamic table filtering
      2. Striping table rows
      3. Combining filtering and striping
      4. More selector and traversal methods
    2. Customizing and optimizing selectors
      1. Writing a custom selector plugin
      2. Selector performance
        1. Sizzle selector implementation
        2. Testing selector speed
    3. DOM traversal under the hood
      1. jQuery traversal properties
      2. The DOM element stack
      3. Writing a DOM traversal method plugin
      4. DOM traversal performance
        1. Improving performance using chaining
        2. Improving performance with caching
    4. Summary
      1. Further reading
    5. Exercises
  11. Advanced Events
    1. Revisiting events
      1. Loading additional pages of data
      2. Displaying data on hover
    2. Event delegation
      1. Using jQuery's delegation capabilities
      2. Choosing a delegation scope
      3. Delegating early
    3. Defining custom events
      1. Infinite scrolling
      2. Custom event parameters
    4. Throttling events
      1. Other ways to perform throttling
    5. Extending events
      1. More about special events
    6. Summary
    7. Further reading
    8. Exercises
  12. Advanced Effects
    1. Animation revisited
    2. Observing and interrupting animations
      1. Determining the animation state
      2. Halting a running animation
        1. Caution when halting animations
    3. Using global effect properties
      1. Disabling all effects
      2. Defining effect durations
    4. Multi-property easing
    5. Using deferred objects
      1. Animation promises
    6. Taking fine-grained control of animations
    7. Summary
      1. Further reading
    8. Exercises
  13. Advanced DOM Manipulation
    1. Sorting table rows
      1. Sorting tables on the server
      2. Sorting tables using Ajax
      3. Sorting tables within the browser
    2. Moving and inserting elements revisited
      1. Adding links around existing text
      2. Sorting simple JavaScript arrays
      3. Sorting DOM elements
    3. Storing data alongside DOM elements
      1. Performing additional pre-computation
      2. Storing non-string data
      3. Alternating sort directions
    4. Using HTML5 custom data attributes
    5. Sorting and building rows with JSON
      1. Modifying the JSON object
      2. Rebuilding content on demand
    6. Revisiting attribute manipulation
      1. Using shorthand element creation syntax
      2. DOM manipulation hooks
        1. Writing a CSS hook
    7. Summary
      1. Further reading
    8. Exercises
  14. Advanced Ajax
    1. Implementing progressive enhancement with Ajax
      1. Harvesting JSONP data
    2. Handling Ajax errors
    3. Using the jqXHR object
      1. Ajax promises
      2. Caching responses
    4. Throttling Ajax requests
    5. Extending Ajax capabilities
      1. Data type converters
      2. Adding Ajax prefilters
      3. Defining alternate transports
    6. Summary
      1. Further reading
    7. Exercises
  15. Appnedix A – Testing JavaScript with QUnit
    1. Downloading QUnit
    2. Setting up the document
    3. Organizing tests
    4. Adding and running tests
      1. Asynchronous testing
    5. Other types of tests
    6. Practical considerations
      1. Further reading
    7. Summary
  16. Appendix B – Quick Reference
    1. Selector expressions
      1. Simple CSS
      2. Position among siblings
      3. Position among matched elements
      4. Attributes
      5. Forms
      6. Miscellaneous selectors
    2. DOM traversal methods
      1. Filtering
      2. Descendants
      3. Siblings
      4. Ancestors
      5. Collection manipulation
      6. Working with selected elements
    3. Event methods
      1. Binding
      2. Shorthand binding
      3. Triggering
      4. Shorthand triggering
      5. Utility
    4. Effect methods
      1. Predefined effects
      2. Custom animations
      3. Queue manipulation
    5. DOM manipulation methods
      1. Attributes and properties
      2. Content
      3. CSS
      4. Dimensions
      5. Insertion
      6. Replacement
      7. Removal
      8. Copying
      9. Data
    6. Ajax methods
      1. Issuing requests
      2. Request monitoring
      3. Configuration
      4. Utilities
    7. Deferred objects
      1. Object creation
      2. Methods of deferred objects
      3. Methods of promise objects
    8. Miscellaneous properties and functions
      1. Properties of the jQuery object
      2. Arrays and objects
      3. Object introspection
      4. Other