Principios basicos de examples jquery

Posted by: admin in destacada, jquery 21 marzo, 2014 0 349 Views

En este tutorial basico de eam!les jquery "amos a em!ezar a desarrollar un !eque#o ejem!lo en el
codi$o libre de jquery, "amos a e!licar los !rinci!ios basicos de jquery asi como !oder mostrar un di",
un elemento "isible u oculto siem!re que nosotros queramos%
Vamos a !roceder a a$re$ar nuestro jquery en el &ead, yo utilizare siem!re la ultima "ersion, si el !ost
esta totalmente obsoleto siem!re !odeis encar$aros de descar$ar la ultima "rsion desde jquery%
Em!ezamos e!licando la 'uncion (ocument% )eady, esta 'uncion indica cuando el documento esta
listo !ara ejecutar este codi$o% Es decir nuestra !a$ina esta car$ada%
*odi$o
$(document).ready(function() {
Agrega tu codigo aqui
});
Pasamos al e"ento clic+, esta 'uncion !ermite realizar el e"ento en un clic+ de un elemento, recuerda
que los ids en los elementos no se !ueden re!etir !ero si las clases, si queremos in"ocar una clase
debemos de utilizar el !unto delante !ero si queremos in"ocar un id deberiamos de in"ocar la , delante%
Evento click
*odi$o
$("#id_del_elemento").click(function() {
alert('Click');
});
Selectores
Esta es la 'orma en que !odemos acceder a al$un elemento de nuestra web, "amos a "er dos ejem!los
de los mas usados actualmente%
#id_elemento: Con el # seuido de un texto le estamos diciendo a j!uery que acceda al
elemento por su "#
$clase_elemento: Con el $ seuido de un texto le estamos diciendo a j!uery que acceda al
elemento por su clase
Ejem!lo de uso !or -(:
*odi$o
$('#id_elemento')
Explicaci%n:
./012 : Es la 'orma de usar j3uery !ara realizar cualquier acci4n sobre un elemento%
.,2 : 5e decimos a j3uery que "amos a seleccionar un elemento !or su -(%
.id6elemento2 : Es el id del elemento que camos a seleccionar%
Ejemplo de uso por Clase:
/07%class81
E!licaci4n:
./012 : Es la 'orma de usar j3uery !ara realizar cualquier acci4n sobre un elemento%
.%2 : 5e decimos a j3uery que "amos a seleccionar un elemento !or su clase%
.class2 : Es la clase del elemento que camos a seleccionar%
&ostrando y 'cultando elementos con j!uery ()ide y S*o+,:
Eisten muc&as 'ormas de ocultar y mostrar elementos con j3uery, en esta !arte del tutorial, les
e!licare la 'orma mas com9n y ':cil de realizar esa tarea:
;ide01 0mostrar1
<&ow01 0ocultar1
*odi$o
$(elector).!ide(duration"call#ack);

$(elector).!o$(duration"call#ack);

$(elector).!o$(duration %"eaing& %"call#ack&);

$(elector).!ide(duration %"eaing& %"call#ack&);
1% selector: Es el elemento que queremos mostrar u ocultar:
= <i es un id >? /0,nombre del id1
= <i es una clase >? /0%nombre de la clase1
= <i es etiqueta@elemento >? /0nombre del elemento1
2% duration (opcional,: Velocidad de la animaci4n en milise$undos% AambiBn se !uede usar los
"alores .slow2 y .'ast2%
3% easin (opcional,: <e trata del ti!o de animaci4n a ejecutar% 5as 2 !osibilidades son: .linear2 y
.swin$.% 5inear serCa una animaci4n constante y swin$ una amimaci4n con cambios de ritmo%
4% callback (opcional,: Dunci4n a ejecutarse una "ez 'inalizada la animaci4n%