Ten new features of jQuery 3.0 and new features of jquery3.0

Ten new features of jQuery 3.0 and new features of jquery3.0

JQuery 3.0 has released a new version. Since October 2014, the jQuery team began to maintain this major version, and the web developer community has been waiting for this moment. In June 2016, they finally ushered in this final version.

With the updated version of jQuery 3.0, we can see a more lightweight and faster jQuery with backward compatibility. In this article, we will introduce some new jQuery 3.0 features.

Description before start

If you want to download jQuery 3.0 for your own experiment, you can download it on this page. In addition, the upgrade guide and source code are worth reading.

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. You can also view 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. Therefore, technologies and work zones supporting earlier versions than IE9 are removed. This means that if you want or need to support IE6-8, you must use back version 1.12, because even 2.x cannot fully support browsers earlier than IE9. View the complete browser support solution>

 

Note: Some other functions are also discarded in jQuery 3. As of January 1, June 2016, the upgrade guide has not provided a group arrangement for the abandon function. Therefore, if you want to understand the discard function, you can use ctrl + f to search.

 

2. jQuery 3.0 runs in 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 understand that your code does not need to run in strict mode. Therefore, if you want to migrate the previous code to jQuery 3, you do not need to overwrite existing jQuery code. Strict and non-strict mode JavaScript code can coexist harmoniously.

There are some exceptions: some versions of ASP. NET, because of strict mode, it cannot be compatible with jQuery 3. If your Code involves ASP. NET, you can view the details about strict mode.

3. Introduce the for... of Loop

JQuery 3 supports the for... of statement, which is a for loop statement introduced in ECMAScript 6. This provides a more direct Traversal method for iteratable objects such as Arrays, Maps, and Sets.

In jQuery, The for... of loop can replace the previous $. each (...) syntax, and it is easier to loop through the jQuery element set.

 

Note: for... of can only work in an environment that supports ECMAScript 6 or a JavaScript compiler like Babel.

4. New APIs for animation

JQuery 3 uses the requestAnimationFrame () API to execute an animation, making it smoother and faster. The new API is only used by browsers that support it. For older browsers (such as IE9), jQuery uses the previous API as a backup scheme for displaying animations.

RequestAnimationFrame has been released for a while. If you are interested in how to use it and when to use it, there is a good article on CSS Tricks for you to read.

 

5. Provide new escape methods for strings with special meanings

The new jQuery. escapeSelector () provides a method to escape strings or characters with special meanings in CSS. This method allows these strings or characters to be used in the jQuery selector, without escaping JavaScript interpreters that cannot be correctly understood.

This example gives you a better understanding of this new method:

For example, an ID in the page is "abc. def elements cannot be $ ("# abc. def ") selected. However, it can be selected by $ ("#" + $. escapeSelector ("abc. def.

I cannot determine the frequency of the situation, but if you have encountered this kind of situation, it will undoubtedly give you a simple solution to this problem.

6. Class operation methods support SVG

Unfortunately, jQuery 3 cannot fully support SVG yet, But jQuery methods that operate CSS class names, such. addClass () and. hasClass () can now use the SVG document as the target. This means you can modify (add, delete, switch) or search for the jQuery class under SVG (Scalable Vector Graphics), and then use the class style of CSS. (Read: Styling Scalable Vector Graphic (SVG) with CSS)

7. The delayed object is now compatible with JS Promises

JavaScript Promises, an object used for asynchronous computing, has now been standardized in ECMAScript 6. For details about their running status and features, see Promises/A + standard.

 

In jQuery 3, the delayed object has been compatible with the new Promises/A + standard, and the delayed object has become A chainable object that makes creating A callback queue possible ).

The new feature changes the asynchronous callback function execution process. Promises allows developers to write asynchronous code that is logically closer to the Synchronous Code.

View the sample code of the upgrade guide, or view the Scotch. io tutorial on JavaScript Promises basics to learn more.

8. jQuery. when () different interpretations of multiple parameters

$. When () provides a method for executing callback functions, which is part of jQuery 1.5. This method is very flexible. It applies to zero parameters and one or more objects as parameters.

JQuery 3 changes the method for interpreting the parameters in $. then () when it contains the $. then () method. You can perform extra parameter callback on $. when.

In jQuery 3. add an input parameter to the then () method in when (), which is interpreted as a "thenable" that is compatible with Promise ".

This means that the $. when method can receive a wider range of input, such as the Native ES6 Promises and Bluebird Promises, which makes it possible to write more complex asynchronous callbacks.

9. New Display/hide Logic

To increase the compatibility of responsive design, the Code with element display and hiding is updated in jQuery 3.

From now on ,. show (),. hide () and. the toggle () method will replace the previous calculation style with the focus of the inline style. This method can better respect the changes in the style list.

The new Code tries its best to respect the values presented in the style list, which means that CSS rules can dynamically change based on events (such as device repositioning and window size adjustment.

This document states that the most important result is:

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

If you want to better understand the new display/hide logic, this Github discussion will help you. JQuery developers also released a Google document table to demonstrate the running of new rules in different use cases.

10. additional protection against XSS attacks

JQuery 3 adds an additional security layer for users to guard against cross-site scripting (XSS) attacks. It requires developers to specify $. ajax () and $. the option in the get () method is dataType: "script ".

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

 

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

The above is a small Editor to introduce you to the ten new features of jQuery 3.0, I hope to help you, if you have any questions, please leave a message, the small editor will reply to you in a timely manner. Thank you very much for your support for the help House website!