URL a la documentación oficial:
https://jquery.com/upgrade-guide/3.0/#summary-of-important-changes
Es el resumen de cambios donde se explican todas sus preguntas. Tiene ejemplos reales de código y se detallan que funciones se han añadido o modificado además del por qué.
Resumen de los cambios más importantes de jQuery en su versión 3.0.
Existen tres tipos de cambios según su impacto en el código jquery de quién usa una versión anterior:
- Breaking change o ruptura del código por cambios , es un cambio grande/extenso en alguna parte del código que provoca que fallen implementaciones de código creadas con versiones anteriores. Ya sea porque cambia el numero de parámetros , nombre de métodos etc.
- Feature son funcionalidades nuevas que no deberían afectar al código existente (o al menos en la mayoría de los casos). Por ejemplo método nuevo o una propiedad extra nueva.
- Deprecated o deprecado/no válido, significa que la característica en cuestión todavia se puede utilizar y está presente en la versión pero se desaconseja su uso ya que en futuras versiones está pensado eliminarla. Si se sigue usando en un futuro podría provocar una ruptura de código/Breaking-Change a su aplicación.
Un vez comprendido esto debemos saber cuales son los métodos más importantes que sufren cambios.
Ajax , presenta 3 Breaking-Changes y un Feature.
- Los metodos y propiedades del options del objet Ajax, jqXHR.success(), jqXHR.error(), y jqXHR.complete() se van a eliminar a partir de esta versión.En su lugar puedes utilizar los siguientes jqXHR.done(), jqXHR.fail(), y jqXHR.always().
- Se debe declarar el cross-domain cuando realizamos peticiones de scripts entre dominios con jQuery.ajax() o jQuery.get() para evitar ataques deliverados desde el servidor de respuesta.Para ello se debe establecer la propiedad dataType: "script" . No afecta al método jQuery.getScript(), que lo lleva explícito.
- El hash de la url se mantiene en las consultas por ajax.
- Se añade a jQuery.get() y jQuery.post() un objeto settings como propiedad que incluye todas las propiedades que tiene Jquery.Ajax() en su declaración, Jquery.Ajax({...})
Atributos, presenta dos Breaking-Changes, un Feature y un Deprecate.
- El método removeAttr() cuando es utilizado para atributos que contengan un valor booleano deberá usarse el método .prop() creado para ello. Por ejemplo checked, selected o readonly aplicandole el valor a false.
- Una etiqueta select con el atributo multiple devolverá un array vacio siempre que no se halla seleccionado nada. Antes de esta version devolvia null.
- Se da soporte en métodos de clase a documentos SVG.
- Se eliminará en un futuro la posibilidad de llamar a .toggleClass() sin parametros o así .toggleClass(booleano).
Callback , o llamadas de retorno anónimas, presentan 1 Feature.
- Si a un metodo de un objeto le pasamos una función "Callback" y justamente agregamos la llamada al método .lock() habiendo llamado antes al metodo .fire() , dejaremos de ejecutar la función callback.
Core , presenta 7 Breaking-Changes , 2 Features y 3 Deprecates.
- Ahora Jquery 3.0 se ejecuta en modo estricto.
- Ahora los manipuladores de document-ready son asincronos.
Ejemplo:
$(function(){
//document ready
});
.
- isNumeric y toString solo funcionaran con números primitivos y cadenas que puedan convertirse a numeros finitos.
- Las propiedades .context , .size() y .selector fueron deprecadas y se eliminan.
- Se eliminan metodos del core que nunca se documentaron ya que pretendian ser privados jQuery.swap ,jQuery.buildFragment ,jQuery.domManip
- Los siguientes metodos devolverán undefined por defecto si no tienen valor en vez de null
.width(), .height(), .innerWidth(), .innerHeight(), .outerWidth(), and .outerHeight() ,.offsetTop() and .offsetLeft()
- Se puede iterar las colecciones con la nueva sintaxis de ES2015.
Ejemplo:
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 soporta oficialmente las promesas , es decir se puede utilizar el metodo .then(function(){}).catch(function(){})
Ejemplo:
$.when( $.ready, $.getScript("optional.js") ).then(function() {
// the document is ready and optional.js has loaded/run
}).catch( function() {
// an error occurred
});
.
Ejemplo:
$(function(){
});
.
Data , presenta un Breaking-Change.
- A partir de jQuery 3.0, todos los nombres de datos se almacenan en el objeto de datos interna de jQuery en camelCase.
Ejemplo:
$('#miElemento').data('infoPrecio',{..});
//en vez de
$('#miElemento').data('info-Precio',{..});
Deferred o metodos diferidos , presenta 3 Breaking-Changes
- Se actualizan los metodos diferidos para hacerlos compatibles a los estandares a+ y ES6. Se aconseja utilizar el .then() y .catch() para no perder excepciones en procesos muy complicados. Los métodos tales como .done(), .fail()y .pipe()conservan su comportamiento anterior y por lo tanto no son promesas compatibles con el estándar A+ .
Ejemplo:
$.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 , presenta 2 Breaking-Changes.
- Los métodos .width(), .height(), .css("width"), y .css("height") pueden devolver valores que no sean enteros para ser más precisos.
- Los metodos .outerWidth() or .outerHeight() para window incluyen el ancho y alto de la barra de scroll.
Effects , presenta 1 Braking-Change , 1 Feature y 2 Deprecates
- Se han revisado métodos de visibilidad de los elementos para hacerlos más leales a las hojas de estilo.
- Las animaciones ahora utilizan requestAnimationFrame
- Se ha reescrito el método .animate() dejando solo un parámetro
Event presenta 5 Break-Changes y un Deprecate
Aunque siguen siendo ejecutables los métodos .bind(), .unbind(), .delegate()y .undelegate() se deprecan y se desaconseja su uso.En su lugar usar on() y off().
Se elimina el uso de .on("ready", fn) , cambiar por $(fn) .
Selectores
- Si se utiliza jQuery("#") y .find("#") ahora dará error , antes no lo hacia
- Nuevo métodojQuery.escapeSelector() , tomando un string como parametro este escapa todos aquellos caracteres que se entienden como operadores de selección. Esto permitirá poder seleccionar un elemento con un id 'miElemento.hijo'.
Ejemplo:
$( "#" + $.escapeSelector( "miElemento.hijo" ) )
Bueno estos son los que yo creo que son los más importantes, tal y como dije es muy extensa la pregunta realizada y habría que profundizar más , pero para empezar está bien.
- Si veis alguna importante que me faltó o que se deba explicar mejor , por favor informarlo. Seguramente esto deba de ir en otra parte de la web, como bien dicen en una wiki.