JQUERY.
- ¿Que es JQUERY?
jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. jQuery es la biblioteca de JavaScript más utilizada.
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 que nos sirve JQUERY.
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().
- Funcionamiento de JQUERY.
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");
Librerías de JQUERY
- money.js: conversor de divisas: Esta API Open Source es para la conversión de divisas, es muy flexible, portable y se puede usar en cualquier aplicación, framework o lenguaje. Cada hora se actualizan los valores de las tasas de cambio en JSON.
- accounting.js: Esta librería ligera de JavaScript resolverá los problemas que se te presenten cuando quieras formatear números, dinero y monedas. Incluye la posibilidad de mostrar los datos en columnas tipo Excel separando símbolos con números. Tus informes se verán mucho más uniformes y profesionales.
- Moment.js: te permitirá formatear, analizar y manipular fechas. Podrás calcular fechas a partir de una fecha dada, visualizar las fechas en distintos formatos...
- Smart Time Ago: Esta librería jQuery nos permitirá actualizar con mucha facilidad aquellas marcas de tiempo que creemos en nuestro documento. Smart time nos ayudará a calcular el tiempo transcurrido desde la fecha estipulada hasta el momento actual, la actualización del tiempo se hace cada 60 segundos y se puede usar tanto como plugin jQuery como en nodo desdenpm (node packaged modules) para node.js.
- sortByTimeAgo.js Pequeña librería para hacer arrays de objetos con propiedades TimeAgo, se ordenaran de las más nuevas a las más viejas.
- Piecon: Librería JavaScript que creará de manera dinámica una barra de progreso en la zona del Favicon y nos mostrará el progreso de la carga de la web.
- Notificon: Favicon para notificaciones y alertas Con esta librería podrás cambiar el favicon en función de las alertas y notificaciones que se muestren en el lado del cliente, en vez de tener que crear un número de Favicons diferentes podemos especificar para cada favicon una etiqueta y vaya cambiando en función de la alerta o notificación.
- jQuery Stick´em A veces nos encontramos que una imagen es demasiado grande y si queremos leer la descripción tenemos que hacer "scroll" hacia arriba. Con este plugin jQuery podrás 'pegar' el contenido que quieras a la barra del scroll para tenerlo siempre visible.
Efectos de JQUERY.
- Cómo aplicar los efectos
Para agregar efecto jQuery a nuestros proyectos primeramente debemos agregar o hacer referencia al archivo jQuery en el cual se encuentran todas las funcionalidades que vamos a emplear; para ello entre la etiqueta
agregamos la siguiente línea de código:
- Efectos jQuery
Veremos en seguida los efectos más sobresalientes, cabe mencionar que el formato que emplearemos para poner en marcha las animaciones deberá ser la siguiente:
$("button").click(function(){
$("p").Funcion();
});
"button": elemento que responde al dar clic, en este caso un botón.
"p": elemento en el cual se consuma el efecto producido por Funcion(), siempre y cuando el botón sea presionado.
Aquí se mostraran una lista de efectos:
Ejemplos de Códigos JQUERY.
Esto se puede hacer con HTML básico de esta manera:
Creas el enlace ancla que va a llevar a otra parte de la página:
<a href="#ancla">Ancla</a>
Creas el id para la zona de la página a donde quieres que lleve el ancla:
<div id="ancla">
... contenido
</div>
El funcionamiento es perfecto, lo que no me gusta es el modo de hacerlo que tiene el HTML, ya que provoca un salto brusco.
Bueno, para hacerlo de forma suavizada, tal y como se muestra en este ejemplo, se consigue poniendo este código JavaScript (jQuery) en el head de tu web o en un archivo externo .js:
$(function(){
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
Con este pequeño código en jQuery nada intrusivo se consigue un bonito efecto para tus desplazamientos de página.
No hay comentarios.:
Publicar un comentario