Book Image

Learning jQuery 3 - Fifth Edition

By : Jonathan Chaffer, Karl Swedberg
Book Image

Learning jQuery 3 - Fifth Edition

By: Jonathan Chaffer, Karl Swedberg

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
Learning jQuery 3 - Fifth Edition
Jonathan Chaffer | Karl Swedberg
May, 2017 | 448 pages
No titles found
Table of Contents (23 chapters)
Title Page
Title Page
Credits
Credits
About the Authors
About the Authors
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Customer Feedback
Customer Feedback
Dedication
Dedication
Preface
Preface
Free Chapter
1
Getting Started
Getting Started
What jQuery does?
Why jQuery works well?
What's new in jQuery 3?
Making our first jQuery-powered web page
Plain JavaScript versus jQuery
Using development tools
Summary
2
Selecting Elements
Selecting Elements
Understanding the DOM
Using the $() function
CSS selectors
Selector specificity
Attribute selectors
Custom selectors
DOM traversal methods
Iterating over jQuery objects
Accessing DOM elements
Summary
Exercises
3
Handling Events
Handling Events
Performing tasks on page load
Handling simple events
Event propagation
Altering the journey - the event object
Removing an event handler
Simulating user interaction
Summary
Exercises
4
Styling and Animating
Styling and Animating
Modifying CSS with inline properties
Hiding and showing elements
Effects and duration
Creating custom animations
Simultaneous versus queued effects
Summary
Exercises
5
Manipulating the DOM
Manipulating the DOM
Manipulating attributes and properties
DOM tree manipulation
Copying elements
Content getter and setter methods
DOM manipulation methods in a nutshell
Summary
Exercises
6
Sending Data with Ajax
Sending Data with Ajax
Loading data on demand
Choosing a data format
Passing data to the server
Keeping an eye on the request
Error handling
Ajax and events
Deferreds and promises
Summary
Exercises
7
Using Plugins
Using Plugins
Using a plugin
Other types of plugins
The jQuery UI plugin library
The jQuery Mobile plugin library
Summary
Exercises
8
Developing Plugins
Developing Plugins
Using the dollar ($) alias in plugins
Adding new global functions
Adding jQuery object methods
Providing flexible method parameters
Creating plugins with the jQuery UI widget factory
Plugin design recommendations
Summary
Exercises
9
Advanced Selectors and Traversing
Advanced Selectors and Traversing
Selecting and traversing revisited
Customizing and optimizing selectors
DOM traversal under the hood
Summary
Exercises
10
Advanced Events
Advanced Events
Revisiting events
Event delegation
Defining custom events
Throttling events
Extending events
Summary
Further reading
Exercises
11
Advanced Effects
Advanced Effects
Animation revisited
Observing and interrupting animations
Using global effect properties
Multi-property easing
Using deferred objects
Taking fine-grained control of animations
Summary
Exercises
12
Advanced DOM Manipulation
Advanced DOM Manipulation
Sorting table rows
Moving and inserting elements revisited
Storing data alongside DOM elements
Using HTML5 custom data attributes
Sorting and building rows with JSON
Revisiting attribute manipulation
Summary
Exercises
13
Advanced Ajax
Advanced Ajax
Implementing progressive enhancement with Ajax
Handling Ajax errors
Using the jqXHR object
Throttling Ajax requests
Extending Ajax capabilities
Summary
Exercises
14
Testing JavaScript with QUnit
Testing JavaScript with QUnit
Downloading QUnit
Setting up the document
Organizing tests
Adding and running tests
Other types of tests
Practical considerations
Summary
15
Quick Reference
Quick Reference
Selector expressions
DOM traversal methods
Event methods
Effect methods
DOM manipulation methods
Ajax methods
Deferred objects
Miscellaneous properties and functions

Content getter and setter methods

It would be nice to be able to modify the pull quote a bit by dropping some words and replacing them with ellipses to keep the content brief. To demonstrate this, we have wrapped a few words of the example text in a <span class="drop"> tag.

The easiest way to accomplish this replacement is to directly specify the new HTML entity that is to replace the old one. The .html() method is perfect for this:

$(() => { 
  $('span.pull-quote')
    .each((i, span) => {
      $(span)
        .clone()
        .addClass('pulled')
        .find('span.drop')
          .html('&hellip;')
          .end()
        .prependTo(
          $(span)
            .parent()
            .css('position', 'relative')
        );
    });
});

Listing 5.20

The new lines in Listing 5.20 rely on the DOM traversal techniques we learned in Chapter 2, Selecting Elements. We use .find() to search inside the pull quote for any <span class="drop"> elements, operate on them, and then...

Previous Section
End of Section 5
Next Section