jQuery

jQuery

Es una biblioteca ligera de Javascript que enfatiza la interaccin entre Javascript y HTML

jQuery

Es una biblioteca ligera de Javascript que enfatiza la interaccin entre Javascript y HTML Fue liberada en Enero del 200 en el !ar"a#p de $e% &or' por Jo(n )esig

jQuery

Es una biblioteca ligera de Javascript que enfatiza la interaccin entre Javascript y HTML Fue liberada en Enero del 200 en el !ar"a#p de $e% &or' por Jo(n )esig Es libre y gratuito ba*o doble licencia+ M,T License y -$. -eneral /ublic License 2

Caractersticas

0elccin de ele#entos 12M 0oporte con "00 345 Eventos Manipulacin de las (o*as de estilo Efectos y ani#aciones 6J67 0oporta E8tensiones "o#patible con Firefo8 290:; ,E 90:; 0afari 2: y 2pera <:

Incluir jQuery en HTML

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

<script src="http://code.jquery.com/jquerylatest.js"></script>

El evento ready
$(document .ready(!unction( // #$di%o aqu& ' ( "

El evento ready
$(document .ready(!unction( // #$di%o aqu& ' ( "

$(document .ready(!unction( " $("a" .clic)(!unction(event " alert("*ue sho+," ( ' ( ' (

Acceso a los elementos

Tipo de Elemento Etiqueta Ele#ento con un ,d Ele#ento con una clase @classA Modo de llamado $o#bre la etiqueta+ =a>; =strong>; =div> ,d precedido por el signo ?+ =?principal>; =?info> "lase precedida por el punto @9A+ =9codigo>; =9titulo>

B@ele#entoA9evento@funcion4o4parC#etroAD

Prevenir comportamiento por defecto

$(document .ready(!unction( " $("a" .clic)(!unction(event " alert("*ue sho+," ( event.prevent-e!ault( ( ' ( ' (

Agregar y Quitar una Clase C

$("a" .add#lass("test" (

$("a" .remove#lass("test" (

Efectos
$("a" .clic)(!unction(event " event.prevent-e!ault( ( $(this .hide("slo+" ( ' (

Efectos
Efecto
s(o%@velocidad; callbac'A (ide@velocidad; callbac'A toggle@velocidad; callbac'A toogle@s%itc(A slide1o%n@velocidad; callbac'A slide.p@velocidad; callbac'A slideToggle@velocidad; callbac'A fade,n@velocidad; callbac'A fade2ut@velocidad; callbac'A fadeTo@velocidad; opacidad; callbac'A

!escripci"n
1ispliega el o los ele#entos si estCn ocultos9 Eelocidad puede ser un entero o una cadena @slo%; nor#al; fastA 2culta los ele#entos indicados9 "a#bia el la visibilidad del ele#ento "a#bia la visibilidad del o los ele#entos @s%itc( F true #uestra todos los ele#ntos; false los ocultaA )evela los ele#entos a*ustando su altura9 2culta los ele#entos a*ustando su altura ,nterca#bia la visibilidad de los ele#entos selccionados 6parece gradual#ente los ele#entos a*ustando su opacidad 1esaparece gradual#ente los ele#entos a*ustando su opacidad "a#bia la opacidad de los ele#entos a una opocidad especGfica

Efectos

Lista co#pleta de todos los Efectos de *Huery

http://docs.jquery.com/.!!ects

Call#ac$s

.n callbac' es una funcin que es pasada co#o un argu#ento a otra funcin y es e*ecutada despuIs de que la funcin padre (a ter#inado de e*ecutarse9

Call#ac$ in Agurmentos
!unction mi/uncion( // codi%o ' .... $(0a1 .sho+(0normal12 mi/uncion ( "

Call#ac$ Con Argumentos

!unction mi/uncion(x2 y " 3 ' "

$(o4jeto .sho+(0slo+12 !unction( mi#all4ac)(param52 param6 ' (

electores

electores

.n 0elector es usado en *Huery para seleccionar ele#entos 12M de un docu#ento 12M

electores

.n 0elector es usado en *Huery para seleccionar ele#entos 12M de un docu#ento 12M Este docu#ento en #uc(os casos es el docu#ento 12M de todos los navegadores

electores

.n 0elector es usado en *Huery para seleccionar ele#entos 12M de un docu#ento 12M Este docu#ento en #uc(os casos es el docu#ento 12M de todos los navegadores Ta#biIn puede ser el docu#ento 7ML recibido a travIs de 6J67

electores %&sicos
elector ?id ele#ento 9clase 9clase9clase J !escripci"n 0elecciona un ele#ento con el atributo id dado 0elecciona todos los ele#entos con la etiqueta HTML dada 0elecciona todos los ele#entos con la clase dada 0elecciona todos los ele#entos con las clases dadas 0elecciona todos los ele#entos Ejemplo $(07in!o1 $(0p1 $(0.ms%1 $(0.ms%.error1 $(081 $(0div2 p2 p.ms%1

0elector3; 0elecciona una co#binacin de ele#entos dados selector2; selector$ los selectores

electores por Herencia

elector ancestro descendiente padre K (i*o ant : sig Ejemplo 0elecciona ele#entos descendientes de un $(9!orm input9 ancestro $(07main > 81 0elecciona todos los ele#entos siguientes especificados por =sig> que siguen de los ele#entos especificados por =ant> $(0la4el : input1 !escripci"n

electores ' (iltros %&sicos

elector +first +last +not@selectorA +even +odd !escripci"n "orresponde al pri#er ele#ento seleccionado "orresponde el Llti#o ele#ento selccionado Huita todos los ele#entos que sean igual al selector dado "orresponde a los ele#entos pares; con Gndice basado en cero "orresponde a los ele#entos i#pares; con Gndice basado en cero Ejemplo $(0div:!irst1 $(0p:last1 $(0p:not(.ms% 1 $(0span:even1 $(0div:odd1

electores ' (iltros de )isi#ilidad

elector +(idden +visible

!escripci"n "orresponde a todos los ele#entos ocultos "orresponde a todos los ele#entos visibles

Ejemplo $(0div:hidden1 $(0div:visi4le1

electores ' (iltros de Contenido

elector +contains@te8toA +e#pty +(as@selectorA !escripci"n 0elecciona los ele#entos que contengan el te8to dado 0elecciona todos los ele#entos que no tienen (i*os @incluyendo nodos de te8toA 0elecciona los ele#entos que contienen al #enos un ele#ento que sea igual al selector especificado Ejemplo

electores ' (iltro para Hijos

elector +first4c(ild +last4c(ild +only4c(ild !escripci"n 0elecciona todos los ele#entos que son el pri#er (i*o de sus padres 0elecciona todos los ele#entos que son el Llti#o (i*o de sus padres 0elecciona todos los ele#entos que son el Lnico (i*o de sus padres Ejemplo $(0div:!irst-child1 $(0p:last-child1 $(0span:only-child1

electores * (ormularios
elector +input +te8t +pass%ord +radio +c(ec'bo8 +sub#it +i#age +reset +button +file Ejemplo 0elecciona todos los input; te8tarea; select $(0:input1 y button $(0input:text1 0elecciona todos los tipo te8t 0elecciona todos los tipo pass%ord 0elecciona todos los tipo radio 0elecciona todos los tipo c(ec'bo8 0elecciona todos los tipo sub#it 0elecciona todos los tipo i#age 0elecciona todos los tipo reset 0elecciona todos los tipo button 0elecciona todos los tipo file $(0input:pass+ord1 $(0input:radio1 $(0input:chec)4ox1 $(0input:su4mit1 $(0input:ima%e1 $(0input:reset1 $(0input:4utton1 $(0input:!ile1 !escripci"n

electores ' (iltros para (ormularios

elector +enabled +disabled +c(ec'ed +selected !escripci"n 0elecciona todos los ele#entos que estCn (abilitados 0elecciona todos los ele#entos que estCn des(abilitados 0elecciona todos los ele#entos que estCn c(ecados9 ,ncluye c(ec'bo8es y radiobuttons 0elecciona todos los ele#entos que estan seleccionados Ejemplo $(9input:ena4led9 $(9input:disa4led9 $(0input:chec)ed1 $(0input:selected1

Caracteres Especiales en los electores

/ara escapar caracteres en los selectores usa#os la doble barra invertida MM Los caracteres que deben ser escapados son+ 7(;2.:8<9:1,=$>?( =>@/

07!ooAA:4ar1 07!ooAA>4arAA?1 07!ooAA.4ar1

electores

Lista co#pleta de los 0electores disponibles+

http://docs.jquery.com/Belectors

Eventos

El o#jeto event

El siste#a de eventos de *Huery nor#aliza el ob*eto event de acuerdo a los estCndares de la N5" 0e garantiza que el ob*eto event es pasado al #ane*ador del evento

Evento +,document-.ready,

La funcin que se pase co#o parC#etro serC e*ecutada en el instante en que el 12M estI listo para ser leGdo y #anipulado 0e pueden tener los eventos B@docu#entA9ready que quieras Hay que asegurarse que todas las (o*as de estilo sean incluidas antes de los scripts

Eventos

$(elemento .evento(!unction( $(0div1 .clic)(!unction(event ' (

" 3 ' ( "

$(this .text(9#lic) en el -iv9 (

Eventos
4lur chan%e clic) d4lclic) !ocus )eydo+n )eypress )eyup load mousedo+n mouseenter mouseleave mousemove mouseout

Eventos
mouseover mouseup resiCe scroll select su4mit unload

Eventos

/ara #Cs infor#acin acerca de los Eventos y el ob*eto event+

http://docs.jquery.com/.vents http://docs.jquery.com/.vents/j*uery..vent

Atri#utos

Attri#utos

attr(nom4re

2btiene el valor del atributo especificado en Ono#breO $(0div1 .attr(0id1 ( <div id=1in!o1></div>

Atri#utos

attr(propiedades

Establece los 'eyPvalue de un ob*eto co#o propiedades9 Es la #e*or #anera de establecer un gran nL#ero propiedades a un ele#ento
$(0im%1 .attr(" src: 0im%/ima%e.pn%12 title: 0ima%en12 alt: 0una ima%en12 classDame: 0clase1 ' (

Atri#utos

attr()ey2 value

Establece una sola propiedad a un valor9 $(0div1 .attr(0id12 0in!o1 (

/emover Atri#utos

removeEttr(nom4re

)e#ueve el atributo dado por no#bre para cada ele#ento seleccionado $(0input1 .removeEttr(0disa4led1 (

Atri#utos * Clase

add#lass(clase

6grega una clase a los ele#entos seleccionados $(0p1 .add#lass(0texto1 (

Atri#utos * Clase

has#lass(clase

)egresa true si al #enos 3 de los ele#entos seleccionados tiene la clase dada en el argu#ento

remove#lass(clase

)e#ueve la clase de los ele#entos seleccionados

Atri#utos * Clase

to%%le#lass(clase

6grega la clase especificada si no esta presente; la re#ueve si la clase esta presente9

Atri#utos * HTML

html(

2btiene el contenido (t#l @innerHTMLA del ele#ento seleccionado9 Esta propiedad no esta disponible en docu#entos 7ML; pero si traba*a sobre docu#entos 7HTML

Atri#utos * HTML

html(val

Establece el contenido HTML para cada ele#ento seleccionado9 Esta propiedad no esta disponible para docu#entos 7ML; sin e#bargo si lo estC para 7HTML

Atri#utos * Te0to

text(

2btiene el te8to co#binado de todos los ele#entos seleccionados9 $o puede ser usado en ele#entos input9 Huita cdigo HTML

Atri#utos * Te0to

text(

2btiene el te8to co#binado de todos los ele#entos seleccionados9 $o puede ser usado en ele#entos input9 Huita cdigo HTML

text(val

Establece el contenido en todos los ele#entos selccionados9 Escapa cdigo HTML

Atri#utos * )al

val(

2btener el value del input seleccionado

val(valor

Establecer el atributo value para cada ele#ento seleccionado

Atri#utos

/ara #Cs infor#acin acerca de los 6tributos+

http://docs.jquery.com/Ettri4utes

css(propiedad

)egresa la propiedad del estilo del ele#ento seleccionado9 $o soporta propiedades shorhand @#argin; bac'ground; border; etcA $(elem .css(9mar%inFi%ht9 (

css(propiedades

Establece un ob*eto donde cada 'eyPvalue es una propiedadPvalor de estilo de los ele#entos seleccionados
$(elem .css("94ac)%round-color9: 97///92 9!loat9: 9le!t9' (

css(nom4re2 val

Establece una propiedad de estilo a un valor para los ele#entos seleccionados $(elem .css(0color12 0red1 (

/ara #Cs infor#acin sobre "00+

http://docs.jquery.com/#BB

A1A2

A1A2

6J67 F 6sync(ronous Javascript 6nd 7ML 0irve para (acer peticiones al servidor sin recargar toda la pCgina La #anera #Cs sencilla en *query es usar los #Itodos $.post( o $.%et(

A1A2

$.post(url2 data2 call4ac)2 tipo

Grl es la ruta y el arc(ivo que recibe la peticin data ob*eto con los datos a ser procesados call4ac) funcin que se e*ecuta cuando la peticin regresa de #anera satisfactoria tipo es el tipo de dato que serC regresado al callbac'