JQUERY

¿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.

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.

Las tecnologías que forman JQUERY son:

    Primero que nada, jQuery es una librería JavaScript open-source, que funciona en múltiples navegadores, y que es compatible con CSS3. Su objetivo principal es hacer la programación “scripting” mucho más fácil y rápida del lado del cliente. Con jQuery se pueden producir páginas dinámicas así como animaciones parecidas a Flash en relativamente corto tiempo.

Las ventajas de jQuery

La ventaja principal de jQuery es que es mucho más fácil que sus competidores. Usted puede agregar plugins fácilmente, traduciéndose esto en un ahorro substancial de tiempo y esfuerzo. De hecho, una de las principales razones por la cual Resig y su equipo crearon jQuery fue para ganar tiempo (en el mundo de desarrollo web, tiempo importa mucho).

La licencia open source de jQuery permite que la librería siempre cuente con soporte constante y rápido, publicándose actualizaciones de manera constante. La comunidad jQuery es activa y sumamente trabajadora.

Otra ventaja de jQuery sobre sus competidores como Flash y puro CSS es su excelente integración con AJAX.

·         jQuery es flexible y rápido para el desarrollo web

·         Viene con licencia MIT y es Open Source

·         Tiene una excelente comunidad de soporte

·         Tiene Plugins

·         Bugs son resueltos rápidamente

·         Excelente integración con AJAX

Las desventajas de jQuery 

Una de las principales desventajas de jQuery es la gran cantidad de versiones publicadas en el corto tiempo. No importa si usted está corriendo la última versión de jQuery, usted tendrá que hostear la librería usted mismo (y actualizarla constantemente), o descargar la librería desde Google (atractivo, pero puede traer problemas de incompatibilidad con el código).

Además del problema de las versiones, otras desventajas que podemos mencionar:

jQuery es fácil de instalar y aprender, inicialmente. Pero no es tan fácil si lo comparamos con CSS

Si jQuery es implementado inapropiadamente como un Framework, el entorno de desarrollo se puede salir de control.

EJEMPLO JQUERY

This is what happens, in plan English:

Click event on the "More Info Button"

Two things "grow", the whole container, and the div that contains the photo.

The "More Info" button fades out.

The "Info" area and "Close Button" fade in.

Here is the CSS:

.photo-area {

 width: 100px;

 height: 130px;

 padding: 10px;

 border: 1px solid #666;

 overflow: hidden;

 position: relative;

 margin: 10px;

 background: white;

}

#photo {

 width: 100px;

 height: 100px;

 background: url(images/mthood.jpg) center center;

 margin-bottom: 5px;

}

.info-area {

 opacity: 0.0;

 }

 a.more-info {

  display: block;

  width: 89px;

  height: 26px;

  background: url(images/moreinfo.jpg);

  text-indent: -9999px;

 }

 a.close {

  position: absolute;

  right: 10px;

  bottom: 10px;

  display: block;

  width: 20px;

  height: 21px;

  background: url(images/close_button.jpg);

  text-indent: -9999px;

 }

Here is the jQuery Javascript:

<script type="text/javascript" src="js/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

  $(".more-info").click(function(){

   $(this).parents(".photo-area").animate({

     width: "500px",

     height: "470px",

           borderWidth: "10px"

         }, 600 );

  

   $(this).fadeOut();

  

   $("#photo").animate({

          width: "500px",

    height: "375px"

         }, 600 );

   $(".info-area").animate({

          opacity: 1.0,

         }, 600 );

   });

 

  $(".photo-area .close").click(function(){

   $(this).parents(".photo-area-1").animate({

     width: "100px",

     height: "130px",

           borderWidth: "1px"

         }, 600 );

  

   $(".more-info").fadeIn();

  

   $("#photo").animate({

          width: "100px",

    height: "100px"

         }, 600 );

   $(".info-area").animate({

          opacity: 0.0,

         }, 600 );

   });

  });

 </script>

Librerias 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.

 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.

 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.

Efectos JQUERY

Deslizando elementos

Deslizar es otra manera de aparecer y desaparecer elementos del DOM, solo que esta vez con un efecto de deslizamiento.

slideDown(speed, callback): revela elementos con un tiempo de duración y una llamada de vuelta.

slideUp(speed, callback): oculta elementos con un tiempo de duración y una llamada de vuelta.

slideToggle(speed, callback): revela u oculta elementos con un tiempo de duración y una llamada de vuelta.

HTML;

<!doctype html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <title>jQuery desde Cero</title>

 

    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

  </head>

  <body>

    <div id="target" class="playground">

      Presiona los botones de abajo

    </div>

   

    <button id='growRight'>-></button>

    <button id='shrinkLeft'><-</button>

    <button id='growVertical'>V</button>

    <button id='shrinkVertical'>^</button>

    <button id='nestedGrow'>Anidadada -></button>

    <button id='nestedShrink'>Anidadada <-</button>

    <button id='stop'>Detener</button>

   

  </body>

</html>

Para comenzar a aprender JQUERY.