JQuery, ejemplos prácticos para usar en páginas web

JQuery para aficionados, un sencillo tutorial en el que explicamos de forma detallada como usar esta librería de JavaScript en páginas HTML.
Experimentar agregando efectos vistosos y animaciones interesantes que se pueden probar en la computadora offline, antes de agregarlas a las páginas de un blog o sitio web.

¿Qué es y para qué usar JQuery?

Todos los navegadores web modernos incluyen de forma nativa información para procesar muchas funciones básicas de JavaScript, que permiten funcionalidades elementales.
JQuery es una librería que contiene otras funcionalidades adicionales, que nos permiten agregarle a las páginas mucha más interacción y efectos.
Este artículo está dedicado a varios de los lectores interesados en las posibilidades que permite JQuery y que no son desarrolladores.
Tratamos de explicar lo más elemental usando ejemplos prácticos y mostrando el código, que también se puede descargar para experimentar offline.

Como usar JQuery en mis páginas

El primer requisito para usar JQuery es agregar la librería, que podemos cargar desde su principal repositorio o desde otros CDN de internet, como explicamos más abajo.
A continuación debemos de insertar dentro de un elemento SCRIPT, las instrucciones de la siguiente forma:
En esta página mostramos los ejemplos usando el evento (desencadenador) "click" en un botón.
También se puede emplear en enlaces, bloques (DIV) o en otros elementos HTML, siempre que se les agregue un identificador (ID).
Es posible también usar otros eventos como dblclick, hover (posicionar el cursor del mouse encima), keypress, keyup, focus y otros.
La sintaxis básica es la siguiente.
En la siguiente imagen se puede ver de forma gráfica el uso de cada elemento.

Ejemplos prácticos del uso de JQuery

Efectos y animaciones

En los primeros ejemplos usamos varios métodos de efectos de JQuery, para mover, ocultar y mostrar elementos, usando animaciones.
En el primero de ellos al dar clic en el botón "Ocultar bloque" usamos el evento "click()" para ocultar con la función "hide()" el bloque de ejemplo que posee el identificador "cont1".
Usamos el siguiente código.

<script>
$("#c1").click(function() {
$("#cont1").hide(1500);
});
</script>

Ocultar bloque
Mostrar bloque
Ocultar / Mostrar
Cambiar tamaño
Ocultar con FadeOut
Mostrar con FadeIn
Mover
Cambiar estilo CSS
Todos los efectos anteriores se consiguen usando los siguientes métodos:
hide (Ocultar bloque), show (Mostrar bloque), toggle (Ocultar / Mostrar. Permite alternar entre hide y show), animate (Cambiar tamaño y Mover), fadeToggle (Ocultar con FadeOut), fadeIn (Mostrar con FadeIn) y css (Cambiar estilo CSS).
El código usado en todos los ejemplos que mostramos en esta página, se puede comprobar cargando el siguiente archivo JS externo en el que están comentadas todas las funciones: Cargar JS

Otros ejemplos de uso en la práctica de JQuery

Copiar y escribir texto y HTML con JQuery

Al presionar el siguiente botón, se copia el título (h1) de esta página y se pega en un contenedor a continuación en formato de texto.
Copiar y escribir texto

En el siguiente caso se copia el contenido del elemento H1 y se escribe en formato HTML.
Copiar y escribir HTML

Usar otros eventos con JQuery

Usar contenedor o bloque como evento
En el siguiente ejemplo usamos como evento en vez de un enlace o un botón, el mismo contenedor o bloque.
Usamos tres métodos encadenados, hide(), delay() y show(), para que al dar clic encima se oculte el bloque.
Vuelve a aparecer lentamente después de dos segundos.

Usar evento hover
Otros de los eventos muy utilizados es hover, que permite efectuar cualquier acción al situar el cursor del ratón encima de un elemento.
Para eso usamos la clase definida hover con la función addClass(), a continuación removeClass().
Hover al igual que click acepta dos funciones.

Usar eventos del teclado
Otros eventos que se emplean mucho en las páginas son los que desencadenan acciones en el teclado.
En el siguiente ejemplo usamos los eventos keyup() y keydown(), para contar la cantidad de caracteres en el cuadro de texto y mostrarlos.
Contador de caracteres

Desde donde descargar o cargar JQuery

Las últimas versiones de JQuery se pueden descargar desde su sitio web en https://code.jquery.com/ o comprobar las disponibles desde esta página.
Hay disponibles versiones para desarrolladores sin comprimir, en la que se pueden leer los comentarios y entender el código. También una compactada o mini de menor tamaño, que es la que se usa en las páginas.
Esta versión minimizada podemos hostearla u alojarla en nuestro propio servidor y se puede emplear también para probar los códigos que compartimos en esta página, en el equipo sin conexión.
También es posible cargar directamente la librería de JQuery desde diversos servicios CDN en la nube, que pueden tener centros de datos geográficamente cerca de nuestros lectores.
Los CDN más rapidos y eficientes desde donde se pueden cargar JQuery, son los siguientes:
- ajax.googleapis.com (Google)
- CDNJS (Cloudflare).
En cada una de las páginas anteriores se encuentra el enlace a las últimas versiones de JQuery.
No existe ninguna URL que nos permita cargar la última versión de JQuery, como sucedió en el pasado.


¡Importante!
Librerías de JQuery con vulnerabilidades

Páginas relacionadas

Comparta esta página

Sígueme en las redes sociales