How to change and use JQuery 3.0 _jquery

JQuery, the most popular JavaScript library in the world so far, has been the artifact of our WEB developers. Since its initial release in 2006, there are already a lot of Web developers who have introduced this excellent library into their projects to make development work easier.

After 3 months, the JQuery team finally released the 3.0 Alpha version. There are two versions of jquery Compat 3.0 and jquery 3.0.

jquery Compat 3.0 corresponds to the previous 1.x, compatible with more browsers, for IE support to version 8.0
jquery 3.0 corresponds to the previous 2.x, focus on the updated browser, for IE support to 9.0 version

In addition, 3.0 also increased support for the Yandex browser, a Russian-style browser.

1, simplifies the show/hide

Before the show/hide is a large compatibility, such as show, regardless of the element display is written in the Style,stylesheet can be displayed. 3.0 is different, write in Stylesheet Display:none call show after still hide. 3.0 It is recommended to use the class method to display the hidden, or completely hide first (not using CSS code), and then call show can also.

<style>
Input {
display:none;
}
</style>
<input id= "txt" type= "text" value= ""/>
<script>
$ (' #txt '). Show ()//Still hidden state
</script>

2, data method compatible data-name-11 writing

<input id= "txt" type= "text" value= "" data-name-11= "AA"/>
<script>
//3.0 version Output {"name-11": AA}, Previous version Output {}
$ (' #txt '). Data ()

The essence of this problem is the difference between the $.camelcase method

3.0 Output "NAME-11", 3.0 previous version output "Name11"

3, derferred compatible with promise/a+

3.0 finally can confidently declare support promise/a, before has been criticized is castration version.

4, the $.ajax object deleted success | Error | Complete method

This is because the promise/a norms of the promotion of the use of Promise more and more, before the corresponding derferred on a number of methods do not have the necessary

Derferred.done-> jqxhr.success
Derferred.fail-> Jqxhr.error
derrerred.always-> Jqxhr.complete

The following methods do not have the
$.ajax (). Success $.ajax () after 3.0.
Error

5, Width/height,css (width)/css (height) return values are all decimal

Some browsers previously returned floating-point numbers in special cases.

6, remove the Registration event shortcut function Load | Unload | Error

The load name is the same as Ajax load and is ambiguous.
Unload if the load is removed, the unload has no meaning.
Error uses Window.onerror registration, not a standard event hander, and therefore also recommends removing

The above content has summed up the jquery3.0 change to everybody, the following main introduces jquery3.0 update content and the use method.

Show and Hide

The main change is how the function will work. And there are good reasons to do so. On an earlier implementation, the Hide () function sets the CSS property to "Display:none", and the show () function clears this property. But this is a bit confusing. Let's take a look at a few examples:

1. If the show () function attempts to set a node to "Display:block" and implements the "Display:inline" property in another stylesheet, this will begin to break the code.

2. When we handle responsive web design for the media (RWD), we may use "display" or "visibility" to change the visibility of the node. This may affect the show () and hide () functions.

Beyond that, there are other issues that the JQuery team has to fix. This leads to complex implementations and performance problems, so they migrate to a simple model.

In the future, if you set "Display:none" and Use "show ()", "Slidedown ()", "FadeIn ()" or similar methods to display nodes, it will not work. A better approach is to use "addclass ()" and "Removeclass ()" to control the display. Alternatively, you can Invoke "hide ()" On the element when "ready ()" is invoked.

To give an example quickly:

<! DOCTYPE html> 
 

The named rule for the. Data () Key

The JQuery team changed the implementation of the. data () function to better conform to the HTML5 data set specification. If the key in the Data-* property contains a number, the number will no longer participate in the conversion. Consider the following example:

Using JQuery 2.1.4:

The console window does not display objects.

Using JQuery 3.0.0:

Since numbers do not participate in the conversion of camel spellings, key is converted to Foo-42-name. So, we get the output of the console. This fiddle's web site is http://jsfiddle.net/nWCKt/25/. You can change the JQuery version to see the changes.

Similarly, if we want to use data () to display all of the data without any parameters, if the key name of the Data-* property is followed by a number in the hyphen (-), the number of parameters will also change in the two jQuery version, as in the example above.

The width () and the height () function return a decimal value

Some browsers return the width and height to subpixel values. Now, whether or not the browser supports it, JQuery's. Width (),. Height (),. css ("width") can return a decimal value. This can be good news for users who design a Web page in order to use sub-pixel precision.

. Load (),. Unload (), and. Error () functions are removed

These methods were previously disapproved and are now removed from the JQuery 3.0.0 Alpha version. The recommended approach is to use the. On () function to handle these events. Short Example:

Html:

Javascript:

Previous implementations (now unavailable)

$ ("#spacen"). Load (function () {
//Handler Implementation
});

Recommended ways to implement:

$ ("#spacen"). On ("Load", function () {
//Handler Implementation
});

The JQuery object can now traverse the

You can now traverse the JQuery object, using the ES2015 for-of. So, you can use it like this:

For (node of $ ("<div id=spacen>")) {
console.log (node.id);//Returns ' Spacen '
}

The JQuery animation now uses the Requestanimationframe API at the back end

All modern browsers have supported Requestanimationframe (see: http://caniuse.com/#search =requestanimationframe). Because it is universally supported, JQuery will use this API to perform animations. The advantages include smoother animations and less CPU usage (so you can conserve electricity on your phone).

Enhanced. Unwrap () function

The. Unwrap () function allows you to delete the parent element of the specified element in the DOM and cannot receive the parameter earlier. If someone wants to set a condition for unwrap, this may be a problem.

In jquery 3.0.0 Alpha,. Unwrap () can receive the jquery selector as a parameter to handle the problem.

Jquery.deferred Upgrade to promises/a+ compatible

Promiseis is the end result of an asynchronous operation-it is an object that promises to deliver results in the future. The most important way to promise interfaces is the then method, which registers the callback function. It is now becoming increasingly popular to use promise in JavaScript to complete asynchronous work. Promises/a+ is an open standard that is compatible with JavaScript promises. (For more information, you can see the link: https://promisesaplus.com/)

From the reference documentation for jquery, the Deferred object is a linked utility object created by the Jquery.deferred () method. It can register multiple callback functions into the callback function queue, dispatch the queue, and update the success and failure status of any synchronous or asynchronous methods. In the JQuery 3.0.0, jquery.deferred objects are upgraded to be compatible with promises/a+ and ES2015 promises. This is the main change in the. then () method.

Better handle error conditions

This version of JQuery is better at handling errors--the error request has been ignored until the current version throws the error.

For example, for offset, to get the coordinates of the current first element, it is necessary to match the elements in the collection relative to the document. If you're trying to find an offset window (Windows) in an earlier version of JQuery, you'll get a result like {top:0, left:0}, instead of throwing an error because the offset window (Windows) is meaningless. In the 3.0 Alpha version, it throws an error.

Another example: $ ("#") now throws an error instead of returning a set of length 0.

Accelerated for custom selectors (such as: visible)

When: Selectors such as visible are used more than once in a document, performance is greatly improved. The interior is implemented through caching-the first time you use this selector, the results are the same later. But each subsequent call returns results quickly because the cache is working. Timmy Willison from JQuery indicated in the report that the cache was being used: the performance of the visible selector increased 17 times times.

These are some of the major updates. The entire list is in their official blog: http://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/.

Where to download the latest version

There are two versions:

JQuery 3.0, which supports modern browsers: Https://code.jquery.com/jquery-3.0.0-alpha1.js

JQuery Compat 3.0, which includes support for IE8: https://code.jquery.com/jquery-compat-3.0.0-alpha1.js

You can also get from NPM:

 npm install jquery@3.0.0-alpha1 npm install JQUERY-COMPAT@3.0.0-ALPHA1