JQuery

JQuery

Que es JQuery ?

Es una biblioteca de JavaScript , 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. jQuery es la biblioteca de JavaScript más utilizada.

Para que sirve JQuery?

jQuery nos permite agregar efectos y funcionalidades complejas a nuestro sitio web, como por ejemplo: galerías de fotos dinámicas y elegantes, validación de formularios, calendarios, hacer aparecer y desaparecer elementos en nuestra página y muchas otras poderosas opciones. Otra ventaja sin duda es la posibilidad que nos brinda de trabajar con AJAX, sin preocuparnos de los detalles complejos de la programación.

Caracteristicas

·         Selección de elementos DOM.

·         Interactividad y modificaciones del árbol DOM, incluyendo soporte para CSS 1-3 y un plugin básico de XPath.

·         Eventos.

·         Manipulación de la hoja de estilos CSS.

·         Efectos y animaciones.

·         Animaciones personalizadas.

·         AJAX.

·         Soporta extensiones.

·         Utilidades varias como obtener información del navegador, operar con objetos y vectores, funciones para rutinas comunes, etc.

·         Compatible con los navegadores Mozilla Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 10.6+ y Google Chrome 8+.5

Librerias 

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.

 Chirp.js: Tweets en tu web

Librería JavaScript que te permitirá visualizar los tweets de cualquier cuenta en tu website. Podemos coger toda la info desde el lado cliente y también se puede configurar para ver los retweets y replies.

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.

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.

Funcionamiento 

jQuery utiliza la programación orientada a objetos de javascript para crear nuevos objetos, los cuales tienen a su vez propiedades y métodos que son los que crean una nueva manera de programar.

El principal objeto utilizado es el objeto jQuery(), el cual podemos escribirlo también de manera abreviada: $(). Este objeto actúa directamente sobre los elementos de la página (elementos del DOM), seleccionandolos y modificándolos con sus métodos y propiedades.

Dentro del paréntesis, el objeto admite varios parámetros, el primero de ellos indicará el lugar de la página o elemento que queremos modificar, por ejemplo $("h1"), nos indicará que queremos modificar todos los elementos de título 1 (con html <h1> ...</h1>). a partir de ahi le añadimos al código las propiedades o métodos que indiquen lo que queremos hacer con este elemento o elementos, o también podemos indicárselo mediante una función.

Ejemplos de Codigo :

En este ejemplo basicamente lo que se hace es animar un parrafo en si la animacion es de 

esconder el parrafo o mostrarlo.

//Code for example B

$("input.buttonBslidedown").click(function(){ $("div.contentToChange").find("p.fourthparagraph:hidden").slideDown("slow"); });

$("input.buttonBslideup").click(function(){ $("div.contentToChange").find("p.fourthparagraph:visible").slideUp("slow"); });

//show code example B

$("a.codeButtonB").click(function(){$("pre.codeB").toggle()});

aquí los screenshots mostrando el ejemplo : 

El párrafo encerrado en rojo es el que se esta afectando aqui se muestra .

Y como se puede ver en la imagen por medio de el jquery escondimos el párrafo.

Efectos de JQuery 

Estos son algunos de los efectos mas conocidos de JQuery a la hora de implementar en una pagina web.

.animate()

Realiza una animacion por medio de el uso de propiedades de CSS.

.clearQueue()

Quita del enjambre todos los items que todavia no se han ejecutado .

.fadeIn()

Muestra los elementos que concuerdan haciendo que estos se oscurezcan.

.fadeOut()

Esconde los elementos seleccionados haciendo que estos se hagan transparentes.

.fadeTo()

Ajusta la oscuridad de los elementos que concuerdan entre si.

Tutorial de JQUERY

Aquí les dejo un tutorial de jquery .