Empezar con JQuery: Con el masivo uso de JavaScript en multiples funcionalidades al momento de programar tanto client-side como server-side, surgen librerías que simplifican muchas tareas que nosotros como desarrolladores de Software y diseñadores realizamos a diario, aunque JQuery no es una librería nueva, ya que se remonta al 2006 cuando fue lanzada oficialmente. Su uso actualmente es fundamental veamos de que se trata esta magnifica librería:
Empezar con JQuery – QUE ES JQUERY
Es una librería JavaScript con la cual podemos manipular o gestionar los elementos del DOM (Document Object Model) en el cual están declarados todos los elementos de una página o aplicación Web, Mediante esta librería podemos básicamente agregar eventos, interacciones, efectuar animaciones, todas estas características las podemos usar sin necesidad de recargar toda la página, por ende es totalmente compatible con AJAX.
Podemos acceder a la librería de JQuery para integrarla en nuestras páginas desde el directorio de Google:
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
Nota: Es importante hacer el llamado a la librería desde googleapis.com ya que el navegador podrá almacenarla en caché y hará uso de esta cuantas veces la necesite sin cargarla nuevamente en nuestras peticiones, aspecto a tener en cuenta para mejorar el performance de nuestras aplicaciones.
Incluyendo JQuery:
|
1
2 3 4 5 6 7 8 9 10 11 |
Primer Evento en JQuery
Tan solo tendremos una página muy simple con un botón, el cual en vez de hacer el llamado desde las etiquetas HTML, con un onclick, referenciaremos nuestro botón en código JavaScript haciendo uso de JQuery, con esto logramos separar el código HTML del código JavaScript con lo que tendremos mayor organización y un código mucho más mantenible; así:
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
< !DOCTYPE html>
<html lang=«en»> <head> <meta charset=«UTF-8»/> <title>Empezando con JQuery</title> <script src=«https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js«></script> </head> <body> <button id=«btn»>Prueba JQuery</button> </body> <script type=«text/javascript»> $(‘#btn’).click(function () { //Selector de elemento con ID btn console.log(«Evento Clic Usando JQuery») }); </script> </html> |
En el ejemplo anterior obtenemos por consola el mensaje Evento Clic usando JQuery, veamos ahora como cambiar el valor de un objeto del DOM, para este caso usemos un parrafo “p”, así:
Nota: Recuerda que puedes acceder al Inspector de elementos de Google Chrome presionando: Control + Shift + I
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
< !DOCTYPE html>
<html lang=«en»> <head> <meta charset=«UTF-8»/> <title>Empezando con JQuery</title> <script src=«https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js«></script> </head> <body> <h1><p id=«parrafo1»>Primer Valor del parrafo</p></h1> <button id=«btn»>Cambiar Valor</button> </body> <script type=«text/javascript»> $(‘#btn’).click(function () { //Selector de elemento con ID btn $(«#parrafo1»).html(«Segundo Valor del parrafo»); //Cambiando al valor al elemento con selector parrafo1 }); </script> </html> |
Como puedes observar hemos cambiado el valor de nuestro párrafo desde JavaScript, normalmente sin usar JQuery lo haríamos con un document.getElementById();
también mediante JQuery podemos acceder a cambiar los estilos de los elementos del DOM, veamos como podemos cambiar el color a nuestro parrafo:
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
< !DOCTYPE html>
<html lang=«en»> <head> <meta charset=«UTF-8»/> <title>Empezando con JQuery</title> <script src=«https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js«></script> </head> <body> <h1><p id=«parrafo1»>Valor del parrafo</p></h1> <button id=«btn»>Cambiar Valor</button> </body> <script type=«text/javascript»> $(‘#btn’).click(function () { //Selector de elemento con ID btn $(«#parrafo1»).attr(«style», «color:red») //Cambiando los atributos del elemento con selector parrafo1 }); </script> </html> |
Obtenemos:
Bueno amigos como pueden ver mediante esta librería podemos manipular los elementos del DOM con el fin de brindar experiencias inmediatas a nuestros usuarios, esta es solo la primera entrega y el uso básico de JQuery, seguiremos en próximas entradas con su uso basándonos en lo aprendido en esta entrada.
Hasta pronto!.
Byspel