Saltar la navegación

Primeros pasos con jQuery

Hagamos algunas pruebas sencillas con este código HTML:

<div id="ejemplo">
    <p>Contenido de ejemplo.</p>
</div>

Ocultar el elemento:

$("#ejemplo").hide();

Ocultarlo con un fundido:

$("#ejemplo").fadeOut();

Hacer una pequeña animación:

$("#ejemplo").animate({
    marginLeft: "150px",
    fontSize: "3em"
}, 1500 );

Hacer esta misma animación y después ocultar el elemento con un fundido (encadenamos órdenes):

$("#ejemplo").animate({
    marginLeft: "150px",
    fontSize: "3em"
}, 1500 ).fadeOut();

Añadimos un párrafo justo antes del elemento:

$("#ejemplo").before('<p>Nuevo contenido.</p>');

Como vemos, jQuery nos permite hacer, con muy poco código, cosas que en ocasiones requieren conocimientos de JavaScript avanzados y muchas líneas de código. Pero por debajo, todo es JavaScript.

La gran ventaja de jQuery es que su uso resulta muy intuitivo.

Plugins para jQuery

Una ventana adicional de jQuery es que tiene un montón de plugins de código abierto. Estos plugins nos permiten añadir funcionalidad o efectos a nuestras páginas de una manera muy sencilla (la parte complicada del código está en jQuery y en los propios plugins).

Tal vez Lightbox sea el plugin más famoso para jQuery, pero hay mucho más: para formulariospara crear animaciones...

Buscad un poco en Internet. Seguro que encontráis muchas opciones interesantes.