Llamando a la librería JQUERY e iniciando un script

Tabla de contenidos

1 Llamando a la librería JQUERY
2 Primer ejemplo

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.