Introduccion

Uno de los Frameworks que han tenido una gran popularidad entre los desarrolladores y programadores de javascript. JQuery es una “librería JavaScript muy rápida y muy ligera que simplifica el desarrollo de la parte de cliente de las aplicaciones web”. En otras palabras, jQuery incluye muchas utilidades para crear fácilmente las páginas web de las aplicaciones dinámicas complejas.

Este post pretende ser una introducción a los métodos más básicos de jquery, en un futuro se trataran los plugins y/o añadidos a este framework.

Jquery se distribuye en dos versiones, la versión descomprimida un poco pesada y es la mejor opción para desarrollar aplicaciones. La versión comprimida la cual es la opción ideal en el servidor de producción, para minimizar el tiempo de carga de la aplicación.

Caracteristicas

* DOM interactividad y modificaciones, (incluyendo soporte para CSS 1-3 y un Plugin Básico de XPath)
* Manejo de Eventos
* Efectos y Animaciones
* Ajax y JSon
* Extensibilidad (es extendible por medio plugins)
* Plugins Javascript

Instalacion

Simplemente incluiremos esta etiqueta dentro del head de nuestro documento html

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

El corazon de Jquery

El corazon de jquery es la funcion $, la funcion recibe como parametro un string y devuelve un objeto sea un array objetos html o un objecto html segun el query que se envie por parametro, la forma de utilizarlo es de la siguiente manera.

$(elemento).evento_o_metodo(funcion-o-parametro);

Selectores Simples

La forma de elegir los elementos DOM de una pagina jquery propone usar la funcion $ de la
siguiente manera

$(elemento) para propias html
$(#elemento) para identificadores, (id=””) de etiquetas html
$(.elemento) para atributos(class) CSS.

Selectores avanzados

Jquery permite no solo seleccionar un solo elemento o un conjunto de elementos con una misma
caracteristica ademas incluye la seleccion de varios elementos con diferentes atributos de
de la siguiente manera

$(”div,span,p.myClass”)

como ven la sintaxis para realizar esta seleccion es incluir comas entre los elementos
Efectos

Jquery incluye diferentes efectos que se detallaran

Show (Mostrar)
Modifica los atributos alto, ancho y transparencia partiendo de 0.

$(objeto).show(”velocidad”)
Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow” (lento), “normal”, o “fast” (rápido).

$(objeto).hide(”velocidad”)
Modifica los atributos alto, ancho y transparencia, partiendo de los valores actuales hasta llegar a 0.

$(objeto).slideDown(”velocidad”)
Modifica los atributos alto y transparencia, partiendo de 0. Es similar a “show”, salvo que no modifica el ancho, creando un efecto de “cortinilla”.

$(objeto).slideUp(”velocidad”)
Modifica los atributos alto y transparencia, partiendo de los actuales, hasta llegar a 0. Es similar a “show”, salvo que no modifica el ancho, creando un efecto de “cortinilla”.

$(objeto).fadeIn(”velocidad”)
Modifica el atributo transparencia desde 0.

$(objeto).fadeOut(”velocidad”)
Modifica el atributo transparencia desde el valor actual, hasta llegar a 0.

$(objeto).center(”velocidad”);
Centra un elemento con respecto a su “parent”.

$(objeto).fadeTo(”velocidad”, transparencia)
Modifica el atributo transparencia a un valor especifico.

$(objeto).animate(”propiedades”,”velocidad”);
Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow” (lento), “normal”, o “fast” (rápido).
Transparencia: Un numero de 0 a 100 que indica que tan visible es el elemento.

$(objeto).animate({width:20,height:200}, “slow”)
Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow” (lento), “normal”, o “fast” (rápido).
Propiedades: Una o más propiedades con valor numérico en CSS, por ejemplo width y height.

tomado de http://www.cristalab.com/tutoriales/214/tutorial-de-jquery.html

Eventos

Jquery permite un manejo facil de eventos como por ejemplo el evento que muchos conoceran (window.onload = funcion) se hara de la siguiente manera

$(document).ready(function(){

});

Como vemos para controlar un evento en jquery usamos la siguiente sintaxis

$(”selector”).nombredelevento(funcion)

los eventos en jquery mas comunes son los siguietes:

blur( )

blur( fn )

change( )

change( fn ).

click( )

click( fn )

dblclick( )

dblclick( fn )

error( )

error( fn )

focus( )

keydown( )

keydown( fn )

keypress( )

keypress( fn )

keyup( )

keyup( fn )

load( fn )

mousedown( fn )

mousemove( fn )

mouseout( fn )

mouseover( fn )

resize( fn )

scroll( fn )

select( )

submit( )

submit( fn )

unload( fn )

Links de interes y bibliografia

http://docs.jquery.com/Main_Page

http://visualjquery.com/

http://www.cristalab.com/tutoriales/214/tutorial-de-jquery.html

http://es.wikipedia.org/wiki/JQuery

http://www.javascriptya.com.ar/jquery/