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/.
<!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.