In the next few weeks, jQuery will reach a major milestone - the official release of version 3.0. jQuery 3 fixes a number of bugs, adds new methods, and removes a number of interfaces and modifies the behavior of a handful of them. In this post, I'll focus on the most important changes introduced by jQuery 3.
New features
Let's start by discussing a few of the most important additions in jQuery 3.
For. .of loops
In jQuery 3, we can use for. .of loop statements to iterate over all the DOM elements in a jQuery collection. This new iteration method is part of the ECMAScript 2015 (or ES6) specification. This method can loop over "iterable objects" (such as Array, Map, Set, etc.).
When using this new iteration method, the value you get each time inside the loop body is not a jQuery object, but a DOM element (translation: this is similar to the .each() method). This new iteration method improves your code a bit when you're working on a jQuery collection.
To figure out exactly how this iteration method works, let's assume a scenario where you need to assign an ID to each input element on the page. before jQuery 3, you might write something like this:
The code looks like this:var $inputs = $( 'input');for(var i = 0; i $inputs[i].id = 'input-' + i;
}
And in jQuery 3, you might write it like this:
Code as follows:var $inputs = $('input');var i = 0;
for(var input of $inputs) {
input.id = 'input-' + i++;
}
(Translation: jQuery actually has its own .each() method, which isn't bad for readability.)
New signatures for the $.get() and $.post() functions
jQuery 3 added new signatures to the $.get() and $.post() utility functions to make them consistent with the style of the $.ajax() interface. The new signatures look like this:
The code is as follows:$.get([settings])
$.post([settings])
settings is an object that contains several properties. Its format is the same as the format of the parameters you passed to $.ajax() before. If you want to understand this parameter object better, see the description on the $.ajax() page.
The only difference between the $.get() and $.post() parameter objects and the parameters passed to $.ajax() is that the method attribute is always ignored. The reason for this is simple: $.get() and $.post() themselves already presuppose the HTTP method that initiates the Ajax request (obviously $.get() is GET and $.post() is POST). That said, no normal human would want to send a POST request using the $.get() method.
Assuming the following code:
The code is as follows:$.get({
url: '/jquery-3.0.0-beta1.js
Compressed version: /jquery-3.0.0-beta1.min.js
Of course, you can download it via npm:
[code]npm install jquery@3.0.0-beta1[/code]
Conclusion
Many people have been singing the praises of jQuery, saying that it has no place in modern web development. But jQuery development continues regardless, and objective statistics (78.5% of the top one million sites) belie these claims.
In this article, I've taken you through some of the big changes coming with jQuery 3. As you've probably noticed, this release isn't likely to screw up your existing projects, as it introduces very few disruptive changes. However, there are some key points you should keep in mind when upgrading to jQuery 3, such as improvements to the Deferred object and so on. Similarly, when upgrading a third-party library, it's important to check the compatibility of that item so that you can catch any unintended behavior early on and prevent certain features from breaking.
Note
Besides the changes mentioned in this article, the biggest change in jQuery 3.0 is the complete abandonment of IE8 support. jQuery's team made this decision because Microsoft announced earlier this year that it was discontinuing support for IE 8-10. As a result, the jQuery Compat project, which was released in the 3.0 alpha phase, is no longer necessary.
But since IE8 is still one of the most popular browsers in mainland China, developers in China will have to stick with jQuery 1.x in the short (or even medium) term.
Well, there's good news at the end of the day. To help smooth the upgrade process, jQuery is also providing a jQuery Migrate plugin for version 3.0. Running this plugin at the same time as upgrading jQuery to 3.0 will ensure that existing business code based on jQuery 1.x or 2.x works properly; it will also report to you in the console where existing code is incompatible with jQuery 3. Once you've fixed these incompatibilities, it's safe to remove the plugin.