JQuery 3.0 ten new features _jquery

JQuery 3.0 has released its final new version recently. 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 have come to this final version.

With the jquery 3.0 version update, we see a lighter, faster jquery that keeps backwards compatible. In this article, we'll introduce some of the new features of jquery 3.0 that are in front of you.

Description before Start

If you want to download jquery 3.0 for hands-on experimentation, you can download it from 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 the jquery migration plugin to identify code compatibility issues, and you can also view the future development schedule for jquery.

1. Remove the old IE workspace

The main goal of the new final edition is faster and more stylish, so the technology and workspaces that support earlier than the IE9 version are removed. This means that if you want or need to support ie6-8, you must use the 1.12 version, because even the 2.X version does not fully support browsers older than IE9. View the full browser support scheme >>

Note: Some other features have been deprecated in jquery 3. As of June 2016, the upgrade guide has not provided a group collation for deprecated features. Therefore, if you want to understand the deprecated feature, 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 provided for in this update.

While jquery 3 is written in strict mode, you need to understand that your code does not 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. JavaScript code for strict and non-strict mode can coexist harmoniously.

Here are some exceptions: some versions of ASP.net, because of strict mode, cannot be compatible with jquery 3, and if your code involves ASP.net, you can view details about strict mode.

3. Introduction of the 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 direct traversal approach to Arrays, Maps, and Sets such as iterative objects.

In jquery, the For...of Loop replaces the previous $.each (...) syntax and is easier to loop through the collection of elements in jquery.

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

4. Animation with a new API

JQuery 3 uses the Requestanimationframe () API to perform animations to make animations run more smoothly and quickly. The new API is only used to support its browsers, and for older browsers such as IE9 jquery uses the previous APIs as a fallback to display animations.

Requestanimationframe has been out for a while and if you're interested in how to use it and when to use it, there's a good article on CSS tricks for you to read.

5. Provides a new method of escaping for strings that contain special meanings

The new Jquery.escapeselector () provides a way to escape strings or characters that have special meanings in CSS, which enables these strings or characters to continue to be used in the jquery selector. Instead of escaping JavaScript interpreters that cannot be properly understood.

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

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

I'm not sure how often this happens, but if you're in a similar situation, it certainly gives you a simple way to solve the problem.

6. Class action 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 (), the SVG document can now be targeted. This means you can modify (add, delete, toggle) or find the jquery class under SVG (Scalable Vector graphics), and then use the CSS class style. (Related reading: Styling scalable Vector Graphic (SVG) with CSS)

7. Deferred object is now compatible with JS promises

JavaScript promises, objects used for asynchronous computations, are now standardized in ECMAScript 6, and their health and characteristics are described in detail in the promises/a+ standard.

In jquery 3, the deferred object has been compatible with the new promises/a+ standard, and the deferred object has become a possible chain object (Chainable objects) that creates a callback queue.

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

See the code examples for the upgrade guide, or see a scotch.io tutorial on the basics of JavaScript promises to give you more information.

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

$.when () provides a way to execute the callback function, which is a 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 way you interpret the 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 compatible with Promise.

This means that the $.when method can receive 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 response design, the code that is displayed and hidden with the elements is updated in jquery 3.

From now on, the. Show (),. Hide () and. Toggle () Methods replace the previous calculation style with the emphasis of inline styles, which can be more respectful of the style list changes.

The new code as much as possible respects the values presented in the style list, which means that CSS rules can be dynamically changed based on events such as Device relocation and window resizing.

This documentation affirms that the most important result is:

"As a result, the disconnected element is no longer identified as hidden unless the inline display:none is specified. Therefore, in jquery 3.0,. Toggle () No longer distinguishes disconnected elements from connected elements. ”

If you want a better understanding of the new show/Hide logic, this Github discussion will help you. The jquery developer also publishes Google Docs to show how the new rules work under different use cases.

10. Additional protection against XSS attacks

JQuery 3 Adds an additional security layer user to guard against Cross-site scripting (XSS) attacks, which requires the developer to specify the option in the $.ajax () and $.get () method 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 changes are very effective when the remote site delivers the content of the service that has malicious script after it passes the non script content. This change does not affect the $.getscript () method because it explicitly sets the datatype: "Script" option.

The above is a small set to introduce the jquery 3.0 ten new features of the relevant knowledge, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!