Este documento describe las funciones ms utilizadas de Jquery:

addClass()

$("#contenido").addClass("nombreclase");

Con la funcin addClass() lo que hacemos aadir una clase ya establecida en nuestro CSS al
contenedor con id=contenido. En e este caso le estamos aadiendo los estilos de la clase
nombreclase.

after()

$("#contenido").after("<p>hola!</p>");

El mtodo after() aade contenido html delante de lo que haya dentro del contenedor con
id=contenido.

ajax()

var dataString = 'id='+service;

$.ajax({
type: "POST",
url: "archivo.php",
data: dataString,
success: function() {
...
}
});

Con el mtodo ajax() lo que conseguimos es realizar una llamada a un archivo php sin tener
que recargar la pgina ni hacer una peticin al servidor.

append()

$("#contenido").append("<p>hola!</p>");

El mtodo append() aade contenido html al contenedor con id=contenido.

appendTo()

$("#contenido2").appendTo("#contenido1");

El mtodo appendTo() copia o mueve el contenedor con id=cotenedor2 al contenedor con

id=contenido1.
attr()

$("#contenido").attr("data");
$("#contenido").attr("title");

Con la funcin attr() retorna el valor del atributo que le pases como parmetro de un
elemento o contenedor.

before()

$("#contenido").before("<p>hola!</p>");

El mtodo before() aade contenido html detrs de lo que haya dentro del contenedor con
id=contenido.

blur()

$("input").blur(function(){
...
});

Al salirse de en un campo o input de un formulario ejecutaramos el cdigo de dentro de la

funcin.

change()

$("select#languages").change(function(){
...
});

Al cambiar de opcin en un selector de opciones ejecutaramos el cdigo de dentro de la

funcin.

click()

$("#button").click(function(){
...
});

Al hacer click en el evento o contenedor con id=button ejecutaramos el cdigo de dentro de

la funcin.

css()

$("#contenido").css("background-color","yellow");

Con la funcin css() podemos cambiar estilos al contenedor con id=contenido. En el

ejemplo estamos cambiando el color de fondo.
dblclick()

$("#button").dblclick(function(){
...
});

Al hacer doble click en el evento o contenedor con id=button ejecutaramos el cdigo de

dentro de la funcin.

delay(time)

$("#contenido").slideUp(300).delay(800).fadeIn(400);

Esta funcin permite retrasar la ejecucin de las siguientes que estn en la cola. Es til para
aadir retrasos en una serie de animaciones. En el caso del cdigo de ejemplo, primero
hacemos slideup, hacemos una espera y seguidamente hacemos fadein.

each()

$("li").each(function(){
$(this).toggleClass("nombreclase");
});

Con la funcin each() lo que hacemos es iterar una serie de elementos. En el ejemplo
estamos iterando una lista a la que a cada elemento le estamos cambiando el estilo o css
utlizando la funcin toggleClass().

empty()

$("#contenido").empty();

Con empty() lo que conseguimos es vaciar el contenido de un contenedor antes de volverlo a

rellenar.

fadeIn()

$("#contenido").fadeIn();

El mtodo fadeIn() hace que el elemento que lo recibe aparezca en la pgina a travs del
cambio de su opacidad, haciendo una transicin suavizada que acaba con el valor de opacity
1. Este mtodo slo podremos observarlo si el elemento sobre el que lo invocamos era total
o parcialmente transparente, porque si era opaco al hacer un fadeIn() no se advertir ningn
cambio de opacidad.
fadeOut()

$("#contenido").fadeOut();

Este mtodo hace que el elemento que lo recibe desaparezca de la pgina a travs del
cambio de su opacidad, haciendo una transicin suavizada que acaba con el valor de opacity
cero.

fadeTo()

$("#contenido").fadeTo("slow", 0.33);

El mtodo fadeTo() es bastante ms verstil, como ya se haba adelantado. Para hacer un

ejemplo interesante con este mtodo tenemos que ver cmo se le pueden pasar distintos
valores de opacidad y para ello hemos creado un campo select con distintos valores.

focus()

$("input").focus(function(){
...
});

Al situarte en un campo o input de un formulario ejecutaramos el cdigo de dentro de la

funcin.

focusout()

$("input").focusout(function(){
...
});

Al salirse de en un campo o input de un formulario ejecutaramos el cdigo de dentro de la

funcin.

hasClass()

$("#contenido").hasClass("nombreclase");

Con la funcin removeClass() comprobamos si el contenedor con id=contenido tiene la

clase nombreclase. Devuelve True si la tiene.

height()

$("#contenido").height("200px");

Con la funcin height() modificamos el alto del contenedor con id=contenido.

hide()

$("#contenido").hide();

Con la funcin hide() lo que hacemos es ocultar el contenido del contenedor con
id=contenido.

hover()

$('#element').hover(function(){
...
});

Con la funcin hover() lo que hacemos es ejecutar un cdigo tras pasar el ratn por encima
del contenedor con id=element.

html()

$("#contenido").html("<p>hola!</p>");

El mtodo html() reemplaza el contenido html que haya dentro del contenedor con
id=contenido por el que le pasas como parmetro.

load()

$("#contenido").load("archivo.php");

Funcin muy til para cargar contenidos sin necesidad de recargar la pgina. En el caso del
ejemplo, lo que haramos es cargar el contenido html del archivo.php en el contenedor con
id=contenido.

keyup()

$("input").keyup(function () {
var value = $(this).val();
$("p").text(value);
}).keyup();

Con keyup() capturamos los eventos del teclado. En el ejemplo lo que se escriba en el input
se va escribiendo tambin en el prrafo.

mouseleave()

$("#contenido").mouseleave(function(){
...
});

Al sacar el ratn de encima del contenedor o elemento con id=contenido ejecutaramos el

cdigo de dentro de la funcin.
mouseout()

$("#contenido").mouseout(function(){
...
});

Al sacar el ratn de encima del contenedor o elemento con id=contenido ejecutaramos el

cdigo de dentro de la funcin.

mouseover()

$("#contenido").mouseover(function(){
...
});

Al pasar el ratn por encima del contenedor o elemento con id=contenido ejecutaramos el
cdigo de dentro de la funcin.

nextAll()

$("#contenido").nextAll().remove();

El mtodo nextAll() selecciona todos los contenedores siguientes al que tiene id=contenido.
En el caso del ejemplo, se eliminarn todos los contenedores siguientes a #contenido.

next()

$("#contenido").next().remove();

El mtodo next() selecciona el contenedor siguiente al que tiene id=contenido. En el caso

del ejemplo, se eliminar el contenedor siguiente a #contenido.

parent()

$("#contenido").parent();

El mtodo parent() retorna un objeto que contiene informacin del contenedor padre del
contenedor con id=contenido.

position()

$("#contenido").position().top;
$("#contenido").position().left;

La funcin position() permite obtener la posicin de un elemento en relacin a su padre.

ready()

$(document).ready(function(){
//Aqui tu codigo
});

Ready es un mtodo propio de jQuery, que revisa si el DOM est listo para usarse. Es ms
util que el window.onload, pues este debe esperar a que todos los elementos de la pagina
esten cargados (como scripts e imagenes) paa ejecutar. El ready, en cambio, espera solo a
la estructura.

removeClass()

$("#contenido").removeClass("nombreclase");

Con la funcin removeClass() lo que hacemos quitar una clase o estilo CSS al contenedor
con id=contenido. En e este caso le estamos quitando los estilos de la clase nombreclase.

slideDown()

$("#contenido").slideDown();

Con la funcin slideDown() lo que hacemos es mostrar hacia abajo el contenido del
contenedor con id=contenido que inicialmente o no podra estar oculto.

slideToggle()

$("#contenido").slideToggle();

Con la funcin slideToggle() lo que hacemos es mostrar y ocultar el contenido del contenedor
con id=contenido que inicialmente o no podra estar oculto.

slideUp()

$("#contenido").slideUp();

Con la funcin slideUp() lo que hacemos es mostrar hacia arriba el contenido del contenedor
con id=contenido que inicialmente o no podra estar oculto.

show()

$("#contenido").show();

Con la funcin show() lo que hacemos es mostrar el contenido del contenedor con
id=contenido que inicialmente o no podra estar oculto.
size()

$("li").size();

La funcin size() en este caso retorna el nmero de elementos que hay en la lista.

submit()

$("#formulario").submit(function() {
if ($("#code").val() == "correct") {
$.ajax({
type: "POST",
url: "archivo.php",
data: dataString,
success: function() {
$("#message").empty();
$("#message").append('<div>Hemos recibido su codigo correctamente</div>');
$(this).remove();
}
});
}
$("#message").empty();
$("#message").append('<div>Codigo no valido!</div>');
return false;
});

La funcin submit() se suele utilizar para obtener la informacin de formularios. En el cdigo

anterior vemos un ejemplo de lo que se podra hacer. El formulario debe tener id=formulario
y mtodo POST.

remove()

$("#contenido").remove();

Con la funcin remove() lo que hacemos es quitar de la visat el contenido del contenedor con
id=contenido.

removeAttr()

$("#image").removeAttr("width");

Con la funcin removeAttr() lo que hacemos es quitar un atributo del elemento con
id=image.

text()

$("#contenido").text();

Con la funcin text() obtiene el contenido textual del elemento o contenedor con
id=contenido.
toggle()

$("#contenido").toggle();

Con la funcin toggle() mostramos y ocultamos con efecto el contenedor con id=contenido.

toggleClass()

$("#contenido").toggleClass("nombreclase");

Con la funcin toggleClass() podemos aadir y quitar la clase nombreclase al contenedor

con id=contenido.

val()

$("input").val();
$('select.foo option:selected').val(); // get the value from a dropdown select
$('select.foo').val(); // get the value from a dropdown select even easier
$('input:checkbox:checked').val(); // get the value from a checked checkbox
$('input:radio[name=bar]:checked').val(); // get the value from a set of radio buttons

Con la funcin val() obtenemos el valor de los inputs, selects, textareas de nuestros
formularios.

width()

$("#contenido").width("200px");

Con la funcin width() modificamos el ancho del contenedor con id=contenido.

Para ms funciones consultar

http://api.jquery.com/