E
URL to official documentation: https://jquery.com/upgrade-guide/3.0/#summary-of-important-changes It is the summary of changes where all your questions are explained. It has real code examples and is detailed that functions have been added or modified in addition to why.Summary of the most important changes of jQuery in version 3.0.There are three types of changes depending on their impact on the jquery code of who uses an earlier version:Breaking change or breakdown of the code by changes, is a big/extensive change somewhere in the code that causes code failures created with previous versions. Whether it changes the number of parameters, name of methods etc. Feature are new functionalities that should not affect the existing code (or at least in most cases). For example new method or new extra property.Deprecated or deprecado/not valid, means that the feature in question can still be used and is present in the version but it is discouraged its use as in future versions it is intended to remove it. If it is still used in the future it could cause a rupture of code/Breaking-Change to its application.Once this is understood, we must know what the most important methods of change are.Ajax , presents 3 Breaking-Changes and a Feature.The methods and properties of the options of the Ajax, jqXHR.success(), jqXHR.error(), and jqXHR.complete() object will be removed from this version. Instead you can use the following jqXHR.done(), jqXHR.fail(), and jqXHR.always().Cross-domain must be declared when we make script requests between domains with jQuery.ajax() or jQuery.get() to avoid attacks delivered from the response server. To do this you must establish the dataType: "script" . It does not affect the jQuery.getScript(), which carries it explicit.The url hash remains in the queries by ajax.Added to jQuery.get() and jQuery.post() an object settings as a property that includes all the properties that Jquery has.Ajax() in its statement, Jquery.Ajax({...}) Attributes, presents two Breaking-Changes, a Feature and a Deprecate.The removeAttr() method when used for attributes containing a boolean value should be used the .prop() method created for it. For example checked, selected or readonly applying the value to false.A select tag with the multiple attribute will return an empty array whenever nothing is selected. Before this version devolvia null.Support is provided in class methods to SVG documents.The possibility of calling .toggleClass() without parameters or so .toggleClass(booleano) will be eliminated in the future.Callback, or anonymous return calls, present 1 Feature.If a method of an object we pass a "Callback" function and just add the call to the .lock() method having called the .fire( method before), we will stop running the callback function.Core, presents 7 Breaking-Changes, 2 Features and 3 Deprecates.Now Jquery 3.0 runs in strict mode.Now document-ready manipulators are asynchronous.Example:$(function(){
//document ready
});
. isNumeric and toString only work with primitive numbers and strings that can become finite numbers.
The properties .context , .size() and .selector were depressed and eliminated.Chore methods are removed that were never documented as they pretend to be private jQuery.swap ,jQuery.buildFragment ,jQuery.domManip The following methods will return undefined by default if they have no value instead of null
.width(), .height(), .innerWidth(), .innerHeight(), .outerWidth(), and .outerHeight() ,.offsetTop() and .offsetLeft()You can iterate the collections with the new ES2015 syntax. Example:var elems = $(".someclass");
// forma clasica de jquery
$.each(function(i, elem) {
// trabajamos con cada elemento o "this" un objeto
});
// forma mas elegante de ES2015
for ( let elem of elems ) {
// trabajamos con el elemento
}
.Jquery.ready officially supports promises, i.e. you can use the method .then(function(){}).catch(function(){})Example:$.when( $.ready, $.getScript("optional.js") ).then(function() {
// the document is ready and optional.js has loaded/run
}).catch( function() {
// an error occurred
});
.The jQuery.unique() method is called jQuery.uniqueSort()The use of jQuery.parseJSON() is prepped and discouraged because the native use of JSON.parse() is supportedFrom jQuery 3.0, the recommended form to add a ready document is the followingExample:$(function(){
});
. Data , presents a Breaking-Change.From jQuery 3.0, all data names are stored in the internal data object of jQuery in camelCase.Example:$('#miElemento').data('infoPrecio',{..});
//en vez de
$('#miElemento').data('info-Precio',{..});
Deferred or different methods, presents 3 Breaking-ChangesDeferred methods are updated to make them compatible with a+ and ES6 standards. It is advised to use .then() and .catch() to avoid losing exceptions in very complicated processes. The methods such as .done(), .fail() and .pipe() preserve their previous behavior and therefore are not promises compatible with the A+ standard.Example:$.ajax("/status")
.then(function(data) { // antes usabamos .done()
whoops();
// la consola muestra "jQuery.Deferred exception: whoops no es una funcion"
// nada del código siguiente se ejecuta
})
.catch(function(arg) { //antes usabamos .fail()
/* Este código se ejecuta tras el error anterior
arg es un objeto de Error con el mensaje de error anterior
con done() Este código no se ejecuta ya que la excepción no seria detectada */
});
Dimensions , presents 2 Breaking-Changes.The methods .width(), .height(), .css("width"), and .css("height") can return values that are not integer to be more precise.The .outerWidth() or .outerHeight() para window method includes the width and height of the scroll bar. Effects , presents 1 Braking-Change , 1 Feature and 2 DeprecatesMethods of visibility of the elements have been revised to make them more loyal to the style sheets.The animations now use requestAnimationFrame The .animate() method has been rewritten leaving only one parameterEvent presents 5 Break-Changes and a DeprecateAlthough .bind(), .unbind(), .delegate() and .undelegate() methods remain executable, they are seized and their use is discouraged. Instead use on() and off().It eliminates the use of .on("ready", fn) , change for $(fn) .Selectors If you use jQuery("#") and .find("#") you will now make mistake, before you do notNew methodjQuery.escapeSelector() , taking a string as parameter this escapes all those characters that are understood as selection operators. This will allow you to select an element with a id 'myElemento.hijo'.Example:$( "#" + $.escapeSelector( "miElemento.hijo" ) )
Well these are the ones that I think are the most important, as I said the question is very extensive and we should go deeper, but to start it is fine. If you see any major missing me or need to explain better, please report it. This must probably go somewhere else on the web, as they say in a wiki.