Es un framework que nos permite utilizar JavaScript de una forma más rápida, para aprenderlo no es necesario dominar JS pero es recomendable tener una buena base para poder modificar el contenido que nos brinda jQuery.
No hay que confundir jQuery con un lenguaje de programación, aunque tiene ciertas características como una sintaxis propia que le dan valor, solo es una herramienta extra para manipular la forma en la que escribimos JavaScript.
Ventajas
- Tiempos de Desarrollo más rápido de JavaScript.
- Optimizado para trabajar en múltiples browsers.
- Es Open Source.
- Tiene una comunidad muy grande.
- Gran variedad de plugins.
- Se incorpora muy bien con Ajax.
Desventajas
- Bastantes versiones lanzadas en corto tiempo.
- Tiempos de carga considerablemente mayores a otras librerías.
- Problemas de retro compatibilidad con versiones de browsers antiguas.
Instalación
Para instalar jQuery en nuestro proyecto tenemos que visitar http://jquery.com/download/ donde encontraremos las versiones con las que podemos trabajar, actualmente tenemos jQuery versión 1.x y jQuery versión 2.x.
La razón de seguir utilizando la primera versión es debido a su compatibilidad con IE 6, 7 y 8. Si tenemos libertad de dejar de dar soporte a este navegador, como en el caso del sitio de Activ donde solo el 4% del tráfico proviene de IE pero de ese porcentaje la gran mayoría son versiones superiores a la versión IE 9 podemos utilizar con seguridad la última versión de jQuery en caso contrario es recomendable seguir utilizando jQuery 1.x
Una vez tomada la decisión sobre versiones habrá que elegir el modo de trabajo para nuestra librería, teniendo dos posible combinaciones:
-
Compressed – Para ambientes de producción y una ejecución muy rápida.
Uncompressed – Optima para ambientes de desarrollo para poder manipular el framework de mejor manera.
Se descargará el archivo de jquery-1.11.3.js en este caso se utiliza una versión uncompressed para desarrollo, posteriormente colocar en la carpeta de tu proyecto, dentro de una carpeta llamada js. Esto es opcional pero podemos cambiarle el nombre a nuestro archivo como por ejemplo jquery.js para mayor facilidad al momento de llamarlo, ahora haremos un archivo HTML llamado index.html.
Deberíamos de tener algo así:
En esta parte creamos un botón con un id “desaparece”, al igual que se genera un selector en CSS como #desaparece, en jQuery es idéntico.
|
1 |
<button id="desaparece">Presiona para desaparecer y aparecer mensaje</button> |
Creamos un div con un id “contenido” este es el elemento que desaparecerá de nuestro documento HTML.
|
1 |
<div id="contenido">Hazme desaparecer</div> |
Ahora mandamos a llamar nuestro archivo de jquery.js en nuestro documento index.html
|
1 |
<script src="js/jquery.js"></script> |
Posteriormente creamos una etiqueta script donde pondremos la función de lo que queremos realizar
|
1 2 |
$(document).ready(function() { )}; |
Con esto le indicamos a nuestro script que se va a disparar una vez que la página se haya cargado por completo, la mayoría de los scripts pueden iniciar de esta manera, ahora dentro de esta función vamos a crear nuestro comportamiento.
|
1 2 |
$("#desaparece").click( function() { }); |
Esto nos indica que el elemento que tenga un id “desaparece” al momento de darle click lanzará un evento, el que nosotros queramos poner. En este caso pondremos uno que desaparezca un elemento o varios según los id que se coloquen en las etiquetas HTML.
Finalmente agregamos el evento que en este caso será:
|
1 |
$("#contenido").toggle("slow"); |
Esto nos indica que el div que tiene “contenido” desaparecerá lentamente.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Hello jQuery</title> </head> <body> <button id="desaparece">Presiona para desaparecer y aparecer mensaje </button> <div id="contenido">Hazme desaparecer</div> <script src="js/jquery.js"></script> <script> $(document).ready(function() { //Indica cuando el documento se cargue $("#desaparece").click( function() { //Una función click al id desaparece $("#contenido").toggle("slow"); //el div "contenido" desaparecerá lentamente. }); }); </script> </body> </html> |
Ahora vamos a cambiar el contenido de nuestro div, en lugar de colocar los dos últimos evento colocamos este
|
1 |
$("#contenido").html(“Soy el nuevo contenido”); |
Utilizando .html damos referencia a cambiar el contenido. Dentro del paréntesis podremos inclusive más etiquetas html por ejemplo.
|
1 |
$("#contenido").html(“<img src='imagen.png'/>”); |
Aquí cambiamos el contenido de nuestro div por una imagen.
De esta manera podremos hacer que cualquier div o elemento de nuestro documento HTML pueda aparecer o desaparecer de diferentes maneras e incluso podemos cambiar el contenido de nuestros elementos con algo de imaginación se puede hacer algo bastante interesante dentro de nuestra web.