JQuery, descubriendo lo que puede hacer por ti

jQuery ofrece a los desarrolladores y diseñadores web una manera fácil de crear sofisticados efectos con casi ninguna codificación. Porque jQuery es tan fácil de implementar su popularidad está creciendo.

 

Puedes ver ejemplos de jQuery en muchos sitios web, por ejemplo, Facebook y Twitter, usan varios efectos jQuery. Cuando se publica un nuevo tweet en Twitter, la página no se recarga. En cambio, el código detrás de la página web llama a una función jQuery para hacer que el nuevo tweet aparezca y todos los otros tweets en la página se muevan hacia abajo. Otra función jQuery usada en Twitter es la notificación que se recibe cuando llega un nuevo tweet.

 

Definiendo jQuery

 

Para entender jQuery, es útil saber un poco sobre JavaScript, un lenguaje de programación que entienden los navegadores web. El código JavaScript puede interactuar con imágenes y texto en una página web, por ejemplo, ocultando una imagen, mover texto o cambiar el contenido después de un cierto período de tiempo o cuando el visitante de una página hace algo, como mover el cursor del mouse sobre un enlace. El código JavaScript puede hacer que una imagen aparezca cuando alguien visita una página web y hace clic en un botón, puede hacer que aparezca una ventana 30 segundos después de que llegues a la página web o puede verificar que un visitante rellene correctamente un formulario en un sitio web. JavaScript es robusto y se usa comúnmente para agregar interactividad y efectos dinámicos a páginas web. Pero JavaScript es un lenguaje de programación completo y para usarlo de manera efectiva, debes aprender a programar.

 

jQuery es una biblioteca complementaria para JavaScript. Piensa en jQuery como código JavaScript que ha sido escrito para ti. En general, todo lo que tiene que hacer es incluir una línea o dos de código en tu página que llama al código jQuery. jQuery hace lo difícil la codificación de JavaScript que funcione para ti.

 

Los efectos y eventos de jQuery

 

jQuery te permite cambiar fácilmente la apariencia, ubicación o comportamiento de un elemento en una página web. Piensa en un elemento como algo en una página web, como una imagen, un bloque de texto, un hipervínculo, una tabla o un encabezado.

 

El código da a los elementos de texto e imagen en una página web varios efectos especiales, incluidos los siguientes:

 

 

✓ hide: Oculta un elemento en tu página web.

✓ show: Muestra un elemento en tu página web si el elemento está oculto.

✓ slideDown: Desliza hacia abajo un elemento en tu página web.

✓ slideUp: Desliza hacia arriba un elemento en tu página web.

✓ fadeIn: Desvanece un elemento oculto en tu página web, haciendo que el elemento sea visible.

✓ fadeOut: Desvanece un elemento en tu página web, haciendo que el elemento sea invisible.

✓ animate: Anima un elemento en tu página web en una dirección particular.

 

Puedes usar efectos en los elementos de tu página, pero jQuery también te permite controlar cuando ocurren estos efectos. Puedes hacer un elemento en tu página fade, slide, animate, etc. cuando lo especifiques. Aquí hay algunos de los eventos que jQuery puede usar para activar un efecto:

 

✓ load: El efecto ocurre cuando una página web ha terminado de cargarse en el Web navegador Web o cuando un elemento en una página se ha cargado, como una imagen.

✓ mouseover: El efecto ocurre cuando el cursor del mouse se mueve sobre una ubicación específica en una página web.

✓ mouseout: El efecto ocurre cuando el cursor del mouse se mueve hacia afuera de una ubicación específica en una página web.

✓ change: Si el valor de algo (por ejemplo, el texto en un campo en un formulario web) cambia, se produce un evento. Esto es útil para asegurarse que alguien introduce la información correcta en un cuadro de texto.

 

El uso de plugins

 

El verdadero poder está en los cientos de plugins que lo utilizan para crear efectos increíbles, los plugins son programas de JavaScript que usan y expanden jQuery.

 

Instalando jQuery

 

Antes de que puedas usarlo, debes descargar una copia de este y decidir dónde quieres que viva. En esta sección, analizo los pasos básicos involucrado en obtener una copia de jQuery y luego guardarla en el lugar correcto dependiendo de si está trabajando en su computadora personal o en un servidor web remoto. Más tarde, verá cómo incluir una línea de código en su Archivo HTML o página web para ver los efectos de jQuery en su página web.

 

Descargando jQuery

 

Puedes descargar la última versión aquí o ir a la página de jQuery.

 

Descargar gratis jQuery

 

Las letras min en el nombre de archivo indican que el archivo está minimizado. Esto significa que los espacios adicionales y los comentarios que no hacen nada son eliminados, lo que hace que el tamaño general del archivo sea más pequeño. En general, es mejor descarga la versión minimizada de jQuery.

 

Si has descargado el archivo desde nuestro sitio recuerda que tienes que descomprimirlo para poder usarlo.

 

Configurando un directorio de pruebas

 

Ahora que tienes una copia local del archivo jQuery, necesitas configurar una ubicación en tu ordenador donde puedas crear archivos HTML que usan jQuery. Como hacer esto, sigue estos pasos:

 

1. Crea un directorio o carpeta en tu ordenador que sea fácil de navegar y asígnale el nombre, por ejemplo, webtest. En un ordenador, si crea el directorio en la unidad C:/, el directorio sería C:/webtest. En un Mac, puedes crear el directorio en el escritorio.

 

2. Dentro del directorio webtest, crea dos directorios, nómbralos js e imagenes.

 

3. Copia o mueve el archivo jQuery (jquery-x.x.x.min.js donde las x serán el número de versión) a el directorio js.

 

Llamar a jQuery desde una página web

 

Después de configurar tu directorio y guardar el archivo jQuery en el directorio is, puedes crear tu primera página web.

 

Utiliza un editor de HTML o al menos un texto editor para crear una página HTML.  Crea una página HTML y agrega una línea de código que conecta la página a la biblioteca jQuery. Esta página no hará nada especial, pero insertar correctamente el código jQuery en tu página web es vital. jQuery no funcionará si incluso un solo carácter es incorrecto, por lo que debes poner cuidado al escribir.

Para crear tu página, haz lo siguiente:

 

1. Abre el editor de texto o el editor de HTML de tu elección.

 

2. Escribe el siguiente código en el documento de texto:

 

 

3. Guarda este archivo como test.html en el directorio webtest que creaste.

 

No importa qué editor uses, asegúrate de guardar tus archivos con extensión .html, no .txt.

 

Aún necesitas agregar la línea de código que conecta la librería jQuery a esta página.

 

4. Justo después del código HTML <title>Mi página de prueba</title>, agrega la siguiente línea de código:

 

 

El nombre de archivo (jquery-3.3.1.min.js en la línea de código anterior) debe coincidir con el nombre del archivo que descargaste. La línea de código llama a la librería de código jQ. Más tarde, cuando agregues código a esta página web que usa jQ, tu navegador web sabrá cómo encontrar jQ.

 

5. Guarda el archivo test.html de nuevo.

 

Esta vez tu archivo se guarda con la línea de código que acabas de agregar.

 

Viendo tu página web en tu ordenador

 

Has creado una página HTML simple, y ahora deberías verla en tu navegador. Para abrir tu página, sigue estos pasos:

1. Inicia el navegador de tu elección.

 

Por ejemplo, Firefox, aunque puedes utilizar el que más te guste.

 

2. Elije <Alt>Archivo/Abrir archivo.

 

Aparecerá un cuadro de diálogo para Abrir un archivo.

 

3. Navega al directorio webtest y selecciona el archivo que creaste antes, test.html.

 

4. Haga clic en Aceptar.

 

Tu página web ahora aparece en tu navegador, como se muestra en la Figura 1.

 

Figura 1

 

Esta página muestra el título, “Mi página de prueba” y “Esta es mi página para testear” en una línea de texto. Tu página web puede acceder al código jQ, pero no lo está usando para cualquier efecto.