jQuery

Es una biblioteca multiplataforma de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrolla animaciones y agregar interacción con la técnica AJAX a páginas web. Fue presentada el 14-ENE-2006 en el BarCamp NYC.

<Script type="text/javascript" src="jquery.min.js"></Script>
<Script>
	$(document).ready(function() {
		...
	});
</Script>

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

1. Selectores

Al igual que en CSS esta es la parte mas importante, seleccionar uno o varios elementos sobre los que actuaremos.

2. Eventos

En realidad todos los eventos de JavaScript estan disponibles.

3. Ajax

Acrónimo de Asynchronous JavaScript And XML, es una técnica de desarrollo web para crear aplicaciones interactivas, es decir que se ejecutan en el navegador cliente mientras se mantiene la comunicación asíncrona con el servidor en segundo plano, de esta forma que es posible realizar cambios sobre partes de la página web sin necesidad de recargarla, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.

Ajax es una tecnología asíncrona, es decir que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página.

jQuery hace tan fácil usar AJAX que mas demora explicarlo que entenderlo. Solo se requiere tres pasos:

  1. Definir donde actuaras con algún selector. Es mas simple es Id.
  2. Definir el evento que disparar la acción. Lo mas simple un botón.
  3. Crear el código de relación y definir las acciones necesarias.
$('algún selector').load('algún recurso')

Un ejemplo vale mas que 1000 palabras.

<Html>
<Head>
	<Script>
		$(document).ready(function() {
			$(document).on('click','.linea',function(){
				var x = 'gl_ck.php?tabla=gasto&camp=' + $(event.target).attr('name') + '&val=' + $(event.target).val() + '&mov=' + $(event.target).attr('mov');
				//alert(x);
				$('#res').load(x);
			});
		});
	</Script>
</head>

<Body>
<div id=res>Aqui cae la respuesta.</div>
</Body>
</Html>

4. Extensiones

También llamados plugins, son librerias JavaScript que aumentan las funcionalidades basicas de jQuery con tan solo incluir la librería en el código exactamente debajo de jQuery.

4.1 TableSorter

Para crear tablas ordenas.

4.2 AnimateScroll

Permite desplazarse a cualquier parte de la página con sólo llamar a la función animatescroll() con el identificador o nombre de clase de elemento hasta que desea desplazarse.

4.3 Moment

Muy util si hay la necesidad de trabajar con las fecha en tu proyecto web. Sirve para analizar, gestionar y manipular cada fecha.

4.4 ResponsiveSlider

Sirve para crear un Slider sencillo de fotos. No tiene muchas opciones pero si que es super ligero y se carga super rápido. Lo aconsejo si quieres crear slider sencillos en tu paginas web.

4.5 Alertify

Permite crear ventanas modales en las cual se pueden incluir botones que generan eventos al cliclearlos.

4.6 ToolTipster

Permite crear cualquier tipología de ToolTip, que se puede personalizar e incrementar.

4.7 ChartJS

Si quieres publicar gráficos esto es para ti.

4.8 Jarallax

Con este plugin la navegación vertical de la página es mucho más bonitas. Los elementos se muestran en modo dinámico y más bonito. Este plugin no es necesario para el desarrollo de la página pero si que a veces puede ser útil para mostrar información en nuestras páginas web.

4.9 Gridalicious

Permite crear una grilla.

4.10 IOSslider

Te permite integrar un control deslizante personalizable. Tambien llamado carrusel.

4.11 SlinkyMenu

Permite crear menus deslizantes.

4.12 TabdLet

Permite crear pestañas.

4.13 Readable

Ayudarle a crear párrafos de tamaño óptimo para la máxima legibilidad. Una buena tipografía puede hacer o romper un diseño web, por eso es muy útil este plugin.

4.14 Monthly

Si necesitas usar calendarios en un proyecto web, este plugin te puede ser muy útil. También se puede crear eventos en las fechas.

4.15 FancyBox

Una herramienta que ofrece una manera agradable y elegante para añadir funcionalidad de zoom para imágenes, contenido HTML y multimedia en sus páginas web.

4.16 StickyHeader

Te crear un menú fijo en el top de la página.

5. Podcast