Fundamentos de JQuery: Qué es, Cómo incluirlo y tutorial básico
Las bases de la programación Web, cuanto a los Lenguajes de Programación son HTML, CSS y JavaScript. Si vemos una página web como una casa, el código HTML serían son las vigas y columnas que dan la estructura sólida al edificio; los ladrillos y bloques que conforman las paredes. El CSS sería entonces el lenguaje para la decoración de tu casa. Son los colores de las paredes, las baldosas, la cerámica, etc. Así, finalmente, el código en JavaScript representa los objetos dentro de la casa con los que sus habitantes interactuan: televisores, cocina, muebles, puertas, etc.
En general, con estos 3 lenguajes tienes todo lo que necesitas para construir una sólida, cómoda y hermosa vivienda. Sin embargo, saliendo ya de la analogía, como programador, tu objetivo debe ser hacer el código más eficiente, limpio y rápido como sea posible. Entonces, muchas veces te sería muy útil contar con otras piezas en tu caja de herramientas.
Una de estas, muy popular por causa justa, es jQuery. Continúa leyendo este post y descubrirás las funcionalidades que te ofrece jQuery en términos de hacer tu código JavaScript más eficiente, limpio y rápido.
Cómo abrebocas te diré que puedes usar jQuery para cosas como temporizadores de cuenta regresiva, autocompletar formulario de búsqueda o reorganizar automáticamente y cambiar el tamaño de los diseños de cuadrícula. Sin embargo eso no se tratará ahora mismo. Pero haz click en las siguientes secciones para descubrir más sobre jQuery y su indispensable utilidad en la programación web
jQuery es una librería ligera de JavaScript bajo elprincipio de: "escribe menos, haz más". El objetivo de jQuery es facilitar el uso de JavaScript en tu sitio web.
jQuery toma muchas tareas comunes que requieren muchas líneas de código JavaScript para lograr, y las envuelve en métodos que puede llamar con una sola línea de código.
jQuery también simplifica muchas cosas complicadas de JavaScript, como llamadas a AJAX y manipulación de DOM.
La librería de jQuery contiene las siguientes características:
- Manipulación HTML/DOM
- Manipulación de CSS
- Métodos de eventos HTML
- Efectos y animaciones
- AJAX
- Utilidades
CDN de Google:
CDN de Microsoft:
Otra forma de incluir código jQuery en tu página es descrgar el archivo .js del plugin que deseas utilizar. Es decir, colocar en tu página algo así:
Pero recuerda que usualmente los plugins involucra también códigos en CSS para obtener el efecto deseado. Estos pueden ser sólo unas cuantas lineas de código, y ene ste caso puedes ponerlas en tu código fuente, pero si no, puedes ponerlo todo en un archivo .css aparte y hacer un llamado a este en él dentro del <head></head> de tu página.
La sintaxis básica es: $(selector).action( )
- Un signo de $ para definir/acceder a jQuery
- A (selector) para "buscar (o encontrar)" elementos HTML
- Una acción jQuery ( ) que se realizará en el elemento (s)
- $(this).hide() - oculta el elemento actual.
- $("p").hide( ) - oculta todos los elementos <p> dentro del documento.
- $(".test").hide( ) - oculta todos los elementos con class = "test". Es decir, que sean de la clase "test"
- $("#test").hide( ) - oculta el elemento con id = "prueba". Es decir, que su id sea "prueba"
Además de esta acción, existen muchas otras en la librería de jQuery que hacen mucho más corto el código de javascript. Algunas son:
Mira como actua la acción animate( ) para cambiar la posición de un objeto
Haz click para ver como actúa la acción fadeIn o en fadeOut
: Para que aparezcan los circulos y : para desaparecerlos