jQuery 3.0, the new major release of jQuery finally got released. The web developer community waited for this important step since October 2014, when the jQuery team began to work on the new major version up until now, June 2016, when the final release is out.
Where to Start
If you want to test how your existing project works with jQuery 3.0, you can give a try to the jQuery Migrate plugin that identifies compatibility issues in your code. You can also take a peek into future milestones.
This article doesn’t cover all the new features of jQuery 3.0, only the more interesting ones: better code quality, integration of new ECMAScript 6 features, a new API for animations, a new method for escaping strings, increased SVG support, improved async callbacks, better compatibility with responsive sites, and increased security.
1. Old IE Workarounds Got Removed
One of the main goals of the new major release was to make it faster and sleeker, therefore the old hacks and workarounds related to IE9- got removed. This means if you want or need to support IE6-8, you’ll have to keep using the latest
1.12 release, as even the
2.x series doesn’t have full support for older Internet Explorers (IE9-). Check out the notes on browser support in the docs.
Note that there are also many deprecated features in jQuery 3. A big shortcoming of the Upgrade Guide is that the deprecated features – as of June 2016 – aren’t grouped, so if you’re interested in them, you’ll need to look them up with your browser’s search tool (Ctrl+F).
As most browsers supported by jQuery 3 support strict mode, the new major release have been built with this directive in mind.
There’s one exception: some versions of ASP.NET that – because of the strict mode – are not compatible with jQuery 3. If you’re involved with ASP.NET, you can have a look at the details here in the docs.
Note that the
jQuery 3 uses the requestAnimationFrame() API for performing animations, making animations run smoother and faster. The new API is only used in browsers that support it; for older browsers (i.e. IE9) jQuery uses its previous API as a fallback method to display animations.
RequestAnimationFrame has been out for a while, if you are interested in what it knows or why you should use it, CSS Tricks has a good post about it.
The docs helps us understand this method better with the following example:
“For example, if an element on the page has an id of “abc.def” it cannot be selected with
$( "#abc.def" ) because the selector is parsed as “an element with id ‘abc’ that also has a class ‘def’. However, it can be selected with
$( "#" + $.escapeSelector( "abc.def" ) ).”
I’m not sure how frequently such a case happens, but if you bump into a problem like this, now you have an easy way to quickly fix it.
Unfortunately, jQuery 3 still doesn’t fully support SVG, but the jQuery methods that manipulate CSS class names, such as
.hasClass(), now can be used to target SVG documents as well. This means you can modify (add, remove, toggle) or find classes with jQuery in Scalable Vector Graphics, then style the classes with CSS.
Recommended Reading: Styling Scalable Vector Graphic (SVG) with CSS
In jQuery 3,
Deferred objects have been made compatible with the new Promises/A+ standards. Deferreds are chainable objects that make it possible to create callback queues.
The new feature changes how asynchronous callback functions are executed; Promises allow developers to write asynchronous code that is closer in logic to synchronous code.
$.when() method provides a way to execute callback functions. It’s part of jQuery since version 1.5. It’s a flexible method; it also works with zero arguments, and it can accept one or more objects as arguments as well.
jQuery 3 changes the way how arguments of
$.when() are interpreted when they contain the
$.then() method with which you can pass additional callbacks as arguments to the
In jQuery 3, if you add an input argument with the
then() method to
$.when(), the argument will be interpreted as a Promise-compatible "thenable".
This means that the
$.when method will be able to accept a boarder range of inputs, such as native ES6 Promises and Bluebird Promises, that makes it possible to write more sophisticated asynchronous callbacks.
In order to increase compatibility with responsive design, the code related to showing and hiding elements has been updated in jQuery 3.
The new code respects the
display values of stylesheets whenever it’s possible, which means that CSS rules can dynamically change upon events such as device reorientation and window resize.
The docs asserts that the most important result will be:
"As a result, disconnected elements are no longer considered hidden unless they have inline
display: none;, and therefore
.toggle() will no longer differentiate them from connected elements as of jQuery 3.0."
If you want to better understand the results of the new show/hide logic, here is an interesting Github discussion about it.
jQuery developers also published a Google Docs table about how the new behaviour will work in different use cases.
In other words, if you want to execute cross-domain script requests, you must declare this in the settings of these methods.
According to the docs, the new requirement is useful when a "remote site delivers non-script content but later decides to serve a script that has malicious intent". The change doesn’t affect the
$.getScript() method, as it sets the
dataType: "script" option explicitly.