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

Loading data on demand

Ajax is just a means of loading data from the server into the web browser without a page refresh. This data can take many forms, and we have many options for what to do with it when it arrives. We'll see this by performing the same basic task, using different approaches.

We are going to build a page that displays entries from a dictionary, grouped by the starting letter of the dictionary entry. The HTML defining the content area of the page will look like this:

<div id="dictionary"> 
</div>

Our page will have no content to begin with. We are going to use jQuery's various Ajax methods to populate this <div> tag with dictionary entries.

Note

Getting the example codeYou can access the example code from the following GitHub repository: https://github.com/PacktPublishing/Learning-jQuery-3.

We're going to need a way to trigger the loading process, so we'll add some links for our event handlers to latch onto:

<div class="letters"> 
  <div class="letter...
Previous Section
End of Section 2
Next Section