Conceptos Básicos jQuery

jQuery es una librería de JavaScript muy usada actualmente para animaciones web, que nos simplifica enormemente el trabajo en comparación con JavaScript, que mediante el DOM permite acceder a los elementos dentro del HTML.

John Resig fue el creador de esta librería de JavaScript.

Donde descargarlo

Para poder usarlo podemos descargar de la página oficial del jQuery

Luego aparecerá una nueva ventana donde nos permitirá elegir la versión que deseamos trabajar, aquí hay que tener mucho cuidado pues a veces deseamos aplicar las últimas animaciones y sin embargo la versión que trabajamos no la soporta.

Otro punto a tener es utilizar el jQuery comprimido ó sin comprimir, la diferencia de ambos es que  la versión comprimida es utilizada en producción para evitar el tiempo de carga, sin embargo la versión sin comprimir se utiliza en desarrollo cuando deseamos aplicar cambios.

Tambien podemos usar el jQuery directamente del servidor de su servidor

https://code.jquery.com/jquery-3.3.1.min.js

Nota: si el nombre del archivo lleva min indica que es la versión comprimida

Si usamos el Dreamweaver a partir de la versión 2017 incluye el framework Bootstrap que viene incluido el jQuery

Como utilizarlo

Una vez que lo descargemos y se encuentre en nuestro sitio, debemos de utilizar la etiqueta <script> </script>

<script src="js/jquery-1.11.3.min.js"></script>

Un punto que hay que tener en cuando vinculamos nuestro archivo JS personalizados deberán ubicarse en la parte inferior del script del jQuery

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/codigo.js"></script>

Ejemplos practicos

Ejemplo 1:

En nuestro HTML establecemos:

<div id="rojo2"></div>
<div id="verde2"></div>
<div id="azul2"></div>

Ahora en nuestro JavaScript

$(function(){
$("div").mouseenter(function(){
$(this).animate({
height:"+=10px"
});
});
$("div").mouseleave(function(){
$(this).animate({
height:"-=10px"
});
});
$("div").click(function(){
$(this).toggle(1000);
});
});