Final version of jQuery 3.0 Top 10 new features released

The final version of jQuery 3.0 has been released. jQuery 3.0 will be the future of jQuery. But if you need IE 6-8 support, you can continue to use the latest version 1.12.

The final new version of jQuery 3.0 was released a few days ago. Since October 2014, the jQuery team started to maintain this major version, and the web developer community has been looking forward to this moment. Finally, in June 2016, they ushered in this final version of www. lampbrother. net.

With the jQuery 3.0 version update, we see a lighter, faster jQuery that remains backward compatible. In this article, we will introduce some new features of jQuery 3.0.

Instructions before beginning

If you want to download jQuery 3.0 for your own experiment, you can download it through this page. In addition, the upgrade guide and source code are also worth seeing.
If you want to test how your project works in jQuery 3.0, you can try to identify code compatibility issues through the jQuery migration plug-in, and you can also check the future development schedule of jQuery.

1. Remove the old IE workspace

The main goal of the new final version is to be faster and more fashionable, so the related technologies and workspaces that support the IE 9 version have been removed. This means that if you want or need to support IE 6-8, you have to go back to version 1.12 because even version 2.X doesn't fully support browsers that predate IE 9.

Note: In jQuery 3, a few other features have been discarded. As of June 2016, the upgrade guide has not provided a grouping of discarded functions. Therefore, if you want to know the deprecation function, you can search through ctrl+f.

2. jQuery 3.0 runs under Strict Mode

Most browsers that support jQuery 3 support strict mode, which is specified in this update.

Although jQuery 3 is written in strict mode, you need to know that your code does not need to run in strict mode, so if you want to migrate the previous code to jQuery 3, you do not need to rewrite the existing jQuery code. The JavaScript code for Strict and non-strict mode can coexist harmoniously.

There is one exception: Some versions of ASP. NET are not compatible with jQuery 3 because of strict mode,

3. Introducing for... of cycle

jQuery 3 supports the for... of statement, which is a new for loop statement introduced from ECMAScript 6. This provides a more direct way to traverse iterable objects such as Arrays, Maps, and Sets.

In jQuery, the for... of loop replaces the previous $. each (...) syntax and is easier to loop through jQuery's set of elements.
Note: for... of can only work in an environment that supports ECMAScript 6 or with an JavaScript compiler such as Babel.

4. Adopt the new API for animation

jQuery 3 uses requestAnimationFrame () API to perform animation, which makes the animation run smoother and faster. The new API is only for browsers that support it, and for older browsers (such as IE9) jQuery uses the previous API as a backup for displaying animations.

5. Provide a new way to escape strings with special meanings

The new jQuery. escapeSelector () provides a way to escape strings or characters with special meanings in CSS, which enables them to continue to be used in jQuery selectors without escaping JavaScript interpreters that cannot be properly understood.

This example can give you a better understanding of this brand-new method:

For example, an element on the page with ID "abc. def" cannot be selected by $("# abc. def") because the selector resolves it to an object with ID "abc" and a class named "def". But it can be selected by $("#" + $. escapeSelector ("abc. def")).

I'm not sure how often it happens, but if you've ever had a situation like this, it certainly gives you an easy way to solve the problem.

6. Class operation methods support SVG

Unfortunately, jQuery 3 does not yet fully support SVG, but jQuery methods that manipulate CSS class names, such as. addClass () and.hasClass (), can now target SVG documents. This means that you can modify (add, delete, toggle) or look for the jQuery class under SVG (Scalable Vector Graphics) and use the CSS class style.

7. Delayed objects are now compatible with JS Promises

JavaScript Promises, an object for asynchronous computing, is now standardized in ECMAScript 6; Refer to the Promises/A + standard for a detailed description of their operating conditions and characteristics.

In jQuery 3, the delayed object has been compliant with the new Promises/A + standard and has become the chainable object that makes it possible to create callback queues (chainable objects).

New features change the process of asynchronous callback function execution, and Promises allows developers to write asynchronous code that is logically closer to synchronous code.

8. Different interpretations of various parameters in jQuery. when ()

$. when () provides a way to perform callback functions, which became part 1 after jQuery 1.5. This method is very flexible, and it can be applied to zero parameters as well as one or more objects as parameters.

jQuery 3 changes the way the parameters in $. when () are interpreted when the $. then () method is included, and you can make additional parameter callbacks to $. when ().

In jQuery 3, if you add an input parameter to the then () method in $. when (), that parameter will be interpreted as an "thenable" compatible with Promise.
This means that the $. when method can accept a wider range of inputs, such as native ES6 Promises and Bluebird Promises, which makes it possible to write more complex asynchronous callbacks.

9. New Show/Hide Logic

In order to increase the compatibility of responsive design, the code with element display and hiding has been updated in jQuery 3.
From now on, the. show (),. hide (), and. toggle () methods will replace the previous calculation styles with an emphasis on inline styles, which will be more respectful of changes in the style list.
The new code respects the values presented in the style list as much as possible, which means that CSS rules can be dynamically changed according to events such as device repositioning and window sizing.
This explanatory document declares that the most important results are:

"As a result, disconnected elements are no longer considered hidden unless inline display: none is specified. Therefore, in jQuery 3.0,. toggle () no longer distinguishes disconnected elements from connected elements."

If you want to know more about the new show/hide logic, this Github discussion will help you. The jQuery developers also released an Google documentation table to show how the new rules work under different use cases.

10. Additional protection against XSS attacks

jQuery 3 adds an additional layer of security to protect against cross-site scripting (XSS) attacks, which requires the developer to specify the option in the $. ajax () and $. get () methods as dataType: "script".

In other words, if you want to execute a cross-site scripting request, you must make such a declaration in these methods.

The new change is very effective when "the remote site delivers unscripted content and then provides maliciously scripted service content". This change does not affect the $. getScript () method because it explicitly sets the dataType: "script" option.