New features in JQuery 3 Summary introduction _jquery

It has been 10 years since the whole Web was rocked by jquery, and we have a good reason to stick with it. jquery provides the user with DOM to manipulate, execute Ajax requests, create animations, and so on, extremely friendly interface. In addition, unlike the DOM API, JQuery uses a composite schema (composite pattern). Because of this, you can invoke the JQuery method on a jquery collection without worrying about the number of elements (0, one or more) that the collection contains.

In the next few weeks, with the release of jquery 3, jquery will reach an important milestone. JQuery 3 Fixes many bugs, adds new methods, discards and removes some features, and alters the behavior of some features. In this article, I'll focus on some of the biggest changes that have been brought about by jquery 3.

New Feature (Features)

In the following sections, I'll discuss the important new features in jquery 3.

For...of Cycle

jquery 3 will provide for...of loop statements that can be used to traverse a jquery collection of all DOM elements. This new iterator is part of the ECMAScript 2015 (also known as ECMASCRIPT6) specification. It can realize the loop of the Ergodic object (including Array, Map, Set, etc.).

When you use this new iteration method, the value you receive each time is not a jquery collection, but a DOM element. When you perform an operation on a jquery collection, this new iteration method can slightly improve your code.

To understand how this iterative approach works, suppose you want to assign an ID to each INPUT element in the page. Before JQuery 3, you can write this:

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

And in JQuery 3, you can write this:

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

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

JQuery 3 Adds a new signature to the $.get () and $.post () tool functions to keep them consistent with the interface style of $.ajax (). The new signature is this:

$.get ([Settings])

$.post ([Settings])

A settings is an object that can have many properties. This is the same object as the object provided to $.ajax (). For more detailed introduction, please refer to the $.ajax () page.
The only difference between an object passed to $.get () and $.post () and the object passed to $.ajax () is that the former method property is always ignored. The reason for this is that both $.get () and $.post () have a preset HTTP method for performing AJAX requests ($.get () with Get, and $.post () with Post). Generally, you do not use $.get () to try to send a POST request.

Consider the following code:

$.get ({
  URL: ' https://www.audero.it ', method
  : ' POST '//The ' is ignored
} ');

Although the method property is set, the statement cannot send a POST request and can only send a GET request.

Using Requestanimationframe () to achieve animation

All modern browsers, including Internet Explorer10 and above, support Requestanimationframe. JQuery 3 will use this API internally to implement animations to achieve smoother, more CPU-efficient animation.

Unwrap ()

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

Unwrap ([selector])

With this change, you can pass in a string containing a selector expression that matches within the parent element. If there is a match, the matched child elements will be unpack;

Changed attributes

JQuery 3 also modifies the behavior of some features.

: Visible and: Hidden

JQuery 3 Modified: Visible with: The meaning of the hidden filter. As long as the element has any layout boxes, including those with widths and/or heights of 0, the element is considered to be: visible. For example, a BR element and an inline element without content can be selected by: visible filter.

So, if the page has the following tags:

<div></div>
<br/>

Then execute the following statement:

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 ()

Another important change is related to the behavior of the data () method. The adjustment is primarily to allow the method to conform to the Dataset API specification. JQuery 3 Changes the keys of all properties to camel-case. To understand this change, let's look at the following example.

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

If you use the previous version of JQuery 3, you can write the following code:

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

You will get the following results on the console:

{my-property: "Hello"}

And in jquery 3, you get the following results:

{myproperty: "Hello"}

Note that in JQuery 3, the property name has been made into a hump form with no stripes (hyphens), whereas in previous versions the property name remained all lowercase and had a horizontal bar (hyphen) intact.

Deferred objects

JQuery 3 Changes the behavior of the deferred object, Promise the predecessor of the object, and improves compatibility with the promise/a+ proposal. This object and its history is very interesting, you can read the official document, or look at my book "jquery Combat, 3rd Edition", this book also covers jquery 3.

In JQuery 1.x and 2.x, if an unhandled exception occurs in a callback function in the incoming Deferred, it causes the program to stop executing. Instead of the native Promise object, it throws an exception and continues to bubble up until it reaches window.onerror (usually). If you do not define a function to handle this error event (which we would not normally do), an exception message is displayed and the program terminates execution.

JQuery 3 follows the schema of the native Promise object. Therefore, the thrown exception is treated as a failure state (rejection) to perform a failed callback. Once completed, the entire process continues to execute, and subsequent successful callbacks are executed.

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

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 (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 the message: "Uncaught error:an Error", and the execution of the program will be aborted.

In JQuery 3, the behavior is completely different. You will see "Failure 1" and "Success 2" two messages in the console. The exception is processed by the first failed callback, and once processed, the following success function continues.

SVG Documents

No jquery version, including jquery 3, formally supports SVG documents. In fact, there are many ways to work properly, and other methods, such as the method of manipulating class names, have been updated in JQuery 3 and therefore apply. Therefore, in future releases, you should be assured of using methods such as addclass () and Hasclass () to manipulate SVG documents.

Deprecated, removed methods and properties

In addition to the improvements described earlier, JQuery also removes and discards some features.

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

JQuery's previously introduced on () method provides a unified access interface to replace bind (), delegate (), and Live () methods. At the same time, JQuery replaces the unbind (), undelegated (), and Die () methods with the off () method. Bind (), delegate (), Unbind () and undelegate () are not recommended for future use, but no further action is taken.

JQuery 3 has deprecated these methods and plans to remove them in future versions (possibly JQuery 4), insisting on using the on () and Off () methods in the project so you don't have to worry about future versions of the changes.

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

JQuery 3 completely discards the discarded load (), unload (), and Error () methods. These methods have been marked as obsolete long ago (starting with jQuery 1.8), but they still exist. If the plugin you're using is still dependent on these methods, the code will go wrong when you upgrade to JQuery 3. Therefore, be aware during the upgrade process.

Remove context, support and selector

JQuery 3 completely discards the deprecated context, support, and selector attributes. As mentioned earlier, if these attributes are still used in the project, or if a plug-in is still dependent on those properties, the code will go wrong when it is updated to JQuery 3 o'clock.

Bugs Repair

JQuery 3 Fixes some of the major bugs in previous releases. In the following sections, I will highlight two of them, because these two will have a significant impact on your coding

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

JQuery 3 Fixes a bug in width (), height (), and other related methods. The return values of these methods are no longer rounded to pixels, because this makes it difficult to locate the elements in some cases.

To understand this problem, let's assume that you have a container element with a width of 100 pixels, which has 3 child elements with widths of one-third (i.e. 33.333333%):

<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 ...

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

...... Then you get the result will be 33. The reason is that jQuery rounded up the value of 33.33333. In JQuery 3, the Bug has been fixed, and your results will be more accurate (such as floating point numbers).

Wrapall ()

The new version of jquery also fixes a bug in the Wrapall () method that occurs when a function is passed to the Wrapall () method. 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 ().

In addition to fixing this problem, because this function is only invoked once in jquery 3, the index of the jquery collection element cannot be passed in. Finally, the function context (this) points to the first element in the JQuery collection.

Download JQuery 3

You can get files from the jquery CDN or directly access the links:

Https://code.jquery.com/jquery-3.0.0.js
Https://code.jquery.com/jquery-3.0.0.min.js
You can also get updates from the following npm:

NPM Install jquery@3.0.0

Summarize

Many people are saying that jquery is dead and that there is no place in the development of modern web pages. However, the development of JQuery continues, and objective statistics (up to 78.5% per cent of the top 1 million sites) refute these claims.

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 likely to have a significant impact on your existing projects because there are not too many significant changes introduced. However, there are still some factors to be noted, such as the improvement of the Deferred object. As with updating Third-party dependencies, it is important to have a review of the project to prevent unexpected behavior or functional crashes.