31,19 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Fachliteratur
- Sprache: Englisch
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.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 429
Veröffentlichungsjahr: 2017
Ähnliche
Title Page
Fifth Edition
BIRMINGHAM - MUMBAI
Copyright
Learning jQuery 3
Fifth Edition
Copyright © 2017 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published : July 2007
Second edition: Feburary 2009
Third edition: September 2011
Fourth edition: June 2013
Fifth edition: May 2017
Production reference: 1240517
ISBN 978-1-78588-298-2
www.packtpub.com
Credits
Authors
Adam Boduch
Jonathan Chaffer
Karl Swedberg
Copy Editor
Charlotte Carneiro
Reviewer
Andrew Kurz
Project Coordinator
Devanshi Doshi
Commissioning Editor
Amarabha Banerjee
Proofreader
Safis Editing
Acquisition Editor
Smeet Thakkar
Indexer
Tejal Daruwale Soni
Content Development Editor
Onkar Wani
Graphics
Jason Monteiro
Technical Editor
Rashil Shah
Production Coordinator
Nilesh Mohite
About the Authors
Adam Boduch has been involved with large-scale JavaScript development for nearly 10 years. Before moving to the frontend, he worked on several large-scale cloud computing products, using Python and Linux. No stranger to complexity, Adam has practical experience with real-world software systems, and the scaling challenges they pose.
He is the author of several JavaScript books, including React and React Native, and is passionate about innovative user experiences and high performance.
Jonathan Chaffer is a member of Rapid Development Group, a web development firm located in Grand Rapids, Michigan. His work there includes overseeing and implementing projects in a wide variety of technologies, with an emphasis on PHP, MySQL, and JavaScript. In the open source community, he has been very active in the Drupal CMS project, which has adopted jQuery as its JavaScript framework of choice. He is the creator of the Content Construction Kit, now a part of the Drupal core used for managing structured content. He is also responsible for major overhauls of Drupal's menu system and developer API reference. In his spare time, he designs board and card games for the hobby market. He lives in Grand Rapids with his wife, Jennifer.
Karl Swedberg is a web developer at Fusionary Media in Grand Rapids, Michigan, where he spends much of his time writing both client-side and server-side JavaScript. When he isn't coding, he likes to hang out with his family, roast coffee in his garage, and exercise at the local gym.
About the Reviewer
Andrew Kurz is a UI/UX designer and developer with over 12 years of experience designing and building websites and online applications. He has worked for small start-ups, large corporations, and everything in between. He enjoys learning new technology and appreciates attractive, easy-to-use applications. He lives in Atlanta, GA, with his wife and three children. You can view his portfolio and contact him at www.kurzstudio.com.
www.PacktPub.com
For support files and downloads related to your book, please visit www.PacktPub.com.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.comand as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
https://www.packtpub.com/mapt
Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt books and video courses, as well as industry-leading tools to help you plan your personal development and advance your career.
Why subscribe?
Fully searchable across every book published by Packt
Copy and paste, print, and bookmark content
On demand and accessible via a web browser
Customer Feedback
Thanks for purchasing this Packt book. At Packt, quality is at the heart of our editorial process. To help us improve, please leave us an honest review on this book's Amazon page at https://www.amazon.com/dp/1785882988.
If you'd like to join our team of regular reviewers, you can e-mail us at [email protected]. We award our regular reviewers with free eBooks and videos in exchange for their valuable feedback. Help us be relentless in improving our products!
Dedication
Table of Contents
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
Getting Started
What jQuery does?
Why jQuery works well?
What's new in jQuery 3?
Browser support
Deferred objects
Asynchronous document-ready
All the rest
Making our first jQuery-powered web page
Downloading jQuery
Setting up jQuery in an HTML document
Adding our jQuery code
Finding the poem text
Injecting the new class
Executing the code
The finished product
Plain JavaScript versus jQuery
Using development tools
Chrome Developer Tools
Summary
Selecting Elements
Understanding the DOM
Using the $() function
CSS selectors
Styling list-item levels
Selector specificity
Attribute selectors
Styling links
Custom selectors
Styling alternate rows
Finding elements based on textual content
Form selectors
DOM traversal methods
Styling specific cells
Chaining
Iterating over jQuery objects
Accessing DOM elements
Summary
Further reading
Exercises
Handling Events
Performing tasks on page load
Timing of code execution
Handling multiple scripts on one page
Passing an argument to the document ready callback
Handling simple events
A simple style switcher
Enabling the other buttons
Making use of event handler context
Consolidating code using event context
Shorthand events
Showing and hiding page elements
Event propagation
The journey of an event
Side effects of event bubbling
Altering the journey - the event object
Event targets
Stopping event propagation
Preventing default actions
Delegating events
Using built-in event delegation capabilities
Removing an event handler
Giving namespaces to event handlers
Rebinding events
Simulating user interaction
Reacting to keyboard events
Summary
Further reading
Exercises
Styling and Animating
Modifying CSS with inline properties
Setting computed style property values
Using vendor-specific style properties
Hiding and showing elements
Effects and duration
Speeding in
Fading in and fading out
Sliding up and sliding down
Toggling visibility
Creating custom animations
Building effects by hand
Animating multiple properties at once
Positioning with CSS
Simultaneous versus queued effects
Working with a single set of elements
Bypassing the queue
Queuing effects manually
Working with multiple sets of elements
Queuing with callbacks
In a nutshell
Summary
Further reading
Exercises
Manipulating the DOM
Manipulating attributes and properties
Non-class attributes
Value callbacks
Data attributes
DOM element properties
The value of form controls
DOM tree manipulation
The $() function revisited
Creating new elements
Inserting new elements
Moving elements
Wrapping elements
Explicit iteration
Using inverted insertion methods
Copying elements
Cloning for pull quotes
Content getter and setter methods
DOM manipulation methods in a nutshell
Summary
Further reading
Exercises
Sending Data with Ajax
Loading data on demand
Appending HTML
Working with JavaScript objects
Retrieving JSON
Using global jQuery functions
Executing a script
Loading an XML document
Choosing a data format
Passing data to the server
Performing a GET request
Serializing a form
Keeping an eye on the request
Error handling
Ajax and events
Deferreds and promises
Performing Ajax calls on page load
Using fetch()
Summary
Further reading
Exercises
Using Plugins
Using a plugin
Downloading and referencing the Cycle plugin
Calling a plugin method
Specifying plugin method parameters
Modifying parameter defaults
Other types of plugins
Custom selectors
Global function plugins
The jQuery UI plugin library
Effects
Color animations
Class animations
Advanced easing
Additional effects
Interaction components
Widgets
jQuery UI ThemeRoller
The jQuery Mobile plugin library
HTML5 custom data attributes
Mobile navigation
Delivering multiple pages in one document
Interactive elements
List views
Toolbar buttons
Advanced features
Summary
Exercises
Developing Plugins
Using the dollar ($) alias in plugins
Adding new global functions
Adding multiple functions
Extending the global jQuery object
Isolating functions within namespaces
Adding jQuery object methods
Object method context
Implicit iteration
Enabling method chaining
Providing flexible method parameters
Options objects
Default parameter values
Callback functions
Customizable defaults
Creating plugins with the jQuery UI widget factory
Creating a widget
Destroying widgets
Enabling and disabling widgets
Accepting widget options
Adding methods
Triggering widget events
Plugin design recommendations
Distributing a plugin
Summary
Exercises
Advanced Selectors and Traversing
Selecting and traversing revisited
Dynamic table filtering
Striping table rows
Combining filtering and striping
More selector and traversal methods
Customizing and optimizing selectors
Writing a custom selector plugin
Selector performance
Sizzle selector implementation
Testing selector speed
DOM traversal under the hood
jQuery traversal properties
The DOM element stack
Writing a DOM traversal method plugin
DOM traversal performance
Improving performance using chaining
Improving performance with caching
Summary
Further reading
Exercises
Advanced Events
Revisiting events
Loading additional pages of data
Displaying data on hover
Event delegation
Using jQuery's delegation capabilities
Choosing a delegation scope
Delegating early
Defining custom events
Infinite scrolling
Custom event parameters
Throttling events
Other ways to perform throttling
Extending events
More about special events
Summary
Further reading
Exercises
Advanced Effects
Animation revisited
Observing and interrupting animations
Determining the animation state
Halting a running animation
Caution when halting animations
Using global effect properties
Disabling all effects
Defining effect durations
Multi-property easing
Using deferred objects
Animation promises
Taking fine-grained control of animations
Summary
Further reading
Exercises
Advanced DOM Manipulation
Sorting table rows
Sorting tables on the server
Sorting tables using Ajax
Sorting tables within the browser
Moving and inserting elements revisited
Adding links around existing text
Sorting simple JavaScript arrays
Sorting DOM elements
Storing data alongside DOM elements
Performing additional pre-computation
Storing non-string data
Alternating sort directions
Using HTML5 custom data attributes
Sorting and building rows with JSON
Modifying the JSON object
Rebuilding content on demand
Revisiting attribute manipulation
Using shorthand element creation syntax
DOM manipulation hooks
Writing a CSS hook
Summary
Further reading
Exercises
Advanced Ajax
Implementing progressive enhancement with Ajax
Harvesting JSONP data
Handling Ajax errors
Using the jqXHR object
Ajax promises
Caching responses
Throttling Ajax requests
Extending Ajax capabilities
Data type converters
Adding Ajax prefilters
Defining alternate transports
Summary
Further reading
Exercises
Appnedix A – Testing JavaScript with QUnit
Downloading QUnit
Setting up the document
Organizing tests
Adding and running tests
Asynchronous testing
Other types of tests
Practical considerations
Further reading
Summary
Appendix B – Quick Reference
Selector expressions
Simple CSS
Position among siblings
Position among matched elements
Attributes
Forms
Miscellaneous selectors
DOM traversal methods
Filtering
Descendants
Siblings
Ancestors
Collection manipulation
Working with selected elements
Event methods
Binding
Shorthand binding
Triggering
Shorthand triggering
Utility
Effect methods
Predefined effects
Custom animations
Queue manipulation
DOM manipulation methods
Attributes and properties
Content
CSS
Dimensions
Insertion
Replacement
Removal
Copying
Data
Ajax methods
Issuing requests
Request monitoring
Configuration
Utilities
Deferred objects
Object creation
Methods of deferred objects
Methods of promise objects
Miscellaneous properties and functions
Properties of the jQuery object
Arrays and objects
Object introspection
Other
Preface
I started using jQuery in 2007, and I'm still using it today. Granted, a lot has happened between now and then: new JavaScript libraries, more consistency across browsers, and enhancements to JavaScript itself. The one thing that hasn't changed in 10 years is the expressiveness and conciseness of jQuery. Even with all the new hotness out there today, jQuery remains the go-to tool of choice for getting work done quickly, and efficiently.
This book has a long history behind it, and it remains intact in its fifth edition. It has been a successful book because it is straight to the point and easy to follow. I've done my best to preserve what has worked so well for this book. My goal is to modernize learning jQuery for the current web-development landscape.
What this book covers
Chapter 1, Getting Started, gets your feet wet with the jQuery JavaScript library. The chapter begins with a description of jQuery and what it can do for you. It then walks you through downloading and setting up the library as well as writing your first script.
Chapter 2, Selecting Elements, teaches you how to use jQuery's selector expressions and DOM-traversal methods to find elements on the page, wherever they may be. You'll use jQuery to apply styling to a diverse set of page elements, sometimes in a way that pure CSS cannot.
Chapter 3, Handling Events, walks you through jQuery's event-handling mechanism to fire off behaviors when browser events occur. You'll see how jQuery makes it easy to attach events to elements unobtrusively, even before the page finishes loading. Also, you'll get an overview of deeper topics, such as event bubbling, delegation, and namespacing.
Chapter 4, Styling and Animating, introduces you to jQuery's animation techniques and how to hide, show, and move page elements with effects that are both useful and pleasing to the eye.
Chapter 5, Manipulating the DOM, teaches you how to change your page on command. This chapter will also teach you how to alter the very structure of an HTML document as well as adding to its content on the fly.
Chapter 6, Sending Data with Ajax, walks you through many ways in which jQuery makes it easy to access server-side functionality without resorting to clunky page refreshes. With the basic components of the library well in hand, you will be ready to explore how the library can expand to fit your needs.
Chapter 7, Using Plugins, shows you how to find, install, and use plugins, including the powerful jQuery UI and jQuery Mobile plugin libraries.
Chapter 8, Developing Plugins, teaches you how to take advantage of jQuery's impressive extension capabilities to develop your own plugins from the ground up. You'll create your own utility functions, add jQuery object methods, and discover the jQuery UI widget factory. Next, you'll take a second tour through jQuery's building blocks, learning more advanced techniques.
Chapter 9, Advanced Selectors and Traversing, refines your knowledge of selectors and traversals, gaining the ability to optimize selectors for performance, manipulating the DOM element stack, and writing plugins that expand selecting and traversing capabilities.
Chapter 10, Advanced Events, dives further into techniques such as delegation and throttling that can greatly improve event-handling performance. You'll also create custom and special events that add even more capabilities to the jQuery library.
Chapter 11, Advanced Effects, shows you how to fine-tune the visual effects of jQuery that can be provided by crafting custom-easing functions and reacting to each step of an animation. You'll gain the ability to manipulate animations as they occur and schedule actions with custom queuing.
Chapter 12, Advanced DOM Manipulation, provides you with more practice modifying the DOM with techniques such as attaching arbitrary data to elements. You'll also learn how to extend the way jQuery processes CSS properties on elements.
Chapter 13, Advanced Ajax, helps you achieve a greater understanding of Ajax transactions, including the jQuery deferred object system for handling data that may become available at a later time.
Appendix A, Testing JavaScript with QUnit, teaches you about the QUnit library, which is used for the unit testing JavaScript programs. This library will be a great addition to your toolkit for developing and maintaining highly sophisticated web applications.
Appendix B, Quick Reference, provides a glimpse of the entire jQuery library, including every one of its methods and selector expressions. Its easy-to-scan format is perfect for those moments when you know what you want to do, but you're just unsure about the right method name or selector.
What you need for this book
In order to run the example code demonstrated in this book, you need a modern web browser, such as Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge.
To experiment with the examples and to work on the chapter-ending exercises, you will also need the following:
A basic text editor
Web development tools for the browser, such as Chrome Developer Tools or Firebug (as described in the
Using development tools
section of
Chapter 1
,
Getting Started
)
The full code package for each chapter, which includes a copy of the jQuery library (seen in the
Downloading the example code
section)
Additionally, to run some of the Ajax examples in Chapter 6, Sending Data with Ajax and beyond, you will need Node.js.
Who this book is for
This book is ideal for client-side JavaScript developers. You do not need to have any previous experience with jQuery, although basic JavaScript programming knowledge is necessary.
Conventions
In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "When we instruct jQuery to find all elements with the classcollapsibleand hide them, there is no need to loop through each returned element."
A block of code is set as follows:
body { background-color: #fff; color: #000; font-family: Helvetica, Arial, sans-serif; }h1, h2, h3 { margin-bottom: .2em; }.poem { margin: 0 2em; } .highlight { background-color: #ccc; border: 1px solid #888; font-style: italic; margin: 0.5em 0; padding: 0.5em; }
New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "TheSourcestab allows us to view the contents of all loaded scripts on the page."
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail [email protected], and mention the book's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files for this book 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 files e-mailed directly to you.
You can download the code files by following these steps:
Log in or register to our website using your e-mail address and password.
Hover the mouse pointer on the
SUPPORT
tab at the top.
Click on
Code Downloads & Errata
.
Enter the name of the book in the
Search
box.
Select the book for which you're looking to download the code files.
Choose from the drop-down menu where you purchased this book from.
Click on
Code Download
.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR / 7-Zip for Windows
Zipeg / iZip / UnRarX for Mac
7-Zip / PeaZip for Linux
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Learning-jQuery-3. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code-we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at [email protected] with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
Questions
If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.
Getting Started
Today's World Wide Web (WWW) is a dynamic environment and its users set a high bar for both the style and function of sites. To build interesting and interactive sites, developers are turning to JavaScript libraries, such as jQuery, to automate common tasks and to simplify complicated ones. One reason the jQuery library is a popular choice is its ability to assist in a wide range of tasks.
It can seem challenging to know where to begin because jQuery performs so many different functions. Yet, there is a coherence and symmetry to the design of the library; many of its concepts are borrowed from the structure of HTML and Cascading Style Sheets (CSS). The library's design lends itself to a quick start for designers with little programming experience, since many have more experience with these technologies than they do with JavaScript. In fact, in this opening chapter, we'll write a functioning jQuery program in just three lines of code. On the other hand, experienced programmers will also appreciate this conceptual consistency.
In this chapter, we will cover:
The primary features of jQuery
Setting up a jQuery code environment
A simple working jQuery script example
Reasons to choose jQuery over plain JavaScript
Common JavaScript development tools
What jQuery does?
The jQuery library provides a general-purpose abstraction layer for common web scripting, and it is therefore useful in almost every scripting situation. Its extensible nature means that we could never cover all the possible uses and functions in a single book, as plugins are constantly being developed to add new abilities. The core features, though, assist us in accomplishing the following tasks:
Access elements in a document
: Without a JavaScript library, web developers often need to write many lines of code to traverse the
Document Object Model
(
DOM
) tree and locate specific portions of an HTML document's structure. With jQuery, developers have a robust and efficient selector mechanism at their disposal, making it easy to retrieve the exact piece of the document that needs to be inspected or manipulated.
$('div.content').find('p');
Modify the appearance of a web page
: CSS offers a powerful method of influencing the way a document is rendered, but it falls short when not all web browsers support the same standards. With jQuery, developers can bridge this gap, relying on the same standards support across all browsers. In addition, jQuery can change the classes or individual style properties applied to a portion of the document even after the page has been rendered.
$('ul > li:first').addClass('active');
Alter the content of a document
: Not limited to mere cosmetic changes, jQuery can modify the content of a document itself with a few keystrokes. Text can be changed, images can be inserted or swapped, lists can be reordered, or the entire structure of the HTML can be rewritten and extended--all with a single easy-to-use
Application Programming Interface
(
API
).
$('#container').append('<a href="more.html">more</a>');
Respond to a user's interaction
: Even the most elaborate and powerful behaviors are not useful if we can't control when they take place. The jQuery library offers an elegant way to intercept a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.
$('button.show-details').click(() => { $('div.details').show(); });
Animate changes being made to a document
: To effectively implement such interactive behaviors, a designer must also provide visual feedback to the user. The jQuery library facilitates this by providing an array of effects such as fades and wipes, as well as a toolkit for crafting new ones.
$('div.details').slideDown();
Retrieve information from a server without refreshing a page
: This pattern is known as
Ajax
, which originally stood for
Asynchronous JavaScript and XML
, but has since come to represent a much greater set of technologies for communicating between the client and the server. The jQuery library removes the browser-specific complexity from this process, allowing developers to focus on the server-side functionality.
$('div.details').load('more.html #content');
Why jQuery works well?
With the resurgence of interest in dynamic HTML comes a proliferation of JavaScript frameworks. Some are specialized, focusing on just one or two of the tasks previously mentioned. Others attempt to catalog every possible behavior and animation and serves these up prepackaged. To maintain the wide range of features outlined earlier while remaining relatively compact, jQuery employs several strategies:
Leverage knowledge of CSS
: By basing the mechanism for locating page elements on CSS selectors, jQuery inherits a terse yet legible way of expressing a document's structure. The jQuery library becomes an entry point for designers who want to add behaviors to their pages because a prerequisite for doing professional web development is knowledge of CSS syntax.
Support extensions
: In order to avoid "feature creep", jQuery relegates special-case uses to plugins. The method for creating new plugins is simple and well documented, which has spurred the development of a wide variety of inventive and useful modules. Even most of the features in the basic jQuery download are internally realized through the plugin architecture and can be removed if desired, yielding an even smaller library.
Abstract away browser quirks
: An unfortunate reality of web development is that each browser has its own set of deviations from published standards. A significant portion of any web application can be relegated to handling features differently on each platform. While the ever-evolving browser landscape makes a perfectly browser-neutral codebase impossible for some advanced features, jQuery adds an abstraction layer that normalizes the common tasks, reducing the size of code while tremendously simplifying it.
Always work with sets
: When we instruct jQuery to find all elements with the class
collapsible
and hide them, there is no need to loop through each returned element. Instead, methods such as
.hide()
are designed to automatically work on sets of objects instead of individual ones. This technique, called
implicit iteration
, means that many looping constructs become unnecessary, shortening code considerably.
Allow multiple actions in one line
: To avoid overuse of temporary variables or wasteful repetition, jQuery employs a programming pattern called
chaining
for the majority of its methods. This means that the result of most operations on an object is the object itself, ready for the next action to be applied to it.
These strategies keep the file size of the jQuery package small, while at the same time providing techniques for keeping our custom code that uses the library compact as well.
The elegance of the library comes about partly by design and partly due to the evolutionary process spurred by the vibrant community that has sprung up around the project. Users of jQuery gather to discuss not only the development of plugins but also enhancements to the core library. The users and developers also assist in continually improving the official project documentation, which can be found at http://api.jquery.com.
Despite all the efforts required to engineer such a flexible and robust system, the end product is free for all to use. This open source project is licensed under the MIT License to permit free use of jQuery on any site and facilitate its use within proprietary software. If a project requires it, developers can relicense jQuery under the GNU Public License for inclusion in other GNU-licensed open source projects.
What's new in jQuery 3?
The changes introduced in jQuery 3 are quite subtle compared to the changes introduced in jQuery 2. Most of what's changed is under the hood. Let's take a brief look at some changes and how they're likely to impact an existing jQuery project. You can review the fine-grained details (https://jquery.com/upgrade-guide/3.0) while reading this book.
Browser support
The biggest change with browser support in jQuery 3 is Internet Explorer. Having to support older versions of this browser is the bane of any web developer's existence. jQuery 3 has taken a big step forward by only supporting IE9+. The support policy for other browsers is the current version and the previous version.
Deferred objects
The Deferred object was introduced in jQuery 1.5 as a means to better manage asynchronous behavior. They were kind of like ES2015 promises, but different enough that they weren't interchangeable. Now that the ES2015 version of JavaScript is commonplace in modern browsers, the Deferred object is fully compatible with native Promise objects. This means that quite a lot has changed with the old Deferred implementation.
Asynchronous document-ready
The idea that the document-ready callback function is executed asynchronously might seem counterintuitive at first. There are a couple of reasons this is the case in jQuery 3. First, the $(() => {}) expression returns a Deferred instance, and these now behave like native promises. The second reason is that there's a jQuery.ready promise that resolves when the document is ready. As you'll see later on in this book, you can use this promise alongside other promises to perform other asynchronous tasks before the DOM is ready to render.
All the rest
There are a number of other breaking changes to the API that were introduced in jQuery 3 that we won't dwell on here. The upgrade guide that I mentioned earlier goes into detail about each of these changes and how to deal with them. However, I'll point out functionality that's new or different in jQuery 3 as we make our way through this book.
Making our first jQuery-powered web page
Now that we have covered the range of features available to us with jQuery, we can examine how to put the library into action. To get started, we need to download a copy of jQuery.
Downloading jQuery
No installation is required. To use jQuery, we just need a publicly available copy of the file, no matter whether that copy is on an external site or our own. Since JavaScript is an interpreted language, there is no compilation or build phase to worry about. Whenever we need a page to have jQuery available, we will simply refer to the file's location from a <script> element in the HTML document.
The official jQuery website (http://jquery.com/) always has the most up-to-date stable version of the library, which can be downloaded right from the home page of the site. Several versions of jQuery may be available at any given moment; the most appropriate for us as site developers will be the latest uncompressed version of the library. This can be replaced with a compressed version in production environments.
As jQuery's popularity has grown, companies have made the file freely available through their Content DeliveryNetworks (CDNs). Most notably, Google (https://developers.google.com/speed/libraries/devguide), Microsoft (http://www.asp.net/ajaxlibrary/cdn.ashx), and the jQuery project itself (http://code.jquery.com) offer the file on powerful, low-latency servers distributed around the world for fast download, regardless of the user's location. While a CDN-hosted copy of jQuery has speed advantages due to server distribution and caching, using a local copy can be convenient during development. Throughout this book, we'll use a copy of the file stored on our own system, which will allow us to run our code whether we're connected to the Internet or not.
Setting up jQuery in an HTML document
There are three pieces to most examples of jQuery usage: the HTML document, CSS files to style it, and JavaScript files to act on it. For our first example, we'll use a page with a book excerpt that has a number of classes applied to portions of it. This page includes a reference to the latest version of the jQuery library, which we have downloaded, renamed jquery.js, and placed in our local project directory:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Through the Looking-Glass</title> <link rel="stylesheet" href="01.css"> <script src="jquery.js"></script> <script src="01.js"></script> </head> <body> <h1>Through the Looking-Glass</h1> <div class="author">by Lewis Carroll</div> <div class="chapter" id="chapter-1"> <h2 class="chapter-title">1. Looking-Glass House</h2> <p>There was a book lying near Alice on the table, and while she sat watching the White King (for she was still a little anxious about him, and had the ink all ready to throw over him, in case he fainted again), she turned over the leaves, to find some part that she could read, <span class="spoken"> "—for it's all in some language I don't know," </span> she said to herself.</p> <p>It was like this.</p> <div class="poem"> <h3 class="poem-title">YKCOWREBBAJ</h3> <div class="poem-stanza"> <div>sevot yhtils eht dna ,gillirb sawT'</div> <div>;ebaw eht ni elbmig dna eryg diD</div> <div>,sevogorob eht erew ysmim llA</div> <div>.ebargtuo shtar emom eht dnA</div> </div> </div> <p>She puzzled over this for some time, but at last a bright thought struck her. <span class="spoken"> "Why, it's a Looking-glass book, of course! And if I hold it up to a glass, the words will all go the right way again."</span></p> <p>This was the poem that Alice read.</p> <div class="poem"> <h3 class="poem-title">JABBERWOCKY</h3> <div class="poem-stanza"> <div>'Twas brillig, and the slithy toves</div> <div>Did gyre and gimble in the wabe;</div> <div>All mimsy were the borogoves,</div> <div>And the mome raths outgrabe.</div> </div> </div> </div> </body> </html>
Immediately following the normal HTML preamble, the stylesheet is loaded. For this example, we'll use a simple one:
body { background-color: #fff; color: #000; font-family: Helvetica, Arial, sans-serif; }h1, h2, h3 { margin-bottom: .2em; }.poem { margin: 0 2em; } .highlight { background-color: #ccc; border: 1px solid #888; font-style: italic; margin: 0.5em 0; padding: 0.5em; }
After the stylesheet is referenced, the JavaScript files are included. It is important that the script tag for the jQuery library be placed before the tag for our custom scripts; otherwise, the jQuery framework will not be available when our code attempts to reference it.
Now, we have a page that looks like this:
We will use jQuery to apply a new style to the poem text.
Adding our jQuery code
Our custom code will go in the second, currently empty, JavaScript file, which we included from the HTML using <script src="01.js"></script>. For this example, we only need three lines of code:
$(() => { $('div.poem-stanza').addClass('highlight')});
Now let's step through this script piece by piece to see how it works.
Finding the poem text
The fundamental operation in jQuery is selecting a part of the document. This is done with the $() function. Typically, it takes a string as a parameter, which can contain any CSS selector expression. In this case, we wish to find all of the <div> elements in the document that have the poem-stanza class applied to them, so the selector is very simple. However, we will cover much more sophisticated options through the course of the book. We will walk through many ways of locating parts of a document in Chapter 2, Selecting Elements.
When called, the $() function returns a new jQuery object instance, which is the basic building block we will be working with from now on. This object encapsulates zero or more DOM elements and allows us to interact with them in many different ways. In this case, we wish to modify the appearance of these parts of the page and we will accomplish this by changing the classes applied to the poem text.
Injecting the new class
The .addClass() method, like most jQuery methods, is named self descriptively; it applies a CSS class to the part of the page that we have selected. Its only parameter is the name of the class to add. This method, and its counterpart, .removeClass(), will allow us to easily observe jQuery in action as we explore the different selector expressions available to us. For now, our example simply adds the highlight class, which our stylesheet has defined as italicized text with a gray background and a border.
Executing the code
Taken together, $() and .addClass() are enough for us to accomplish our goal of changing the appearance of the poem text. However, if this line of code is inserted alone in the document header, it will have no effect. JavaScript code is run as soon as it is encountered in the browser, and at the time the header is being processed, no HTML is yet present to style. We need to delay the execution of the code until after the DOM is available for our use.
With the $(() => {}) construct (passing a function instead of a selector expression), jQuery allows us to schedule function calls for firing once the DOM is loaded, without necessarily waiting for images to fully render. While this event scheduling is possible without the aid of jQuery, $(() => {}) provides an especially elegant cross-browser solution that includes the following features:
It uses the browser's native DOM-ready implementations when available and adds a
window.onload
event handler as a safety net
It executes functions passed to
$()
even if it is called after the browser event has already occurred
It handles the event scheduling asynchronously to allow scripts to delay if necessary
The $() function's parameter can accept a reference to an already defined function, as shown in the following code snippet:
function addHighlightClass() { $('div.poem-stanza').addClass('highlight'); } $(addHighlightClass);
However, as demonstrated in the original version of the script and repeated in Listing 1.2, the method can also accept an anonymous function:
$(() => $('div.poem-stanza').addClass('highlight'));
This anonymous function idiom is convenient in jQuery code for methods that take a function as an argument when that function isn't reusable. Moreover, the closure it creates can be an advanced and powerful tool. If you're using arrow functions, you also get lexically bound this as a context, which avoids having to bind functions. It may also have unintended consequences and ramifications of memory use, however, if not dealt with carefully.
The finished product
Now that our JavaScript is in place, the page looks like this:
The poem stanzas are now italicized and enclosed in boxes, as specified by the 01.css stylesheet, due to the insertion of the highlight class by the JavaScript code.
Using development tools
As this code comparison has shown, jQuery code is typically shorter and clearer than its basic JavaScript equivalent. However, this doesn't mean we will always write code that is free from bugs or that we will intuitively understand what is happening on our pages at all times. Our jQuery coding experience will be much smoother with the assistance of standard development tools.
High-quality development tools are available in all modern browsers. We can feel free to use the environment that is most comfortable to us. Options include the following:
Microsoft Edge (
https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/f12-devtools-guide/
)
Internet Explorer Developer Tools (
http://msdn.microsoft.com/en-us/library/dd565628.aspx
)
Safari Web Development Tools (
https://developer.apple.com/safari/tools/
)
Chrome Developer Tools (
https://developer.chrome.com/devtools
)
Firefox Developer Tools (
https://developer.mozilla.org/en-US/docs/Tools
)
Each of these toolkits offers similar development features, including:
Exploring and modifying aspects of the DOM
Investigating the relationship between CSS and its effect on page presentation
Convenient tracing of script execution through special methods
Pausing execution of running scripts and inspecting variable values
While the details of these features vary from one tool to the next, the general concepts remain the same. In this book, some examples will require the use of one of these toolkits; we will use Chrome Developer Tools for these demonstrations, but development tools for other browsers are fine alternatives.
Chrome Developer Tools
Up-to-date instructions for accessing and using Chrome Developer Tools can be found on the project's documentation pages at https://developer.chrome.com/devtools. The tools are too involved to explore in great detail here, but a survey of some of the most relevant features will be useful to us.
When Chrome Developer Tools is activated, a new panel appears offering information about the current page. In the default Elements tab of this panel, we can see a representation of the page structure on the left-hand side and details of the selected element (such as the CSS rules that apply to it) on the right-hand side. This tab is especially useful for investigating the structure of the page and debugging CSS issues:
The Sources tab allows us to view the contents of all loaded scripts on the page. By right-clicking on a line number, we can set a breakpoint, set a conditional breakpoint, or have the script continue to that line after another breakpoint is reached. Breakpoints are effective ways to pause the execution of a script and examine what occurs in a step-by-step fashion. On the right-hand side of the page, we can enter a list of variables and expressions we wish to know the value of at any time:
The Console tab will be of most frequent use to us while learning jQuery. A field at the bottom of the panel allows us to enter any JavaScript statement, and the result of the statement is then presented in the panel.
In this example, we perform the same jQuery selector as in Listing 1.2, but we are not performing any action on the selected elements. Even so, the statement gives us interesting information: we see that the result of the selector is a jQuery object pointing to the two .poem-stanza elements on the page. We can use this console feature to quickly try out jQuery code at any time, right from within the browser:
In addition, we can interact with this console directly from our code using the console.log() method:
$(() => { console.log('hello'); console.log(52); console.log($('div.poem-stanza'));});
This code illustrates that we can pass any kind of expression into the console.log() method. Simple values such as strings and numbers are printed directly, and more complicated values such as jQuery objects are nicely formatted for our inspection:
This console.log() function (which works in each of the browser developer tools we mentioned earlier) is a convenient alternative to the JavaScript alert() function, and will be very useful as we test our jQuery code.
Summary
In this chapter, we learned how to make jQuery available to JavaScript code on our web page, use the $() function to locate a part of the page that has a given class, call .addClass() to apply additional styling to this part of the page, and invoke $(() => {}) to cause this function to execute upon loading the page. We have also explored the development tools we will be relying on when writing, testing, and debugging our jQuery code.
We now have an idea of why a developer would choose to use a JavaScript framework rather than writing all code from scratch, even for the most basic tasks. We have also seen some of the ways in which jQuery excels as a framework, why we might choose it over other options, and in general, which tasks jQuery makes easier.
The simple example we have been using demonstrates how jQuery works, but is not very useful in real-world situations. In the next chapter, we will expand on this code by exploring jQuery's sophisticated selector language, finding practical uses for this technique.
Selecting Elements
The jQuery library harnesses the power of Cascading Style Sheets (CSS) selectors to let us quickly and easily access elements or groups of elements in the Document Object Model (DOM).
In this chapter, we will cover:
The structure of the elements on a web page
How to use CSS selectors to find elements on the page
What happens when the specificity of a CSS selector changes
Custom jQuery extensions to the standard set of CSS selectors
The DOM traversal methods, which provide greater flexibility for accessing elements on the page
Using modern JavaScript language features to iterate over jQuery objects efficiently
Understanding the DOM
One of the most powerful aspects of jQuery is its ability to make selecting elements in the DOM easy. The DOM serves as the interface between JavaScript and a web page; it provides a representation of the source HTML as a network of objects rather than as plain text.
This network takes the form of a family tree of elements on the page. When we refer to the relationships that elements have with one another, we use the same terminology that we use when referring to family relationships: parents, children, siblings, and so on. A simple example can help us understand how the family tree metaphor applies to a document:
<html> <head> <title>the title</title> </head> <body> <div> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <p>This is yet another paragraph.</p> </div> </body> </html>
Here, <html>
