jQuery

Nombres
:HillevesGaldames
FelipeBesoain
Docente
:ManuelLpez
Asignatura:
TallerdeProgramacionII.
Seccin:
2.

QuesJQuery?
JQueryesunalibreradejavaScriptopensource,puedefuncionarendistintos
navegadoresyescompatibleconCSS3.Elobjetivoprincipaleslaprogramacion
Strinpting.ConJQuerysepuedenproducirpaginasdinamicasoanimacionesenuncorto
tiempo.

JQueryfuepublicadoenEnerodel2006porJohnResig.Luegodeunmesfueincluidoel
soporteparaAjax.Unaodespusenel2007sehizomspopularconunanuevainterfaz
parausuariosporloqueel2008MicrosoftyNokiaanunciaronsoporteparaeste,Microsoft
porsupartetratdeincluirloenVisualStudioyNokiaeneldesarrollodewidget.

JqueryenpalabrassimplesesunalibreradeJavaScriptquenosvapermitirporejemplo:

Ocultarunlistadodeelementos
Aadirnuevasclasescssenfuncinsielusuarioharealizadoalgunaaccin.
BuscarelementosdentrodeundocumentoHTML

NOTA:
Esmscomnverabreviadoconun$enloslibrosJQueryqueconlapalabra
misma,porejemplo:

Cmoseimplementaenpginaweb.
SeagregaaldocumentoHTMLdelasiguienteforma

Sintaxis
LasintaxisesthechaamedidaparaseleccionarelementosHTMLyrealizaralgunas
accionesenloselementos

Lasintaxisbsicaes:
$(selector).action()
$:esparaaccederajQuery
action():
pararealizarsobreeloloselementos.

Ejemplo
$(p).hide()(paraocultarp)

Selectores
Unselectornospermiteelegirunelemento(ovarios)paraluegoaplicarfuncionessobre
estos.Haydistintostiposdeselectores:

Estelselectorqueencuentraelementosbasadosensunombre:
<
p
>Holamundo</
p
>
Enestecasoelselectorespyparaseleccionarloseescribesunombreentrecomillas:
$(
p
)

Tambinestelqueseleccionaporeliddelelemento:
<p
id=prueba
>Holamundo<p>
Paraencontraresteelementoseescribeentrecomillasyun#antesdelid:
$(#prueba)

Tambinunelementopuedeserencontradoporsuclase
<pclass=
prueba
>Holamundo<p>
Paraencontraresteelementoseescribeelnombredelaclaseentrecomillasyantecedido
porunpunto:
$(
.prueba
)

Aquhaymsselectores
Sintaxis

Descripcin

$(*)

Seleccionatodosloselementos

$(this)

Seleccionaelelementoactual

$(p:first)

Seleccionaelprimerelemento<p>

$(p.prueba)

Seleccionatodoslos<p>conclaseprueba
3

EventosenjQuery

Loseventossoninteraccionesdelusuarioconlapginaweb.Eleventorepresentael
momentoprecisoenquealgosucede.

EventoscomnmenteusadosenjQuery:

click()
Estemtodoseejecutacuandosehaceunclicksobreelelemento.
Sintaxisdelmtodo:

$("selector")
.click
(
function()
{action()})

dblclick()
Estemtodoseejecutacuandosehacedobleclicksobreelelemento.
Sintaxisdelmtodo:

$("selector").
dblclick
(function()
{action()})

mouseenter()
Estemtodoseejecutacuandoelmouseseposicionasobreelelemento.
Sintaxisdelmtodo:

$("selector").
mouseenter
(function()
{action()})

mouseleave()
Estemtodoseejecutacuandoelmousesaledeelemento:

$(selector).
mouseleave
(function(){action()})

mousedown()
Estemtodoseejecutacuandosepresionaelbotnizquierdo,delcentrooderechodel
mousesobreelelemento.
Sintaxisdelmtodo:

$(selector).
mousedown
(function()
{action()})

mouseup()
Estemtodoseejecutacuandosesueltaelbotnizquierdo,delcentrooderechodelmouse
sobreelelemento.

$(selector).
mouseup
(function()
{action()})

CSSenJQuery.

Jquery incluye unamaneratilparaobtener oestablecerpropiedadesCSSaloselementos,

comocolordefondo,colordeletra,tamaos,etc.

Obtenerunapropiedad:
$(selector).css(propiedad)

Paraestablecerpropiedadesseutilizaelsiguienteformato:
$(selector).css

(propiedad_a_cambiar:valor_asignar)

Tambinesposiblecambiarmsdeunapropiedadalavez:

$(selector).css( propiedad_a_cambiar
valor_asignar,...)

valor_asignar

otra_propiedad

Tambinesposiblecambiarmsdeunelementoalavez:

$(selector1,selector2,...).css(propiedad_a_cambiar:valor_asignar)

addClass:agregaclase(s)aloselementos:

$(selector).addClass(nombre_clase)

Paraagregarmsdeunaclasealavez:

$(selector).addClass(clase1clase2)

removeClass
:eliminarunaclasequeposeaelelementoseusaelsiguienteformato:

$(selector).removeClass(nombre_clase)

toggleClass()
: permite que ,cada vez sepresionaelbotn,seelimineoagreguelaclase
seleccionada
$(selector).toggleClass(nombre_clase)

Nota
: hay 2 formas para escribir las propiedades con nombres compuestos, con
CamelCaseoconunguinenelmedio.

backgroundcolor=backgroundColor
fontsize=fontSize
5

AjaxenJQuery

JQuerytraeincorporadounmdulodeAJAX,quehacemuyfcillautilizacinde
este.Accedemosalafuncindeestaforma.

tipodeparmetro

Definicin

valores

async

Determinaquela

Boolean:truepordefecto

cargadadelobjetoajax
sesncronaoasncrona.
Porlogeneralasncrona
esmstil,yaquela
formasncronapuede
trabarelnavegadorhasta
quelacargaest
completa
beforeSend

Permitellamaruna
funcinantesdemandar
elobjetoajax.

Funcin:Elnicoparmetro
elelobjeto

complete

Esunafuncinquese
ejecutacuandoel
llamadoalajaxest
completo.Permitesaber
sifueexitoso

Funcin:Losvaloresque
retornasonelobjeto
XMLHttpRequestyun
stringqueindicael
resultado.

contentType

Seusacuandose
mandandatosalos
servidoresamodode
encabezado.

String:
"application/xwwwform
urlencoded"funciona
perfectamente

data

Seusaparaespecificar

Array/Stringconla
6

datosamandar.Estos
formaantesmencionada.
tienenlasiguienteforma:
foo=bar&foo2=bar2.Si
losdatosaenviarsonun
vector(array)jQuerylos
convierteavariosvalores
conunmismonombre(si
foo["alt1","alt2"],
foo="alt1"&foo="alt2"
)
dataType

"xml":Devuelveun

Indicaeltipodedatosque
sevanallamar.Sinose
especificajQuery
automticamente
encontrareltipobasado
enelheaderdelarchivo
llamado(sucargademora
mstiempo)

documentoXML.
"html":Devuelve
HTMLcontexto
plano,yrespeta
lasetiquetas.
"script":Evalael
JavaScripty
devuelvetexto
plano.
"json":Evalala
respuestaJSONy
devuelveunobjeto
Javascript

error

Seejecutasiocurreun
Devuelve3parmetros:
erroralllamarelarchivo. Elobjeto,unstringconel
error,yunobjeto
adicionaldeerror,sieste
ocurre.

global

Permitehacerqueel
objetoajaxobedezcao
desobedezcalasreglas
paraobjetosajaxqueel
usuariopone.

Boolean:Pordefectotrue

ifModified

Permitequeelobjeto
ajaxseactiveslosila

Boolean:Pordefecto
false
7

pginaacargarseha
modificado.
processData

Pordefecto,cadaobjeto
quenoseaunstringy
seapasadodeotro
documento,ser
transformadoencadena.
Paraevitarqueesto
pase,esteparmetrose
puedeponerenfalse

success

Permiteejecutarcdigo

Boolean:Pordefecto
true.

Funcin:Recibelosdatos
quefueronllamados
alserexitosounllamado.

timeout

Permitedefiniruntiempo
deesperaantesde

Nmero:Unnmerode
milisegundos(ms)

ejecutarunobjetoajax.

type

Indicaelmtodoquese

"GET"o"POST"

vaausar
url

Indicalaurldelaqueva

String:Laurllocaldel

acargardatoselobjeto

documento.

ajax.

VentajasydesventajasdeJQuery
LasventajasdejQuery
LaventajaprincipaldejQueryesqueesmuchomsfcildeusar.Sepuedenagregarplugin
fcilmente,porloqueesunahorrodetiempoyenerga.Dehecho,esporloquefuecreado
yporloquehaganadotantafamaenelmundodedesarrolloweb.
LalicenciaopensourcedejQuerypermitequelalibrerasiemprecuenteconsoporte
constanteyrpido,publicndoseactualizacionesdemaneraconstante.
OtrodesusgrandesventajasessuintegracinconAJAX:

Entrminosmssimplesusprincipalesventajasson:

jQueryesflexibleyrpidoparaeldesarrolloweb
VieneconlicenciaMITyesOpenSource
Tieneunaexcelentecomunidaddesoporte
TienePlugins
Bugssonresueltosrpidamente
ExcelenteintegracinconAJAX

LasdesventajasdejQuery
UnadelasprincipalesdesventajasdejQueryeslagrancantidaddeversionespublicadas
enelcortotiempo.Porloquetendrqueestaractualizandoconstantementelaversion,y
asipodriatenerproblemasdecompatibilidadconelcodigo,,otrasdesventajas::

jQueryesfcildeinstalaryaprender,inicialmente.Peronoestanfcilsilo
comparamosconCSS

SijQueryesimplementadoinapropiadamentecomounFramework,elentornode
desarrollosepuedesalirdecontrol.

jQueryMobile
Bsicamente,jQueryMobileesunframeworkweboptimizadoparadispositivosmvilescon
pantallastctiles.Estosignificaquepuedetrabajarconungrannmerodedispositivos,
desdetabletashastatelfonosinteligentes.
VentajasdeJQueryMobile:

Escompatibleconlamayoradelasplataformasmviles:iOS,BlackBerry,Windows
Mobile,SymbianyAndroid.

ComoestbasadoenjQuery(lgico),notieneunagrancurvadeaprendizaje
Soportatemasdeestilos
Essumamenteligeroyrpido.
9


PluginenJQuery

Un plugin es una aplicacin que se relaciona con otra para agregarle una funcin nueva y
generalmentemuyespecfica.

Los pluginsmencionadosacontinuacinsonparaquelaspginaswebyanoseanestticas
,sino,dinmicasconayudadeJQuery.

jQuery Scroll Path: El plugin utiliza canvas para dibujar caminos utilizando los mtodos
arc, moveTo y lineTo.El desplazamiento con scroll se puede hacer con la rueda del ratn,
con las teclas de arriba y abajo oconlabarraespaciadora.Tambinepuedelarotacinde
lapginacompletausandoCSS.

SuperScrollorama:
es un plugin muy popular para la creacin de presentaciones de
desplazamientoanimado.
FullContent.js:Elplugindeformadinmicaposicionauncontenedordentrodelaanchuray
la altura de la ventana del navegador, y sin problemas puedes desplazarte entre cada
contenedor.Esunaherramientafcildeconfigurar.
PageSlide: es un plugin de jQuery quesedeslizaatravsdeunapginawebparamostrar
un panel de interaccin adicional. Por lo general contiene navegacin secundaria, un
formulario,ocualquierinformacinadicional.
Stellar.js:
es un plugin muy fcil de usar que proporciona efectos de desplazamiento de
parallaxacualquierelementodedesplazamiento.
Scrolldeck.js:
esunpluginparacrearpresentacionesdedesplazamiento.
Packery:
es una librera de diseo de JavaScript .Se llena todos los huecos vacos. Los
diseos Packery pueden ordenarse de forma inteligente. Los elementos pueden ser
selladosenunlugar,seadaptandeformaideal,opuedenserarrastradosalrededor.
Shapeshift v2.0:
es un plugin que se encarga de forma dinmica crear un conjunto de
elementos en un sistema de red de columnas similar a Pinterest. Tiene la capacidad de
arrastrar y soltar elementos dentro de la red, manteniendo una posicin dendicelgicode
cadaelemento.
Gridster.js:
es un plugin que permite construir diseos intuitivos que pueden arrastrarse a
partir de elementos que abarcan varias columnas. Tambin se pueden aadir de forma
dinmicayeliminarelementosdelacuadrcula.

10

JQuery Nested: es un plugin que va aprovechando los huecos libres,conunsistema multi

columnadecuadrculasensuexperienciadediseo.
Columnizer:
es plugin fcil de usar con un diseo que muestra de forma automtica el
contenido en formato de columnas al estilo peridico. Puedes especificar el anchodecada
columnaounnmerodecolumnasenparticular.

11