3:10 cool new features of JQuery

Summary: JQuery 3.0 is finally here. The web developer community has been waiting for this major update since October 2014. It came to us in the June 2016, in the midst of thousand-million hope.

JQuery 3.0 is finally here. The web developer community has been waiting for this major update since October 2014. It came to us in the June 2016, in the midst of thousand-million hope.

In the release notes for jquery 3.0, this is a lighter, faster jquery, and it retains the features of backwards compatibility. In this article, we'll look at some of the new features of jquery 3.0 and learn about the changes it brings to the JavaScript world.

Where to download

If you want to download jquery 3.0 for an attempt, please go directly to the download page. In addition, its upgrade guide and source code is also worth your visit.

If you want to test how your project works in jquery 3.0, you can use the jquery migration plugin to identify code compatibility.

This article does not cover all the new features of jquery 3.0, but only interesting content: Better code quality, new ECMAScript 6 integration, new animation APIs, new ways to escape strings, stronger SVG support, improved async Callback, better compatibility with responsive web pages, and higher security.

1. Remove the old IE workspace

One of the most important goals of the new version is to be faster and lighter, so that previous versions of the technology and workspaces that were earlier than the IE9 browser were removed. This means that if you want to continue to support the ie6-8 version of the browser, you must continue to use version 1.12, because even the 2.X version of jquery does not fully support browsers encountering IE9 versions. You can check your browser's support in the documentation for jquery 3.0.

2. JQuery 3.0 can be run in strict mode

Most of the browsers supported by JQuery 3 support strict mode, which is specified in the new version of this release. Although jquery 3 is written in strict mode, you need to know that the code you write does not have to be run in strict mode. So, if you want to move the previous code into jquery 3, you don't need to rewrite the code. Strict and Non-strict-mode JavaScript can coexist with each other.

There is only one exception: some versions of ASP. jquery 3 cannot be compatible due to the strict mode reason. If your code involves ASP. NET, you can see the details here.

3. Introduction of For...of Cycle

JQuery 3 now supports the FOR...OF statement, which is a new for loop statement introduced by ECMAScript 6. It provides a simpler and more straightforward way to iterate over objects such as arrays, maps, and sets.

In jquery, the For...of loop can replace the earlier $.each (...). Syntax, and makes it easier to cycle the elements of jquery together.

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

4, the use of the new animation API

JQuery 3 uses the Requestanimationfranme () API to perform animations that make the animation play smoother and faster. New animations can only be used in browsers that support them; some older browsers, such as IE9, use the previous API as a fallback for animated displays.

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

5. Strings with special meanings usher in a new escape method

The new Jquery.escapeselector () method allows you to escape strings or characters that have other meanings in CSS in a completely new way, allowing them to continue to be available in the jquery selector. Without having to escape the JavaScript interpreter that is not properly understood.

The following example can help us to better understand this way:

Suppose there is an object in the page whose ID is abc.def, which cannot be selected by $ ("#abc. def") because the selector resolves it to "has an ABC ID and contains an object of a class named Def". However, it can be selected by $ ("#" + $.escapeselector ("Abc.def")).

I'm not sure how long a similar situation will happen, but if you do encounter such problems, you now have an easy way out.

6, class operation method support SVG

Unfortunately, jquery does not yet fully support SVG, but jquery's methods for manipulating CSS class names, such as addclass () and. Hasclass (), can now target SVG documents. This means that you can modify (add, remove, toggle), or find the jquery class under SVG, and then use the CSS style.

7, delay objects can now be compatible with JS Promises

JavaScript Promises is an object for asynchronous computations that have been standardized in ECMAScript 6, and their behavior and characteristics are detailed in the promises/a+ standard.

In jquery 3, lingering objects can be compatible with the new promises/a+ standard. The deferred object becomes a chain object, making it possible to create a callback queue.

This heart feature changes the way asynchronous callback functions are executed. Promises allows developers to write asynchronous code that is logically closer to the synchronization code.

8, Jquery.when () different interpretation of various parameters

The $.when () method provides a way for the execution of a callback function. From version 1.5, it has been part of jquery. It is a flexible approach; it also uses the 0 parameter, which also applies to one or more objects as parameters.

JQuery 3 Changes the method of interpreting parameters in $.when () when the $.when () method is included, and you can make additional parameter callbacks to $.when ().

In JQuery 3, if you use the then () method to add an input parameter to $.when (), this parameter will be interpreted as a compatible promise "thenable".

This means that $.when can accept wider and more input ranges, such as native ES6 Promises and Bluebierd Promises, which makes it possible to write more complex asynchronous callbacks.

9. New Display/Hide logic

To enhance compatibility with responsive design, JQuery 3. The code associated with displaying and hiding elements has also been upgraded. From now on, the. Show (),. Hide (), and. Toggle () methods will focus on inline styles to replace the previous calculation style, which is more respectful of the changes in the Style list.

This new code can respect the values displayed in the style list whenever possible, which means that CSS rules can be dynamically changed based on events, such as Device relocation and window resizing.

10. Provide additional protection against XSS attacks

JQuery 3 Adds an additional layer of protection for XSS attacks, which requires the developer to specify the options in the $.ajax () and $.get () methods as datatype: "SRICPT".

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

The text shows that this method is 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.

Source: sdk.cn

Links: https://www.sdk.cn/news/4101

Original: http://www.hongkiat.com/blog/jquery-3-new-features/

3:10 cool new features of JQuery