jQuery tiene la característica de poder encadenar funciones en una selección de elementos permitiendo un mejor desempeño.
Un ejemplo que puede ser muy común, es modificar el ancho y el alto de un <div> (que tenga el ID alerta).
1 |
<div id="alerta" style="background-color:#00F;"></div> |
1 2 3 |
$(document).ready(function(){ $('#alerta').width(500).height(300); }); |
Si estuviésemos usando javaScript tendríamos que emplear 2 líneas para realizar la misma operación. Si el código es correcto, debería apareceros un gran rectángulo azul.
jQuery permite encadenar funciones una tras otra, separando cada una por un punto operando en la colección de elementos seleccionada. En el caso anterior cambia el ancho y el alto del elemento con el id alerta.
Encadenar las funciones jQuery permite abreviar un largo número de acciones. Basándonos en el caso anterior, queremos añadirle un texto dentro del <div> y además que aparezca gradualmente.
1 |
$('#alerta').width(500).height(300).text('Hola mundo!').fadeIn(1000); |
Resultado final del código
También podemos escribirlo para que sea más fácil de leer
1 2 3 4 5 6 7 |
$('#alerta').width(500) .height(300) .text('Hola mundo!') .fadeIn(1000); |
Tan pronto añadas un punto y coma en la última línea de la cadena, se interpreta como una sola declaración.
Y hasta aquí el tutorial sobre encadenar funciones en jQuery, espero que le saquéis mucho partido. A seguir picando 🙂