10

jQuery es una de las librerías de Javascript más populares y usadas debido a su rapidez, sencillez y a la amplia gama de posibilidades que ofrece.

Permite la manipulación de eventos, animaciones, carga dinámica de contenidos, etc con unas pocas líneas de código.

Además funciona en los navegadores más usados como IE, Safari, Mozilla, Chrome.

La versión 3 empezó a prepararse en octubre de 2014 y fue lanzada en junio de 2016.

¿Cuáles son las principales novedades de jQuery 3?

¿Cuáles son las principales ventajas de esta librería con respecto a las versiones 1 y 2?

¿Qué hacer para empezar a usarla?

Nota: Aunque se podría considerar como una pregunta muy amplia, considero útil la existencia de una pregunta del género por varios motivos, entre ellos.

  1. Estamos hablando de una nueva version de la librería, por lo que sería importante tener mano al menos la información básica de la misma.

  2. jQuery es usada por millones de usuarios, muchos de ellos de habla hispana y al menos por ahora toda esa información existirá básicamente en inglés.

  3. jQuery 3 supone cambios importantes con respecto a sus versiones anteriores.

6
  • 1
    Tenemos un Wiki de S.O. Español? Pregunto porque la respuesta es larga y ninguno debe tener de memoria toda la información. Se me ocurren dos cambios importantes, pero son dos detalles entre muchos. ¿Serán aceptables muchas respuestas parciales?
    – ffflabs
    Commented el 24 feb. 2017 a las 11:56
  • Creo que tratándose de una nueva versión de una librería tan popular como jQuery no importaría que la respuesta fuese larga. La idea es tener a mano las principales novedades de la versión 3, en español. Y la explicación de cómo implementarla. Si se quiere ampliar se podría poner un enlace a la info oficial (en inglés).
    – A. Cedano
    Commented el 24 feb. 2017 a las 15:41
  • 2
    Estoy de acuerdo, pero prácticamente estás pidiendo que alguien se aprenda la documentación de los cambios y los resuma acá. Sería más valioso si cada persona pudiese dar ejemplos de cada cambio y en qué afecta el código existente. En mi caso, el hecho de que las llamadas ajax ahora cumplan con el estandar Promises/A+ me cambió muchas cosas. La deprecación de algunas herramientas de detección de browser rompe la compatibilidad con plugins viejos (del mismo jQuery UI), pero el resto de los cambios me afectó poco y nada.
    – ffflabs
    Commented el 24 feb. 2017 a las 16:10
  • Gracias @amenadiel. Yo hablo de una especie de síntesis de lo principal. No creo que sea tan difícil, y luego que si alguien quiere profundizar tenga a mano el enlace a la documentación oficial (por ahora en inglés) y en un futuro a una entrada wiki cuando alguien se anime a traducirla. De todos modos la pregunta corre el riesgo de ser cerrada... ya veremos que pasa.
    – A. Cedano
    Commented el 24 feb. 2017 a las 23:57
  • 1
    A mi esta pregunta me parece excesivamente amplia, el tema es interesante pero ¿no se podría dividir en bloques más pequeños haciendo preguntas sobre cambios o funcionalidades concretas de esta versión?
    – user7176
    Commented el 3 ago. 2017 a las 20:39

1 respuesta 1

12
+100

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.

  1. 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({...})
  2. 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).
  3. 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.
  4. 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
});

.

  • El método jQuery.unique(),pasa a llamarse jQuery.uniqueSort()

    • Se depreca y se desaconseja el uso de jQuery.parseJSON() porque se soporta el uso nativo de JSON.parse()
    • A partir de jQuery 3.0, la forma recomendada para agregar un document ready es la siguiente

Ejemplo:

$(function(){

});

.

  1. 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',{..});
  1. 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 */
 });
  1. 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.
  2. 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
  3. 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) .

  4. 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.
8
  • 1
    Gracias. Pero convendría tener al menos lo más importante en español. No todo el mundo sabe inglés. Sería de una gran utilidad.
    – A. Cedano
    Commented el 24 feb. 2017 a las 11:41
  • 1
    Correcto pero hoy en día quien programe y no sepa algo mínimo de inglés , se debería poner las pilas no crees ? , aún así existe la posibilidad de traducir con el navegador la página que estés visitando. Commented el 24 feb. 2017 a las 11:45
  • 3
    Angel, mucha gente programa y no sabe ingles... cierto es que es util pero bueno cada uno es cada uno . De no ser asi, StackOverflow ,en idiomas que no son ingles como este sitio, no existirian
    – lois6b
    Commented el 24 feb. 2017 a las 11:50
  • Estoy de acuerdo con vosotros casi totalmente, pero aun así me sigue pareciendo bastante extensa la respuesta a esas tres preguntas como para incluirlas aquí. Para mí un enlace a la documentación oficial justo en la sección donde se responden esas preguntas es totalmente válido. Mucha gente agradecerá el enlace directo a esa sección y puede que muchos de ellos lo guarden para un futuro. Editaré mi respuesta añadiendo lo esencial. Commented el 24 feb. 2017 a las 13:14
  • 1
    @Angel Fraga Parodi tratándose de una nueva versión de algo tan popular como jQuery creo que no hay que escatimar esfuerzos para dar una explicación detallada de las principales novedades por ejemplo. La idea es que en la respuesta se tenga a primera mano lo esencial y como han dicho los compañeros acompañar la respuesta de un enlace oficial para aquellos que quieran profundizar.
    – A. Cedano
    Commented el 24 feb. 2017 a las 13:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.