Presentación de jQuery 3:17 nuevas y potentes funciones y cómo aprovecharlas

Han pasado más de 10 años desde que jQuery comenzó a sacudir la web y se ha mantenido por buenas razones. En julio de 2015, jQuery anunció la primera versión alfa de la versión 3.0, una actualización importante después de mucho tiempo. Llevan casi 2 años trabajando en esto. La nueva versión promete un jQuery más delgado y rápido teniendo en cuenta la compatibilidad con versiones anteriores.

La versión actual 3.1.1 corrige muchos errores, agrega nuevos métodos, elimina algunas funciones y cambia el comportamiento de algunas funciones. Echemos un vistazo a las nuevas funciones que han agregado y cómo usarlas.

17. Ocultar y mostrar métodos

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

Además de esto, los métodos .hide(), .show() y .toggle() se centrarán en estilos en línea en lugar de estilos calculados. De esta manera, respetarán mejor los valores de visualización de las hojas de estilo siempre que sea posible, lo que significa que las reglas CSS pueden cambiar dinámicamente ante eventos como el cambio de tamaño de la ventana o la 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 darle a tu sitio web un aspecto 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, utilizando la cadena resultante de la llamada a la función para envolver toda la colección.

jQuery( "div" ).wrapAll(function( /* No index argument, since the function would be executed only once */ ) {
 // context is equal to the first found element
 return "<h4></h4>";
});

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

unwrap([selector])

Le permite pasar una cadena que contiene una expresión de selector para que coincida dentro del elemento principal. Si hay una coincidencia, los elementos secundarios coincidentes se desenvuelven; de lo contrario, no lo harán.

15. Ancho/alto de la barra de desplazamiento tenido en cuenta

En jQuery 2, las llamadas a $(window).width() devuelven el "ancho del contenido", que excluye cualquier barra de desplazamiento que el navegador haya agregado si el contenido excede las dimensiones del elemento. Para proporcionar una medida equivalente a la consulta de medios CSS, $(window).outerWidth() y $(window).outerHeight() ahora devuelven el ancho y el alto, incluido el ancho y el alto de la barra de desplazamiento. Esto es equivalente a la propiedad DOM window.innerWidth.

14. Comportamiento de los datos()

En jQuery 3, el comportamiento del método data() se modificó ligeramente para alinear el método con las especificaciones de la API del conjunto de datos. Ahora transformará todas las claves de propiedades para que sean camel case.

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

Si está utilizando una versión anterior, obtendrá el siguiente resultado en la consola:

{custom-property: "Hello World"}

En jQuery 3, obtendrás:

{customProperty: "Hello World"}

Como puede ver, el nombre de la propiedad está en mayúsculas y minúsculas sin guión, mientras que en las versiones anteriores permanecía en minúsculas y conservaba el guión.

13. Soporte de operaciones de clase SVG

jQuery todavía no es completamente compatible con SVG, pero los métodos que manipulan nombres de clases CSS como .hasClass() o .addClass() se pueden usar para apuntar a documentos SVG. Puedes modificar (agregar, alternar, eliminar) o buscar clases con jQuery en SVG y luego diseñar las clases usando CSS.

12. Filtros visibles y ocultos

jQuery 3 modifica el significado de los filtros :visible y :hidden. Considera elementos:visibles si tienen cuadros de diseño, incluidos aquellos de ancho y alto cero. Por ejemplo, el elemento br y los elementos en línea sin contenido serán seleccionados por el filtro :visible.

Si tiene la siguiente página HTML:

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

y ejecutas la declaración:

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. No más redondeos de ancho y alto

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

Por ejemplo, si tienes 3 elementos con un ancho de un tercio (33,3333333%) dentro de un elemento contenedor que tiene un 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 secundarios:

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

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

10. Capa de seguridad adicional

Se ha integrado una capa de seguridad adicional contra ataques de Cross-Site Scripting (XSS). Requiere que los desarrolladores especifiquen el tipo de datos:”script” en las opciones de los métodos $.ajax() y $.get(). Esto evita la posibilidad de un ataque en el que el sitio remoto entregue contenido que no sea un script pero, además, decida publicar un script malicioso. Dado que jQuery.getScript() establece explícitamente el tipo de datos:”script”, este cambio no lo afecta.

$.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 hash no válida

jQuery 3 arroja un error de sintaxis si una cadena de selección no consta más que de una marca hash, como jQuery(“#”) y .find(“#”). En la versión anterior, $(“#”) devolvía una colección vacía y .find(“#”) arrojaba un error.

8. Nuevo método para escapar de una cadena

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

Por ejemplo, si un elemento de la página tiene una identificación de "abc.xyz", no se puede seleccionar con $("abc.xyz") porque el selector se analiza como un elemento con una identificación "abc", que también tiene una clase "xyz". Sin embargo, se puede seleccionar con el nuevo método $(“#” + $.escapeSelector(“abc.xyz”)).

7. jQuery.when() Argumentos

En jQuery 3, si agrega un argumento de entrada con un método then() a $.when(), se interpretará como un "entonces" compatible con Promise. Esto permite una gama mucho más amplia de entradas, incluidas las promesas de Bluebird y ES6, lo que hace posible escribir devoluciones de llamadas asincrónicas más sofisticadas.

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

Las llamadas jQuery.when de múltiples argumentos se comportan como Promise.all, agregando valores de cumplimiento en una matriz 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 de manera idéntica a thenable o cumple con su entrada que no es Promise.

Además, el método jQuery.when() ya no transmite notificaciones de progreso desde la entrada Diferida a la salida Diferida.

6. Se conserva el hash en una URL

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

5. Los objetos diferidos son compatibles con las promesas JS

Los diferidos son objetos encadenables que permiten crear colas de devolución de llamadas. jQuery 3 ha hecho que los objetos diferidos sean compatibles con los nuevos estándares Promises/A+. Hay un cambio clave en el método .then(). Cualquier excepción lanzada dentro de una devolución de llamada .then() ahora se detecta y se convierte en un valor de rechazo. El valor no soportable devuelto por un controlador de rechazo se convierte en un valor de cumplimiento.

El antiguo método diferido:

$.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 estándar Promesas/comportamiento 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 utiliza la API requestAnimationFrame() para ejecutar animaciones. Esta nueva API ejecuta animaciones de forma más fluida y rápida, y consume menos tiempo de CPU. Sólo se utiliza en navegadores que lo admiten. Para navegadores más antiguos como Internet Explorer 9, jQuery utiliza su API más antigua como método alternativo.

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

3. jQuery 3 se ejecuta en modo estricto

La mayoría de los navegadores que admiten jQuery 3 utilizan el modo estricto y la nueva versión se creó teniendo en cuenta esta directiva. Aunque jQuery 3 se escribió en modo estricto, no es necesario que su código se ejecute en modo estricto, por lo que no necesita reescribir el código existente si va 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á ejecutando ASP.net 4.0 que utiliza arguments.caller.callee para intentar rastrear las pilas de llamadas en el método doPostBack(), será mejor que siga usando jQuery 2.x o versiones anteriores. Hoy en día, los navegadores admiten seguimientos de pila a través de error.stack, por lo que no es necesario examinar arguments.caller.callee.

2. Nueva firma para el método Obtener y publicar

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

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

La configuración del objeto 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 contraposición a $.ajax() es que la propiedad del método siempre se ignora, porque $.get() y $.post() tienen un método HTTP preestablecido para realizar la solicitud Ajax (GET y POST).

Considere un código:

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

A pesar de la propiedad del método, la declaración no enviará una solicitud POST sino una solicitud GET.

1. Para… de bucle

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

Leer:26 complementos jQuery modernos para mejorar su sitio web

El bucle for…of se puede utilizar para reemplazar la sintaxis anterior $.each() y facilitar el recorrido por los elementos de una colección jQuery. Supongamos que desea asignar un nombre a cada elemento de entrada de una página.

El código jQuery 2 se vería así…

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++;
 }