Changes and usage of jQuery 3.0, jquery3.0

Changes and usage of jQuery 3.0, jquery3.0

JQuery is the most popular JavaScript library in the world so far and has always been an artifact of our Web developers. Since its initial release in 2006, many Web developers have introduced this excellent library in the project to make development easier.

After three months, the jQuery team finally released the 3.0 Alpha version. There are two versions: jQuery compat 3.0 and jQuery 3.0.

• JQuery compat 3.0 corresponds to the previous version 1.x. it is compatible with more browsers and supports IE to version 8.0.
• JQuery 3.0 corresponds to the previous version 2.x. it focuses on the updated browser and supports IE to version 9.0.

In addition, 3.0 has added support for the Yandex browser, a browser from Russia.

1. Simplified show/hide

The previous show/hide is highly compatible. For example, show can be displayed in style and stylesheet regardless of whether the display of elements is written. 3.0 is different. display: none written in stylesheet is hidden after show is called. 3.0 we recommend that you use the class method to hide the image, or use hide to hide the image first (without css code), and then call show.

<Style> input {display: none ;} </style> <input id = "txt" type = "text" value = ""/> <script >$ ('# txt '). show (); // the status that is still hidden </script>

2. The data method is compatible with the data-name-11 method.

<Input id = "txt" type = "text" value = "" data-name-11 = "aa"/> <script> // version 3.0 output {"name-11 ": aa}, previous version output {}$ ('# txt '). data () </script>

The essence of this problem is the implementation difference of the $. camelCase method.

// 3.0 output "name-11", output "name11" $. camelCase ('data-name-11') in versions earlier than 3.0 ')

3. derferred is compatible with Promise/A +

3.0 can finally confidently announce support for Promise/A, which has been criticized for being castrated.

4. The $. ajax object deletes the success | error | complete method.

This is because of the promotion of Promise/A specifications, and more people are using Promise. There is no need for several methods corresponding to Derferred.

• Derferred. done-> jqXHR. success
• Derferred. fail-> jqXHR. error
• Derrerred. always-> jqXHR. complete

// The following method does not exist after 3.0 $. ajax (). success $. ajax (). error $. ajax (). complete

5. The return values of width/height, css (width)/css (height) are in decimal format.

In some browser cases, floating point numbers are returned.

6. removed the fast function load | unload | error

• The load name is the same as the ajax load name, which is ambiguous.
• Unload, if the load is removed, does not make sense.
• Error is registered using window. onerror, which is not a standard event hander. Therefore, we recommend that you remove it.

The above content summarizes the changes in jquery3.0. The following describes the updates and usage of jquery3.0.

Show and hide

The main change is how the function will work. And there is a good reason to do this. In earlier implementations, the hide () function sets the css attribute to "display: none", and the show () function clears this attribute. However, this is a bit confusing. Let's take a look at several examples:

1. If the show () function tries to set a node to "display: block" and implements the "display: inline" attribute in another style table, this will start to destroy the code.

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

In addition, there are many other problems that the JQuery team has to fix. This leads to complicated implementation and performance problems, so they are migrated to a simple model.

In the future, if you set "display: none" and use "show ()", "slideDown ()", "fadeIn ()" or similar methods to display nodes, it does not work. A better way is to use "addClass ()" and "removeClass ()" to control the display. Alternatively, you can call "hide ()" on the element when "ready ()" is called ()".

Quick example:

<!DOCTYPE HTML>


. Data () Key naming rules
The jQuery team changed the implementation of the. data () function to better comply with the HTML5 dataset specifications. If the key in the data-* attribute contains a number, the number is no longer involved in conversion. Consider the following example:
Use jQuery 2.1.4:
 
Objects are not displayed in the console window.
Use jQuery 3.0.0:
 
Since now the number is not involved in converting into a camel spell, the key is converted into a foo-42-name. Therefore, we get the output in the console. The fiddle URL is http://jsfiddle.net/nWCKt/25. You can change the jQuery version to observe the changes.
Similarly, if we want to use data () to display all data without any parameters, if the key name of the data-* attribute is followed by a number after the hyphen, the number of parameters will also be changed in the two jQuery versions, just as in the preceding example.
The width () and height () functions return small values.
Some browsers return the width and height as sub-pixel values. Now, no matter whether the browser supports it or not, jQuery's .width().height()).css ("width") can return small values. This may be good news for users who want to design webpages with sub-pixel precision.
The. load (),. unload (), and. error () functions are removed.
These methods have been used earlier and have been removed from jQuery 3.0.0 alpha. The recommended method is to use the. on () function to handle these events. Brief example:
HTML:

JavaScript:
Earlier implementation method (unavailable now)
$( "#spacen" ).load(function() {// Handler implementation});
Recommended implementation methods:
$( "#spacen" ).on( "load", function() {// Handler implementation});
The jQuery object can be traversed now.
Now we can traverse the jQuery object and use ES2015's for-. So you can use it like this:
for ( node of $( "<div id=spacen>" ) ) {console.log( node.id ); // Returns ‘spacen'}
JQuery animation now uses the requestAnimationFrame API at the backend.
All modern browsers have supported requestAnimationFrame (see http://caniuse.com/#search=requestAnimationFrame. JQuery uses this API to execute animations because it is widely supported. Its advantages include smoother animation and less CPU usage (therefore, it can save power on mobile phones ).
Enhancement. unwrap () function
The. unwrap () function allows you to delete the parent element of a specified Element in the DOM. parameters cannot be received earlier. This may be a problem if someone wants to set a condition for unwrap.
In jQuery 3.0.0 alpha,. unwrap () can receive the jQuery selector as a parameter to handle this problem.
JQuery. Deferred upgraded to Promises/A + compatible
Promiseis is the final result of an asynchronous operation-it is an object that promises to deliver results in the future. The main method for the promise and promise interfaces is the then method, which registers the callback function. Nowadays, it is increasingly popular to use Promise in JavaScript to complete asynchronous work. Promises/A + is an open standard compatible with JavaScript promises. (For more information, see the link: https://promisesaplus.com /)
From the jQuery reference document, the Deferred object is a connectable utility object created by the jQuery. Deferred () method. It can register multiple callback functions into the callback function queue, schedule this queue, and update the Success and Failure statuses of any synchronous or asynchronous methods. In jquery 3.0.0, The jQuery. Deferred object is upgraded to be compatible with Promises/A + and ES2015 Promises. This is the main change to the. then () method.
Better handle errors
This version of jQuery can better handle errors-error requests have been ignored until the current version throws an error.
For example: Considering the offset, to obtain the coordinates of the current first element, it is necessary to match the elements in the set relative to the document. If you are trying to find the offset window (window) in earlier versions of jQuery, you will get the result {top: 0, left: 0} instead of throwing an error, this is because the offset window is meaningless. In alpha 3.0, an error is thrown.
In another example, $ ("#") will throw an error instead of returning a set with a length of 0.
The user-defined selector (for example, visible) is accelerated.
When a selector such as visible is used multiple times in a document, the performance is greatly improved. It is implemented through caching internally-after using this selector for the first time, the returned results will be the same in the future. However, each subsequent call returns results quickly because the cache takes effect. In the report, tianywillison from jQuery pointed out that after the cache is used, the visible selector performance is improved by 17 times.
These are some major updates. The entire list is on 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 obtain the following information from npm:
npm install jquery@3.0.0-alpha1npm install jquery-compat@3.0.0-alpha1
Articles you may be interested in:

 

 
  
How to Use the Jquery template Data Binding plug-in
 
  
Jquery indexOf usage
 
  
Examples of jquery showModelDialog
 
  
JQuery jcrop plugin usage
 
  
How to Use the jquery upload plugin fineuploader to upload files (jquery Image Upload plugin)
 
  
Examples of several common use methods of jquery each
 
  
How to Use the jquery plug-in lazyload. js to delay image loading
 
  
Jquery array encapsulation usage method sharing (jquery array traversal)
 
  
JQuery filter function usage
 
  
JQuery. holdReady () Usage
 
  
How to Use the Jquery. lazyload. js extension for jquery image delayed Loading
 
  
JQuery 1.9 uses $. support instead of $. browser.
 
  
How to Use the jquery UI Datepicker time control (Final Version)