JQuery 3.0 final release, ten new features in front of you

JQuery 3.0 recently released its final, new version. Since October 2014, the jquery team has started to maintain this major release, and the web developer community has been looking forward to this moment, and finally in June 2016 they ushered in a final board www.itxdl.cn.

By updating the version of JQuery 3.0, we saw a lighter, faster jquery that was kept backwards compatible. In this article, we'll cover some of the new features of jquery 3.0 that are so bright.

Instructions before you begin

If you want to download jquery 3.0 for your own experiment, you can download it from this page. In addition, the upgrade guide and source code are also worth a look.

If you want to test how your project works in jquery 3.0, you can try the jquery migration plugin to identify code compatibility issues, and you can see the timeline for jquery's future development.

1. Remove the old IE workspace

The main goal of the new final edition is to be faster and more fashionable, so the relevant technologies and workspaces that support earlier than the IE9 version are removed. This means that if you want or need to support ie6-8, you have to use back to version 1.12, because even the 2.X version does not fully support browsers older than IE9.

Note: Some other features have been deprecated in jquery 3. As of June 2016, the upgrade guide does not provide a grouping of deprecated features. Therefore, if you want to know about deprecated features, you can search by using the Ctrl+f key.

2. JQuery 3.0 runs under strict mode

Most browsers that support jquery 3 support strict mode, which is defined in this update.

While jquery 3 is written in strict mode, what you need to know is that your code doesn't need to run in strict mode, so if you want to migrate your previous code to jquery 3, you don't need to rewrite the existing jquery code. The JavaScript code for strict and non-strict mode can coexist harmoniously.

Here are some exceptions: some versions of ASP. Strict mode is not compatible with jquery 3,

3. Introduction of For...of Cycle

JQuery 3 supports the For...of statement, which is a new for loop statement introduced by ECMAScript 6. This provides a more straightforward way to iterate over an iterative object such as Arrays,maps and sets.

In jquery, the For...of Loop can replace the previous $.each (...) Syntax, and is easier to loop through the set of elements of jquery.

Note: For...of can only work in environments that support ECMAScript 6 or with JavaScript compilers such as Babel.

4. Using the new API for animation

JQuery 3 uses the Requestanimationframe () API to perform animations that make animations run smoother and faster. The new API is only for browsers that support it, and for those older browsers (such as IE9) jquery uses the previous API as a fallback for displaying animations.

5. New way to provide escape for strings that contain special meanings

The new Jquery.escapeselector () provides a way to escape a string or character that has a special meaning in the CSS, which enables these strings or characters to continue to be used in the jquery selector. Without having to escape the JavaScript interpreter that is not properly understood.

This example will give you a better understanding of this new approach:

For example, an element in the page with an ID of "Abc.def" cannot be selected by $ ("#abc. def") because the selector resolves it to an object with an ID of "ABC" and contains a class called "Def". However, it can be selected by $ ("#" + $.escapeselector ("Abc.def")).

I'm not sure how often the situation is happening, but if you've come across something like this, it certainly gives you a simple way to solve the problem.

6. Class operation methods Support SVG

Unfortunately, jquery 3 does not yet fully support SVG, but for jquery methods that manipulate CSS class names, such as. addclass () and. Hasclass (), you can now target the SVG document. This means that you can modify (add, delete, toggle) or find the jquery class under SVG (Scalable Vector graphics) and then use the CSS class style.

7. Delay object now compatible with JS promises

JavaScript Promises, objects for asynchronous computations, are now standardized in ECMAScript 6, and detailed descriptions of their health and characteristics are provided in the promises/a+ standard.

In jquery 3, lingering objects are already compatible with the new promises/a+ standard, and lingering objects have become a chain object (Chainable objects) that makes it possible to create callback queues.

The new feature changes the asynchronous callback function execution process, and promises allows developers to write asynchronous code that is logically closer to the synchronization code.

8. Jquery.when () different interpretations of various parameters

$.when () provides a way to execute a callback function, which becomes part of jquery 1.5. This method is very flexible, it applies to 0 parameters, and also applies to one or more objects as parameters.

JQuery 3 Changes the method of interpreting parameters in $.when () 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 (), the parameter will be interpreted as a "thenable" that can be promise compatible.

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

To increase the compatibility of the responsive design, the code that is displayed and hidden with the element is updated in jquery 3.

From now on, the. Show (),. Hide (), and. Toggle () methods will focus on replacing the previous calculation style with the inline style, which can be more respectful of the changes in the Style list.

The new code respects the values rendered in the list of styles as much as possible, which means that CSS rules can be dynamically changed based on events such as device repositioning and window resizing.

This document affirms that the most important result is:

As a result, disconnected elements are no longer considered to be hidden unless an inline display:none is specified. Therefore, in jquery 3.0,. Toggle () No longer distinguishes the disconnected element from the connected element. ”

If you want a better understanding of the new display/hide logic, this github discussion will help you. The jquery developer also publishes a Google Docs 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 for users to protect against cross-site scripting (XSS) attacks, which requires the developer to specify the options in the $.ajax () and $.get () methods as datatype: "Script".

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

The new changes are very effective when the remote site passes non-scripted content and provides service content with malicious scripting. This change does not affect the $.getscript () method because it explicitly sets the datatype: "Script" option.

JQuery 3.0 final release, ten new features in front of you