What are the new features of the upcoming jquery 3 _jquery

JQuery's birth, has been 10 years, and its prosperity is clearly not without reason. jquery is another good JavaScript library after prototype. It is lightweight JS library, it is compatible with CSS3, also compatible with various browsers (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+), jQuery2.0 and subsequent versions will no longer support IE6/7/8 browsers. jquery makes it easier for users to process HTML (an application under the standard Universal Markup Language), events, animate, and easily provide Ajax interaction for the site. One of the big advantages of jquery is that it has a full documentation and a variety of applications that are detailed, as well as a number of mature plug-ins to choose from.

In the next few weeks, JQuery will arrive at an important milestone-the official release of version 3.0. JQuery 3 Fixes a large number of bugs, adds new methods, removes some interfaces at the same time, and modifies the behavior of a small number of interfaces. In this article, I will focus on the most important changes introduced by JQuery 3.

New features

Let's first discuss some of the most important new features in JQuery 3.

For...of Cycle

In jquery 3, we can iterate over all the DOM elements in a jquery collection using the For...of loop statement. This new iteration method is part of the ECMAScript 2015 (i.e. ES6) specification. This method can iterate over "iterated objects" such as Array, Map, Set, and so on.

When using this new iterative method, the value you get in the loop is not a JQuery object, but a DOM element (this is similar to the. each () method). When you are working on a JQuery collection, this new iterative approach can slightly improve your code.

To figure out how this iterative approach works, let's assume a scenario-you need to assign an ID to each INPUT element in the page. Before JQuery 3, you might write this:

Copy Code code as follows:

var $inputs = $ (' input '); for (var i = 0; i < $inputs. length; i++) {
$inputs [i].id = ' input-' + i;
}

And in JQuery 3, you can write this:

Copy Code code as follows:

var $inputs = $ (' input '); var i = 0;
for (var input of $inputs) {
input.id = ' input-' + i++;
}

In fact, JQuery has a. each () method, and the readability is not bad. ）

New signatures for $.get () and $.post () functions

JQuery 3 adds new signatures to the two tool functions $.get () and $.post (), making them consistent with the interface style of $.ajax (). The new signature is this:

Copy Code code as follows:

$.get ([Settings])
$.post ([Settings])

A settings is an object that contains multiple properties. Its format is the same as the parameter format you previously passed to $.ajax (). If you want to get a clearer picture of this parameter object, refer to the relevant description in the $.ajax () page.

The only difference between the parameter object of $.get () and $.post () and the argument passed to $.ajax () is that the method property of the former is always ignored. The reason is simple, $.get () and $.post () have already preset HTTP methods to initiate Ajax requests (obviously $.get () is Get and $.post () is post). In other words, normal humans would not want to use the $.get () method to send a POST request.

Suppose you have the following section of code:

Copy Code code as follows:

$.get ({
URL: ' https://www.audero.it ',
Method: ' POST '//the ' is ignored
This attribute will be ignored});

Regardless of what we write in the method attribute, the request is always sent out in get.

Using Requestanimationframe () to achieve animation

All modern browsers (including IE10 and above) are supported by Requestanimationframe. JQuery 3 will use this API internally to implement animations to achieve smoother, more resource-efficient animations.

Unwrap () method

JQuery 3 Adds an optional selector parameter to the unwrap () method. The new signature for this method is this:

Copy Code code as follows:

Unwrap ([selector])

With this feature, you can pass a string containing the selector expression to this method, and use it to match within the parent element. If there is a matching child element, the parent of the child element is lifted, and if there is no match, no action is taken.

Features that have changed

JQuery 3 also modifies the behavior of some features.

: Visible and: Hidden

JQuery 3 will modify: visible and: The meaning of the hidden filter. As long as the element has any layout box, even if the width is zero, it will be considered: visible. For example, BR elements and inline elements that do not contain content are now being selected by: visible this filter.

So, if your page contains the following structure:

Copy Code code as follows:

<div></div><br/>

Then run the following statement:

Copy Code code as follows:

Console.log ($ (' body:visible '). length);

In jquery 1.x and 2.x, you get a 0 result, but in jquery 3 you get 2.

Data () method

Another important change is related to the data () method. Now its behavior has become consistent with the Dataset API specification. JQuery 3 converts all attribute key names into hump form. Let's take a look at it in detail, taking the following elements as an example:

Copy Code code as follows:

<div id= "Container" ></div>

When we are using the previous version of JQuery 3, if you run the following code:

Copy Code code as follows:

var $elem = $ (' #container ');
$elem. Data ({' My-property ': ' Hello '}); Console.log ($elem. data ());

The following results will be obtained from the console:

Copy Code code as follows:

{my-property: "Hello"}

And in JQuery 3, we'll get the following results:

Copy Code code as follows:

{myproperty: "Hello"}

Note that in JQuery 3, the property name has been turned into a hump, and the bar has been removed, whereas in previous versions the property name remained all lowercase and the horizontal bar was preserved as it was.

Deferred objects

JQuery 3 also changes the behavior of the Deferred object. Deferred object can be said to be one of the predecessor of Promise object, it realizes the compatibility of promise/a+ protocol. This object and its history are quite interesting. If you want to get a closer look, you can read the jquery official document or read my book, "jquery Combat (Third edition)"-This book also covers jquery 3.

In JQuery 1.x and 2.x, if an unhandled exception occurs within the callback function passed to Deferred, the execution of the program is interrupted immediately (the silent failure, in fact, is the behavior of most of JQuery's callback functions). Instead of the native Promise object, it throws an exception and bubbles up until it reaches the window.onerror (usually the end of the bubble is here). If you do not define a function to handle this error event (which we would not normally do), the information for this exception will be displayed and the execution of the program will stop.

JQuery 3 will follow the pattern of native Promise objects. Therefore, the exception generated in the callback will result in a failed state (rejection) and trigger a failed callback. Once the failure callback has been executed, the entire process will continue, and subsequent successful callbacks will be executed.

To give you a better understanding of the difference, let's look at a small example. For example, we have the following code:

Copy Code code as follows:

var deferred = $. Deferred ();
Deferred
. then (function () {throw new error (' an error ');
})
. then (function () {console.log (' Success 1 ');
}, Function () {Console.log (' failure 1 ');
}
)
. then (function () {Console.log (' Success 2 ');
}, Function () {Console.log (' failure 2 ');
}
);
Deferred.resolve ();

In JQuery 1.x and 2.x, only the first function (that is, the function that throws the error) is executed. In addition, because we do not define any event handler functions for Window.onerror, the console will output "uncaught error:an Error", and the execution of the program will be aborted.

In JQuery 3, the whole behavior is completely different. You will see "Failure 1" and "Success 2" two messages in the console. That exception will be handled by the first failed callback, and subsequent successful callbacks will be invoked once the exception is processed.

SVG Documents

No jquery version (including jquery 3) has officially claimed support for SVG documents. There are, in fact, many ways to work, and there are some methods that were not used previously (such as those for manipulating class names), but they were also updated in JQuery 3. Therefore, in JQuery 3, you should be assured of using methods such as addclass () and Hasclass () to manipulate SVG documents.

Deprecated, removed methods and properties

As the above improvements are added, JQuery also removes and discards some features.

Discarded bind (), Unbind (), delegate (), and Undelegate () methods

JQuery introduced the On () method long ago, providing a unified interface to replace the methods of Bind (), delegate (), and Live (). At the same time, JQuery introduced the Off () method to replace Unbind (), undelegated (), and Die (). Since then, bind (), delegate (), Unbind () and undelegate () are no longer recommended, but they still exist.

JQuery 3 is finally beginning to mark these methods as "obsolete" and plans to remove them completely in a future version (most likely jQuery 4). Therefore, use the on () and off () methods uniformly in your project so that you don't have to worry about future versions of the changes.

Remove the load (), unload (), and error () methods

JQuery 3 completely discards the methods of load (), unload (), and error () that have been marked as obsolete. These methods have been marked as obsolete long ago (starting with jQuery 1.8), but have not been removed. If you're using a plugin that still relies on these methods, upgrading to JQuery 3 will hook up your code. Therefore, be sure to keep an eye on the upgrade process.

Remove the context, support, and selector properties

JQuery 3 completely discards the attributes that have been marked as obsolete, such as context, support, and selector. Ditto, in the upgrade to JQuery 3 o'clock, please note that you are using the plugin.

Fixed bugs

JQuery 3 Fixes some of the most important bugs in previous versions. In this section, I'll focus on two of these, because both of these should have a significant impact on your code-writing habits.

The return value of width () and height () will no longer be rounded

JQuery 3 Fixes a bug in width (), height (), and other related methods. The return value of these methods will no longer round rounding, because this rounding behavior is not convenient for locating elements in some cases.

Let's take a look at it in detail. Suppose you have a container element with a width of 100px, it contains three child elements, width is one-third (that is, 33.333333%):

Copy Code code as follows:

<div class= "Container" >
<div>my name</div>
<div>is</div>
<div>aurelio De rosa</div></div>

In the previous version of JQuery 3, if you tried to get the width of the child elements by using the following code ...

Copy Code code as follows:

$ ('. Container div '). width ();

...... Then you get the result will be 33. The reason is that jQuery will take the value of 33.33333 to the whole. In JQuery 3, the bug has been fixed, so you'll get more accurate results (i.e. a floating-point number).

Wrapall () method

JQuery 3 also fixes a bug in the Wrapall () method that occurs when a function is passed as an argument to it. In the previous version of jquery 3, when a function was passed to the Wrapall () method, it would wrap each element of the jquery collection separately. In other words, this behavior is exactly the same as when passing a function to wrap ().

While fixing this problem, another change is introduced: because in jquery 3, this function is called only once, it is impossible to pass each element of the jquery collection to it. Therefore, the execution context of this function (this) will only point to the first element in the current JQuery collection.

How to download JQuery 3 Beta 1

Now that you've read this, it means you probably want to try the first beta version of JQuery 3. You can use the following two addresses to obtain this version:

Uncompressed version: Https://code.jquery.com/jquery-3.0.0-beta1.js

Compressed version: Https://code.jquery.com/jquery-3.0.0-beta1.min.js

Of course, you can also download via NPM:

[CODE]NPM Install Jquery@3.0.0-beta1[/code]

Conclusion

Many people have been singing down jQuery, saying that it has no place in the development of modern web pages. But in any case, the development of JQuery continues, and objective statistics (up to 78.5% per cent of the top 1 million sites) are also self-defeating.

In this article, I've taken you through some of the major changes that JQuery 3 will bring. You may have noticed that this version is unlikely to hook up with your existing project because it introduces a few disruptive changes. However, in the process of upgrading to JQuery 3, you still need to keep in mind some key points, such as the improvement of Deferred objects and so on. Similarly, when upgrading a third-party library, it is also necessary to check the compatibility of the project so that any unintended behavior can be detected as early as possible to prevent certain functionality from being invalidated.

Nasa

In addition to the changes mentioned in this article, the biggest change in JQuery 3.0 is the total abandonment of support for IE8. The reason the JQuery team made the decision was that Microsoft had announced a halt to its support for IE 8~10 earlier this year. As a result, the jquery Compat project released by jquery during the 3.0 Alpha phase is not necessary to continue.

However, since IE8 is still one of the most popular browsers in mainland China, it has had to stay in the JQuery 1.x version in the short (or even medium) term for domestic developers.

Well, let's just say good news at the end. This jquery also provides migration plug-ins (jquery Migrate plugin) for the 3.0 release to help users smooth upgrades. Running this plug-in at the same time after you upgrade jquery to 3.0 ensures that the existing business code based on jquery 1.x or 2.x is working properly, and it will report to you at the console where the code is not compatible with jquery 3. When you fix these incompatibilities, you can safely remove the plugin.