Instalar librería JQUERY

Home » Blog » Instalar librería JQUERY

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.

Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 7 reseñas

Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.

erlantz rique
erlantz rique
19/02/2024

Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.

Jose Marlasca
Jose Marlasca
06/02/2024

Dió en la clave y nos dió los instrumentos que necesitábamos en esos momentos, y sobre todo entendió a la perfección lo que buscábamos. Lo mejor de web que hemos tenido en 24 años. Eskerrik asko Mezo!!

Troka Abentura
Troka Abentura
07/01/2024

Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.

Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024

Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%

Asier Hermoso
Asier Hermoso
03/01/2024

Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita 😉
Un crack!!

itxaso zubia
itxaso zubia
15/12/2023

El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.

Fernando Cózar
Fernando Cózar
02/11/2023