jQuery es la herramienta a tener en cuenta

Presentada en enero del 2006, Jquery es una libreria Javascript orientada a Ajax, manejo del DOM,
animaciones y eventos.
jQuery usa las licencias MIT y GPL permitiendo su uso en proyectos libres.

Es de facil implementacion ya que en un unico archivo JavaScript
contiene las funcionalidades comunes de DOM, eventos, efectos y AJAX.
incluyendo soporte para CSS 1-3 y un plugin básico de XPath.
Soporta extensiones.
Utilidades varias como obtener información del navegador, operar con Objetos y Arrays, etc.
Compatible con los navegadores Firefox 2.0+, Internet Explorer 6+, Safari 2.0.2+ y Opera 9+

El Equipo Jquery cuenta con un desarrollo orientado a las interfaces de usuario llamado Jquery UI.
Con el podremos crear muy facilmente widgets y animaciones.

Se utiliza igual que cualquier otra extensión para jQuery.
Sólo hay que añadir los archivos .js a la página, ademas de la hoja de estilos propia del script, primero debe aparecer la biblioteca jQuery y después el resto:

<link type=»text/css» href=»css/themename/jquery-ui-1.7.1.custom.css» rel=»Stylesheet» />
<script type=»text/javascript» src=»js/jquery-1.3.2.min.js»></script>
<script type=»text/javascript» src=»js/jquery-ui-1.7.1.custom.min.js»></script>

Jquery UI Cuenta con 24 temas prediseñados, y si bien pueden ser editados, existe la posibilidad de generar uno propio.
Para esto, cuenta con el ThemeRoller, que nos permite editar los widgets y efectos.

A la hora de descargar jquery ui tenemos la posibilidad de, para ahorrar algunos bytes,
destildar los efectos y/o widtgets que no vamos a usar, (si sabemos esto de antemano).

Como usarlo?, es simple, su notacion es relativamente parecida, inicializar los widgets consiste en
$(elemento).nombreWidget();

con eso, para un uso simple con eventos predeterminados, alcanza.

Pero siempre se pueden modificar usando notacion json, de una manera muy sencilla e intuitiva
$(elemento).nombreWidget({evento:valor,evento2:valor2,evento3,valor3});

Siempre que se necesita hacer referencia a un elemento, se utiliza el $
$(«elemento»).evento/widget();

el elemento siempre debe ir a compañado por su selector, de la misma manera que se lo referencia en las hojas de estilo.
# para ID
. para Clases

Algunos ejemplos de Widgets():

 

//Tabs
$(‘#tabs’).tabs();// javascript

<!–// html //–>
<div id=»tabs»>
<ul>
<li><a href=»#tabs-1″>First</a></li>
<li><a href=»#tabs-2″>Second</a></li>
<li><a href=»#tabs-3″>Third</a></li>
</ul>
<div id=»tabs-1″>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id=»tabs-2″>
Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
</div>
<div id=»tabs-3″>
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
</div>
</div>

//Datepicker
$(‘#datepicker’).datepicker();// javascript

<!–// html //–>
<div id=»datepicker»></div>

 

//Accordion
$(«#accordion»).accordion({ header: «h3″ }); //javascript

<!–// html //–>
<div id=»accordion»>
<div>
<h3><a href=»#»>First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href=»#»>Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href=»#»>Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>

En conclusión, Jquery es una de las librerías javascript mas usadas por su fácil implementación,
amplia variedad de plugins, varias optimizaciones a su código fuente además de estar muy bien documentado.
Si estás interesado en enriquecer tu sitio con componentes web 2.0, efectos, animaciones, Ajax,
interfaces de usuario avanzadas, etc., jQuery es la herramienta a tener en cuenta.

Top