JQuery

Es una librera de JavaScript cuyo propsito es hacer ms sencillo el uso

de JS en sitios web.
JQuery toma muchas de las tareas ms comunes, las cuales requeriran
muchas lneas de cdigo y las envuelve en mtodos que pueden ser
llamados en una sola lnea de cdigo.
Asimismo simplifica algunas otras funcionalidades como el manejo del
DOM y AJAX.
Bsicamente jQuery contiene las siguientes caractersticas:

Manipulacin HTML/DOM
Manipulacin CSS
Manejadores de eventos HTML
Efectos y animaciones
AJAX
Utilidades

Sintaxis
La sintaxis de jQuery esta ideada para la seleccin de los elementos
HTML y la ejecucin de alguna accin en el/los elementos.
Sintaxis bsica:
$(selector).accion();
Donde:

El signo $ permite acceder a las funcionalidades de jQuery.

El selector es similar a los selectores utilizados en CSS y permite
seleccionar uno o ms elementos.
La accin corresponde a un mtodo jQuery para la ejecucin de
cdigo para dicho(s) elemento(s).

El evento $(document).ready();
Sirve para prevenir la ejecucin de cdigo JS/jQuery antes de que el
documento haya finalizado su carga.
Es considerada una buena prctica el esperar a que el documento se
encuentre completamente cargado antes de comenzar a trabajar en l.
Por ejemplo, sera motivo de error/fallo el intentar realizar/ejecutar una
accin sobre un elemento que an no ha sido creado en el DOM.

$(document).ready(function(){
//codigo
});
Eventos jQuery
Como hemos visto anteriormente, en JS un event representa el preciso
momento en el que algo sucede en algn momento HTML, como por
ejemplo:

Al hacer clic sobre un botn.

Mover el cursor sobre un elemento.
Seleccionar/marcar una casilla (checkbox).

Ya hemos visto que para ejecutar cdigo (acciones) en los diversos

eventos mediante JS, es necesario indicar el cdigo JS correspondiente
directamente en un atributo del elemento en cuestin, p.ej.:
<button onclick=miFuncion();>
Clic aqu
</button>
En jQuery, la mayoria de los eventos del DOM, tienen su metodo
equivalente, de tal manera que para asociar el evanto click a todos los
prrafos de una pagina, podramos utilizar el mtodo click() de la
siguiente manera:
$(p).click();
En este caso, aun no hemos definido que va a suceder cuando el
evento sea disparado. Para esto, debemos pasar una funcin annima
como argumento del mtodo de evento.
$(p).click(function(){
//cdigo
});
Eventos de ratn
evento
Click
Dblclick
Mouseenter

mtodo
Click()
Dblclick()
Mouseenter()

mouseleave

Mouseleave()

Eventos del teclado

Evento
Keypress
Keydown
keyup
Por mencionar algunos

Metodo
Keypress()
Keydown()
Keyup()

Asociacin de uno o ms manejadores de eventos

Es posible asociar uno o ms manejadores de eventos a la vez sin
necesidad de realizar definiciones independientes.
Esto se logra mediante el metodo on().
Para asociar el evento click a los elementos p.
$(p).on(click,function((){
$(this).hide();
});
Para asociar multiples manejadores de eventos a los elementos p
tenemos:
$(p).on({
Mouseenter: function(){
$(this).css(background-color, gray);
},
Mouseleave: function(){
$(this).css(background-color, lightblue);
},
Click: function(){
$(this).css(background-color, yellow);
}
});
Y si todos los manejadores implementan la misma funcionalidad:
$(p).on(mouseenter mouseleave click, function(){

$(this).css(background-color, yellow);
});

Obtencin de contenido
3 de los mtodos mas utilizados para la obtencin y manipulacin de
contenido en jQuery son:
Text()
Obtiene o establece el contenido del elemento o elementos
seleccionados, pero nicamente el texto.
$(p).mouseenter(function(){
Alert($(this).text());
});
Html()
Obtiene o establece el contenido del elemento o elementos
seleccionados, incluyendo el formato html.
$(p).mouseenter(function(){
Alert($(this).html());
});
Val()
Obtiene o establece el valor contenido en un campo de formulario
selecconado.
$(input[type=text]).mouseleave(function(){
Alert($(this).val());
});

Establecer contenido
Para establecer el contenido de los elementos HTML se utilizan los
mismos 3 metodos anteriores, con la diferencia que se proporciona una
cadena como parmetro. El uso de cada mtodo quedara de la siguiente
manera:

$(p).text(hola, soy un parrafo);

$(p).html(<b>hola mundo</b>);
$(input[name=nombre]).val(escribe tu nombre);

Agregando elementos
En jQuery, existen mtodos para agregar elementos de manera
dinmica dependiendo de la posicin en la que se deseen agregar.

Append().- agrega el elemento indicado como parmetro en la

ultima posicin dentro del elemento indicado.
Prepend().- agrega el elemento indicado como parmetro en la
primera posicin dentro del elemento indicado.
Before().- agrega el elemento indicado como parmetro antes del
elemento indicado.
After().-agrega el elemento indicado como parmetro despues del
elemento indicado.

Eliminando elementos
Tambin es posible eliminar elementos del DOM. Para esto, jQuery
proporciona los siguientes mtodos:

Remove().- elimina el elemento seleccionado, incluyendo los

descendentes.
Empty().- permite eliminar todo el contenido del elemento
seleccionado, dejndolo vacio.

Manipulacin de clases
Como hemos comentado anteriormente, jQuery hace fcil el manejo de
los elementos HTML y tambin proporciona mtodos para manipular sus
propiedades, por ejemplo las clases.

addClass().- permite agregar la clase indicada como parmetro al

elemento seleccionado.
removeClass().- permite remover la clase indicada como
parmetro al elemento seleccionado.
ToggleClass().- permite intercambiar la funcionalidad de los dos
mtodos anteriores de tal manera que si el elemento no tiene la
clase indicada como parmetro, esta le es asignada. En caso
contrario, le es removida.
hasClass().- permite saber si el elemento seleccionado contiene o
no la clase especificada.

Manipulacin de atributos y propiedades

Asimismo, es posible manipular las distintas propiedades y atributos de
un elemento.

Attr().- permite obtener y establecer el valor de un atributo

especificado.
$(a).attr(href);
$(a).attr(href, http://www.google.com);
RemoveAttr().- permite eliminar el atributo especificado.
Prop().- suele confundirse con el mtodo attr(), pero la diferencia
reside en que este ultimo mtodo devuelve el valor a manera de
cadena prop() intenta devolver el tipo de valor real.
RemoveProp().- para fines practicos, tiene el mismo
comportamiento que removeAttr(). La diferencia consiste en que
uno es para atributos y el otro para propiedades.