Tabla de contenidos
El primer paso que debemos hacer para ejecutar aplicaciones JQUERY es configurar que versión vamos a usar, existen diferentes librerías, y aunque lo normal es pensar que la última es la más adecuada, por que el código fuente se va mejorando y por tanto, pesa menos, ya que se cambian unos métodos por otros. A veces, si necesitamos ejecutar nuestras aplicaciones en navegadores antiguos, es posible que las últimas versiones no funcionen.
En resumen, y como consejo habitual, usa navegadores modernos, y las últimas versiones del framework.
Llamando a la librería JQUERY
Existen 2 formas de «instalar» el framework, llamándolo desde un CDN, servidores que proporcionan datos de manera ultra-rápida, como por ejemplo google:
https://developers.google.com/speed/libraries/#jquery
La otra forma es descargándose el código fuente, y subirlo en un fichero dentro de nuestro proyecto:
https://jquery.com/download/
En cualquiera de las formas, tenemos que hacer referencia al mismo desde la cabecera de nuestro código, entre las etiquetas <head></head> de esta forma:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="direccion-mi-ordenador/jquery.js"></script>
Primer ejemplo
Y ya podemos empezar a usarlo, todos los script que creemos tienen que iniciarse mediante las siguientes etiquetas:
<script> $(document).ready(function(){ //instrucciones jquery }); </script>
El símbolo $ es una forma resumida de pone JQUERY, para reducir el código, hay que tener cuidado por que si usamos otros framework es posible que el signo $ no funcione correctamente, por ejemplo, en el gestor de WordPress, pero para evitar estos problemas existe el siguiente método: https://api.jquery.com/jquery.noconflict/.
Y ya empezamos a programar: Primer ejemplo JQUERY
<!DOCTYPE html> <html> <head> <title>Mi primer jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#saludo').click(function () { $('#saludo').text("Hola mundo."); }); }); </script> <style> *{ width: 100%; margin: 0 auto; } #bloque{ width:500px; margin-top:20px; border:1px solid black; padding:20px; } #saludo{ cursor:pointer; text-decoration:underline; } </style> </head> <body> <div id="bloque"> Tienes ganas de que te salude...<div id="saludo">Pincha para que te salude.</div> pruebalo... </div> </body> </html>
En este ejemplo, tenemos un texto que si pinchamos en el se cambia por un saludo, como podemos comprobar, solo afecta a ese bloque no al resto, y no recarga la página… y en este ejemplo, podemos ver el gran potencial de JQUERY, para crear aplicaciones mas usables, más visuales, más potentes, etc.
Voy a explicar el código JQUERY:
$(document).ready(function() { // código });
Se llama a un función JQUERY, cuando el documento actual, este preparado. Vamos que cuando la página actual (document) este lista se ejecuta lo que hay en el script.
$('#saludo').click(function () { // código });
Cuando se hace click en el identificador (id) saludo, se ejecuta el interior.
$('#saludo').text("Hola mundo.");
Escribe el texto en el identificador (id)saludo, y machaca el que había.
Y con menos de 10 líneas de código hemos creado darle vida a nuestra web, y esto es solo el comienzo de un mundo lleno de posibilidades.