¿QUÉ ES JQUERY?
jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la Licencia MIT y la Licencia Pública General de GNU v2, permitiendo su uso en proyectos libres y privados. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requerirían de mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.
¿PARA QUÉ SIRVE?
Mientras que muchos desarrolladores web confunden JavaScript y jQuery como dos lenguajes de programación distintos, es importante que se dé cuenta que ambos son JavaScript. La diferencia es que jQuery ha sido optimizado para realizar muchas funciones de script frecuentes y lo hace a la vez que utiliza menos líneas de código.
jQuery consiste en un único fichero JavaScript que contiene las funcionalidades comunes de DOM, eventos, efectos y AJAX.
La característica principal de la biblioteca es que permite cambiar el contenido de una página web sin necesidad de recargarla, mediante la manipulación del árbol DOM y peticiones AJAX. Para ello utiliza las funciones $() o jQuery().
Desvanecer y aparecer gradualmente elementos
La función fade() es aquella destinada a desvanecer y aparecer objetos, por completo o hasta un punto de opacidad especifico.
· fadeIn(speed, callback): aparece gradualmente elementos con un tiempo de duración y una llamada de vuelta.
· fadeOut(speed, callback): desaparece gradualmente elementos con un tiempo de duración y una llamada de vuelta.
· fadeTo(speed, opacity, callback): aparece o desaparece gradualmente elementos con un tiempo de duración, opacidad (valor de 0 a 1.0) y una llamada de vuelta.
FUNCIONAMIENTO
Función $().
La forma de interactuar con la página es mediante la función $(), un
alias de jQuery(), que recibe como parámetro una expresión CSS o el nombre de
una etiqueta HTML y devuelve todos los nodos (elementos) que concuerden con la
expresión. Esta expresión es denominada selector en la terminología de
jQuery.
$("#tablaAlumnos"); // Devolverá el elemento con
id="tablaAlumnos"
$(".activo"); // Devolverá una matriz de elementos con
class="activo"
Una vez obtenidos los nodos, se les puede aplicar cualquiera de las
funciones que facilita la biblioteca.
// Se elimina el estilo (con removeClass()) y se aplica uno nuevo (con
addClass()) a todos los nodos con class="activo"
$(".activo").removeClass("activo").addClass("inactivo");
O por ejemplo, efectos gráficos:
// Anima todos los componentes con class="activo"
$(".activo").slideToggle("slow");
Inicio de jQuery.
Comúnmente antes de realizar cualquier acción en el documento con
jQuery(), debemos percatarnos de que el documento esté listo. Para ello
usamos$(document).ready(); de esta forma:$(document).ready(function()
{
//Aquí van todas las acciones del documento.
});
EFECTOS JQUERY
La función fade() es aquella destinada a desvanecer y aparecer objetos, por completo o hasta un punto de opacidad especifico.
· fadeIn(speed, callback): aparece gradualmente elementos con un tiempo de duración y una llamada de vuelta.
· fadeOut(speed, callback): desaparece gradualmente elementos con un tiempo de duración y una llamada de vuelta.
· fadeTo(speed, opacity, callback): aparece o desaparece gradualmente elementos con un tiempo de duración, opacidad (valor de 0 a 1.0) y una llamada de vuelta.
Mostrar y ocultar elementos
Para mostrar y ocultar elementos del DOM, contamos con las funciones show y hide respectivamente.
show(): sirve para mostrar los elementos seleccionados si se encuentran ocultos.
hide(): sirve para ocultar los elementos seleccionados si son visibles.
Estas dos funciones pueden tomar dos parámetros opcionales, “speed” y “callback”, uno para especificar el tiempo que debe durar la animación, y el otro una función que se llama cuando termina dicha animación.
show(): sirve para mostrar los elementos seleccionados si se encuentran ocultos.
hide(): sirve para ocultar los elementos seleccionados si son visibles.
Estas dos funciones pueden tomar dos parámetros opcionales, “speed” y “callback”, uno para especificar el tiempo que debe durar la animación, y el otro una función que se llama cuando termina dicha animación.
show(speed, callback)
hide(speed, callback)
Usando la función toggle podemos mostrar u ocultar unos elementos dependiendo de su estado.
toggle(): Si está oculto se muestra y si es visible se oculta.
toggle(switch): Si switch es true entonces muetra todos los elementos seleccionados, si es falso los oculta, esto facilita colocar varios elementos en el mismo estado de visibilidad en caso de seleccionar varios en distintos estados.
toggle(speed, callback): muestra u oculta con velocidad y/o llamada de operación completada.
hide(speed, callback)
Usando la función toggle podemos mostrar u ocultar unos elementos dependiendo de su estado.
toggle(): Si está oculto se muestra y si es visible se oculta.
toggle(switch): Si switch es true entonces muetra todos los elementos seleccionados, si es falso los oculta, esto facilita colocar varios elementos en el mismo estado de visibilidad en caso de seleccionar varios en distintos estados.
toggle(speed, callback): muestra u oculta con velocidad y/o llamada de operación completada.
0 comentarios:
Publicar un comentario