Descubriendo jQuery 3: 17 potentes nuevas características y cómo aprovecharlas

Han pasado más de 10 años desde que jQuery empezó a revolucionar la web y se ha mantenido por buenas razones. En julio de 2015, jQuery anunció la primera alpha de la versión 3.0 – una actualización importante después de mucho tiempo. Han estado trabajando en esto casi 2 años. La nueva versión promete un jQuery más ligero y rápido con compatibilidad hacia atrás en mente.

La versión actual 3.1.1 corrige muchos errores, añade nuevos métodos, elimina algunas funciones y cambia el comportamiento de unas pocas. Veamos qué nuevas características han añadido y cómo usarlas.

17. Métodos Hide y Show

Para aumentar la compatibilidad con diseño responsive, jQuery 3 se ha mejorado para ocultar muchos elementos. Una prueba en 55 muestras muestra que la nueva versión es un 2% más rápida que la anterior.

Además, los métodos .hide(), .show() y .toggle() se centrarán en estilos en línea en lugar de estilos computados. Así respetarán mejor los valores de display de las hojas de estilo siempre que sea posible, lo que significa que las reglas CSS pueden cambiar dinámicamente ante eventos como redimensionamiento de ventana o reorientación del dispositivo.

<script> $( "#showr" ).click(function() { $( "div" ).first().show( "fast", function showNext() { $( this ).next( "div" ).show( "fast", showNext ); }); }); $( "#hidr" ).click(function() { $( "div" ).hide( 1000 ); }); </script> 

Leer: 28 increíbles efectos CSS3 para dar a tu web un look moderno

16. Funciones WrapAll() y Unwrap()

En jQuery 2, el método .wrapAll() se comportaba como .wrap() cuando se pasaba una función. Esto ha cambiado ahora: .wrapAll(function) llama a su función una vez, usando el resultado en string de la llamada a la función para envolver toda la colección.

jQuery( "div" ).wrapAll(function( /* No hay argumento índice, ya que la función se ejecutaría solo una vez */ ) { // context es igual al primer elemento encontrado return "<h4></h4>"; });

En jQuery 3, hay un parámetro selector opcional para el método unwrap(). La nueva firma del método es:

unwrap([selector])

Te permite pasar un string que contiene una expresión selector para coincidir dentro del elemento padre. Si hay coincidencia, los elementos hijos coincidentes se desenvuelven, sino no lo harán.

15. Ancho/alto de scrollbar tenido en cuenta

En jQuery 2, las llamadas a $(window).width() devuelven el 'ancho de contenido' que excluye cualquier scrollbar que el navegador haya añadido si el contenido excede las dimensiones del elemento. Para proporcionar una medida equivalente a la media query de CSS, $(window).outerWidth() y $(window).outerHeight() ahora devuelven el ancho y alto incluyendo el ancho y alto del scrollbar. Esto es equivalente a la propiedad DOM window.innerWidth.

14. Comportamiento de data()

En jQuery 3, el comportamiento del método data() se ha alterado ligeramente para alinear el método a las especificaciones de la Dataset API. Ahora transformará todas las claves de las propiedades a camelCase.

var $elem = $('#container'); $elem.data({ 'custom-property': 'Hello World' }); console.log($elem.data());

Si usas una versión antigua, obtendrás el siguiente resultado en consola:

{custom-property: "Hello World"}

En jQuery 3, obtendrás:

{customProperty: "Hello World"}

Como ves, el nombre de la propiedad está en camelCase sin guion, mientras que en versiones antiguas permanecía en minúsculas y conservaba el guion.

13. Operaciones de clase soportan SVG

jQuery todavía no soporta completamente SVG, pero los métodos que manipulan nombres de clases CSS como .hasClass() o .addClass(), pueden usarse para apuntar a documentos SVG. Puedes alterar (añadir, alternar, eliminar) o encontrar clases con jQuery en SVG, luego estilizar las clases usando CSS.

12. Filtros Visible y Hidden

jQuery 3 modifica el significado de los filtros :visible y :hidden. Considera elementos :visible si tienen cualquier caja de layout, incluyendo aquellas de ancho y alto cero. Por ejemplo, elemento br y elementos en línea sin contenido serán seleccionados por el filtro :visible.

Si tienes la siguiente página HTML:

<section></section> <div></div> <br />

Y ejecutas la sentencia:

console.log($('body :visible').length);

En jQuery 1 y 2, obtendrás 0 como resultado, pero en esta versión, el resultado será 3.

11. Sin más redondeo para ancho y alto

jQuery ahora devuelve el valor de .width() y .height() en números flotantes en lugar de enteros, siempre que el navegador lo soporte. Para usuarios que buscan precisión de subpíxel para diseñar páginas web, esto puede ser una buena noticia.

Por ejemplo, si tienes 3 elementos con ancho de un tercio (33.3333333%) dentro de un elemento contenedor que tiene ancho de 100px:

<div class="container"> <div>The car is </div> <div>black</div> <div>Audi</div> </div>

Si intentas obtener el ancho de los elementos hijos:

$('.container div').width();

Obtendrás el valor 33.3333333, el resultado más preciso.

10. Capa extra de seguridad

Se ha integrado una capa extra de seguridad contra ataques de Cross-Site Scripting (XSS). Requiere a los desarrolladores especificar dataType:"script" en las opciones de los métodos $.ajax() y $.get(). Esto previene la posibilidad de un ataque donde el sitio remoto entrega contenido no script pero decide servir un script malicioso. Dado que jQuery.getScript() establece explícitamente dataType:"script", no se ve afectado por este cambio.

$.ajax({ accepts: { mynewcustomtype: 'application/abc-some-custom-type' }, // how to deserialize a `mynewcustomtype` converters: { 'text mynewcustomtype': function(result) { // do things return newresult; } }, // Expect a `mynewcustomtype` back from server dataType: 'mynewcustomtype' });

9. La marca de hash inválida

jQuery 3 lanza un error de sintaxis si una cadena selector consiste solo en una marca de hash, como jQuery("#") y .find("#"). En la versión antigua, $("#") devolvía una colección vacía y .find("#") lanzaba un error.

8. Nuevo método para escapar strings

El nuevo método jQuery.escapeSelector() te permite escapar cualquier string o carácter que tenga un significado especial en un selector CSS. Es útil en casos donde un ID o nombre de clase tiene caracteres con significado especial en CSS, como punto y coma o punto.

Por ejemplo, si un elemento en la página tiene un id de "abc.xyz", no puede seleccionarse con $("#abc.xyz") porque el selector se parsea como un elemento con id 'abc', que también tiene una clase 'xyz'. Sin embargo, puede seleccionarse con el nuevo método $("#" + $.escapeSelector("abc.xyz")).

7. Argumentos de jQuery.when()

En jQuery 3, si añades un argumento de entrada con un método then() a $.when(), se interpretará como un "thenable" compatible con Promesas. Esto permite una gama mucho más amplia de entradas, incluyendo promesas Bluebird y promesas ES6, lo que hace posible escribir callbacks asíncronos más sofisticados.

$.when($.ajax("test.apx")).then(function(data,textStatus,jqHXR) { alert (jqHXR.status); //alerts 200 }); 

Las llamadas multi-argumento a jQuery.when se comportan como Promise.all, agregando valores de cumplimiento en un array de cumplimiento, o alternativamente rechazando con el primer valor de rechazo. Las llamadas de argumento único y cero se comportan como Promise.resolve, devolviendo un Deferred que se resuelve idénticamente a thenable, o cumple con su entrada no-Promise.

Además, el método jQuery.when() ya no pasa notificaciones de progreso de Deferreds de entrada al Deferred de salida.

6. Hash en una URL se preserva

El método jQuery.ajax() ahora envía la URL completa al transporte (script, xhr, jsonp, o transporte personalizado). Ya no elimina el hash en la URL si está presente. Sin embargo, necesitas eliminarlo manualmente antes de enviar la petición si el servidor al otro extremo de la conexión no puede lidiar con un hash en una URL.

5. Objetos Deferred compatibles con promesas JS

Los Deferreds son objetos encadenables que hacen posible crear colas de callback. jQuery 3 ha hecho los objetos deferred compatibles con los nuevos estándares Promises/A+. Hay un cambio clave en el método .then(). Cualquier excepción lanzada dentro de un callback .then() ahora se captura y convierte en un valor de rechazo. El valor no thenable devuelto desde un manejador de rechazo se convierte en un valor de cumplimiento.

El método Deferred de estilo antiguo:

$.ajax("/stat") .done(function(data) { whoops(); // console displays: "whoops is not a function" // no further execution }) .fail(function(arg) { // doesn't execute since the was not caught });

El nuevo comportamiento estándar Promises/A+

$.ajax("/stat") .then(function(data) { whoops(); // console displays "jQuery.Deferred exception: whoops is not a function" // no further execution }) .catch(function(arg) { // arg is an Error object - "whoops is not a function" });

4. Nueva API para animaciones

jQuery 3 usa la API requestAnimationFrame() para ejecutar animaciones. Esta nueva API ejecuta animaciones más suaves y rápidas, consumiendo menos tiempo de CPU. Solo se usa en navegadores que la soporten. Para navegadores antiguos como Internet Explorer 9, jQuery usa su API antigua como método fallback.

Leer: 24 herramientas de animación CSS3 y HTML5 para diseñadores

3. jQuery 3 se ejecuta en modo estricto

La mayoría de navegadores que soportan jQuery 3 usan modo estricto, y la nueva versión se ha construido con esta directiva en mente. Aunque jQuery 3 se ha escrito en modo estricto, tu código no está obligado a ejecutarse en modo estricto, así que no necesitas reescribir el código existente si vas a migrar a la versión actual. Sin embargo, hay una excepción: algunas versiones de ASP.net no son compatibles debido al modo estricto.

Si estás ejecutando ASP.net 4.0 que usa arguments.caller.callee para intentar rastrear a través de pilas de llamadas en el método doPostBack(), mejor sigue usando jQuery 2.x o versiones anteriores. Hoy en día los navegadores soportan trazas de pila via error.stack, así que no es necesario examinar arguments.caller.callee.

2. Nueva firma para métodos Get y Post

jQuery tiene una nueva firma para las funciones de utilidad $.get() y $.post() para alinearlas a $.ajax(). La nueva firma es parámetros de configuración.

$.get([settings]) $.post([settings])

El objeto settings puede tener muchas propiedades. Es el mismo objeto que puedes proporcionar a $.ajax(). La única diferencia al pasar el objeto a $.get() y $.post() en lugar de $.ajax() es que la propiedad method siempre se ignora, porque $.get() y $.post() tienen un método HTTP preestablecido para realizar la petición Ajax (GET y POST).

Considera un código:

$.get({ url: 'https://www.rankred.com', method: 'POST' // property is ignored });

A pesar de la propiedad method, la sentencia no enviará una petición POST sino una GET.

1. Bucle For…of

jQuery 3 soporta el bucle for…of introducido en la especificación ECMAScript 6. Te permite iterar sobre objetos iterables como Map, Set, Array, etc. Al usar este bucle, el valor obtenido es un elemento DOM de una colección jQuery, uno a la vez.

Leer: 26 plugins modernos de jQuery para mejorar tu web

El bucle for…of puede usarse para reemplazar la antigua sintaxis $.each(), y facilita iterar a través de los elementos de una colección jQuery. Asumamos que quieres asignar un nombre a cada elemento input de una página.

El código jQuery 2 sería…

var $inputs = $('input'); for(var j = 0; j < $inputs.length; j++) { $inputs[j].id = 'input - ' + j; }

El código jQuery 3 será similar a…

var $inputs = $('input'); var j = 0; for(var input of $inputs) { input.id = 'input - ' + j++; }