Copyof JQUERYCODIGOSCAROL

CODIGOSJQUERYCAROL
AadirJQUERYaunapagina(FormaAbreviada)
<head>
<scriptsrc="jquery.js"type="text/javascript"></script>
</head>
<body>
<script>
$(function(){
alert(HolaMundo)
})
</script>
</body>
Asitambien(FormaNormal)
<script>
$(document).ready(function(){
})
</script>
Escribirenlosparrafos<p>eltextoholaennegrilla
$(document).ready(function()
{
$("p").html("<b>Hola</b>")
}
)
EscribirHolaalhacerclicsobreeltextoenetiqueta<p>
})
$("p").click(function()
{
$("p").html("<b>Hola</b>")
})
LLAMARJQUERYMEDIANTEFUNCIONESJAVASCRIPT
<body>
<script>
functionsaludo()
{
$('p').text('Hola'+$('#nombre').val())
}
</script>
</body>
<inputtype="text"id="nombre"/>
<ponclick="saludo()">Carol</p>
</html>
CAMBIAR PROPIEDAD EN EL EVENTO Onclick

<a onclick="document.getElementById('id').style.backgroundColor='#123456';">123456</a>
Saberelnumerodeelementosimagen
num=$('img').size()
alert(num)
ACEPTARUNFORMULARIOCONJQUERY
$("#form").submit()
EVENTOS
OtroseventosparaponerenvesdeClick...
submit:Alaceptarunformulario
dblclick:Alhacerdobleclic
hover:Alpasarelmousesobreunelemento
mouseenter:cuandoelcursorentraenunelemento
mouseout:cuandoelcursorsaledeunelemento
change:cuandosemodificaunelement
load:Cuandoseterminadecargarelelemento
ready:CuandoseterminadecargarelDOM,paranotenerqueesperaracargarlasimgenes.
.live(evento,function(){})
SirveparaelementosgeneradosdespuesdecargarelDOOM
.keydown()
Esteeventoselanzasiemprequeelusuariopulsaunatecla,peroseenvasloalelementoquetieneelfocoenesemomento.Los
elementosquepuedentenerelfocovarandeunnavegadoraotro,perolosformulariosyloselementosquecontienen(inputs,
texareas,checkboxs...)siemprepuedentenerelfoco.Demodoqueestoselementossuelenserlosperfectoscandidatospara
gestionaresteevento.
.keypress()
Esmuysimilaralanteriorevento,peroconsutilesdiferencias.Enelcasodequepulsemosunateclaylamantengamospulsada,
eleventokeydownsloselanzaunavez,encambiokeypressselanzaraunavezcadavezqueseescribaelcarcter.Delmismo
modo,sipulsamosmodificadoresdeteclas,comomaysculasocontrol,eleventokeydownselanzaraperoeldekeypressno.
.keyup()
Eleventokeyupselanzacuandoelusuariosueltalateclaqueestabapulsando,yaligualqueantesseenvaalelementoquetiene
elfoco,porloqueloselementosquenospuedentenerelfoconuncalorecibirn.
.load()
Eleventoloadselanzatanprontoelelementoalquehemosasociadoeleventohaterminadodecargarseporcompleto.Este
eventopuedeasociarseacualquiertipodeelementoquetengaunaURL,imgenes,iframes,hojasdeestiloojavascripts...Hayque
tenerespecialcuidadoconlasimgenes,porquesilaimagenlacargadesdelacachenocasionesnolanzaeleventodecargado.
.mousedown()
Eleventomousedowneslanzadocuandopinchamosencualquierelemento.Essimilaraleventoonclick,ladiferenciaestenque
esteeventoselanzaencuandopinchamos,antesdesoltarelbotn.
.mousemove()
Eleventomousemoveesenviadoacualquierelementocuandoelratnestencimadelelemento.
.mouseout()
Esenviadoacualquierelementocuandoelratndejadeestarencimadelelemento.
.mouseover()
EsenviadoacualquierelementodelHTMLcuandoelratnentraporprimeravezenel.Normalmentepodemosusarcombinaciones
deesteeventoydeanteriorparamostraruocultarciertoselementosmientrasmovemoselratn.
.mouseup()
Igualqueeleventomousedown,peroselanzaalsoltarelbotndelratnsobreelelementoqueestgestionandoelevento.
.one()
Esigualquebind,peroenestecasoeleventosloseejecutaunavez.Porejemplo,puedeinteresarnosquecuandopinchemosun
botnsemuestreunmensaje,peroquelasegundavezquesepincheyanosemuestre,enesecasopodramoshacer,
.resize()
resizeselanzacuandocambiamoseltamaodelaventana.Esteeventosloseenvaalobjetowindow.
.scroll()
Eleventoscrollseenvaaloselementosquecambiansuscrollanteunaaccindelusuario.Seaplicaalosobjetosventana,
framesyelementosconlapropiedadoverflowCSSpuestaenestadoscroll.
.select()
Eleventoselectselanzacuandoelusuarioseleccionauntextodelelementosobreelquesegestionaelevento.Esteeventoslo
seaplicaalostextareayalosinputdetipotexto.
.submit()
Esteeventoselanzacuandounusuarioesttratandodeenviarunformulario.Esteeventosloesvlidoparaformularios.
Dependiendodelnavegadoresposibleenviarelformulariosinnecesidaddepincharenunbotn,simplementepulsandolatecla
ENTER.Cuandoestosucedeeleventonoselanza,porloquetenemosqueprestarespecialatencinaestecomportamientopara
gestionarloensucorrespondienteeventokeypressed.
.toggle()
Eleventotoggleseutilizaparagenerarcomportamientosdecambiodeestadogeneradosalpincharsobreunelemento.Por
ejemplo,puedeinteresarnosquealpincharsobreunelementosevisualiceyquealvolverapincharseoculte.Togglenospermite
hacerestoasociandodosomsfuncionesalmismoeventoquesevanejecutandodeformasecuencial.
.unbind()
Unbindpermitedesenlazaruneventodelelementoquedeseemos.Estopuedeayudarnosadejardeejecutarciertoeventoen
ciertoscasos.Porejemplo,imaginaquetienesunagaleradefotos,yqueslocuandolasimgenesestnestamaopequeose
puedapincharsobreellas,loquepodramoshaceresenlazaruneventoparaelcasodequecuandolasimgenessevenpequeas
sepuedapincharsobreellasyquecuandolasimgenesseveangrandesquitareseevento.
.unload()
Eleventounloadselanzacuandounusuarionavegafueradelapginawebosedirigehaciaotrapartedelaweb.Seejecuta
siempre,inclusosielusuariocierraelnavegador.
SELECTORES
//SelectoresbsicoenjQuery.
//SeleccionaunelementoporID.
//e.j.:seleccionaunelemento:<spanid="footer"><span>
$('#footer')
//Seleccionatodosloselementospornombre.
//e.j.:seleccionaelementos:<table>
$('table')
//SeleccionatodosloselementosporCLASS.
//e.j:seleccionaloselementos:<spanclass="box"
//SelectoresjerrquicosenjQuery
//Seleccionatodosloselementosdescendientedeotroelemento
//especificado.
//e.j.:SeleccionalosIMGdescendientedeunDIV.
$('divimg')
//Seleccionaloselementosdescendientesdirectosdeotros.
//Estoquieredecirquesoloseseleccionarnlosprimeros
//dentrodeotros.
//e.j.:SeleccionalosIMGdescendientesdirectosdeunDIV.
$('div>img')
//Seleccionaloselementosquelesiguenaotroelemento
//especificado.
//e.j.:SeleccionatodoslosIMGdespusdeunDIV.
$('div+img')
//Seleccionatodosloselementosprimosquelesiguenaotro
//elementoespecificado.
//e.j.:SeleccionatodoslosIMGprimosdespusdeunDIV.
$('div~img')
//Selectoresdeelementosdeformularios
//SeleccionatodosloselementosINPUT,TEXTAREA,SELECT
//yBUTTON.
$(':input')
//SeleccionatodosloselementosINPUTdetipo"text".
$(':text')
//SeleccionatodosloselementosINPUTdetipo"password".
$(':password')
//SeleccionatodosloselementosINPUTdetipo"radio".
$(':radio')
//SeleccionatodosloselementosINPUTdetipo"checkbox".
$(':checkbox')
//SeleccionatodosloselementosINPUTdetipo"submit".
$(':password')
//SeleccionatodosloselementosINPUTdetipo"image".
$(':image')
//SeleccionatodosloselementosINPUTdetipo"reset".
$(':reset')
//SeleccionatodosloselementosINPUTdetipo"button".
$(':button')
//SeleccionatodosloselementosINPUTdetipo"file".
$(':file')
//SeleccionatodosloselementosINPUTdetipo"hidden".
$(':hidden')
Losfiltrossuelenacompaarlosselectorespreviamentecitadospararealizarseleccionesmsespecficas.
//FiltrosbsicosenjQuery.
$(':first')//Seleccionaelprimerelemento.
$('div:first')//SeleccionaelprimerDIV.
$(':last')//Seleccionaelltimoelemento.
$('div:last')//SeleccionaelltimoDIV.
$(':not(X)')//FiltraloselementosusandounselectorX.
$('div:not(#box)')//SeleccionalosDIVquenotengaunid="box".
$(':even')//Seleccionaloselementospares.
$('div:even')//SeleccionalosDIVpares.
$(':odd')//Seleccionaloselementosimpares.
$('div:odd')//SeleccionalosDIVimpares.
$(':eq(X)')//SeleccionaunelementodendiceX.
$('div:eq(4)')//Seleccionaelquintondice,contadode0a4.
$(':gt(X)')//SeleccionaloselementosconndicemayoraX.
$('div:gt(2)')//SeleccionatodoslosDIVdespusdeltercero.
$(':lt(X)')//SeleccionaloselementosconndicemenoraX.
$('div:lt(2)')//SeleccionatodoslosDIVantesdeltercero.
$(':header')//Seleccionaloselementos:h1,h2,h3etc...
$(':animated')//Seleccionatodosloselementosanimados
//Msdetallessobreanimacionesenprximoscaptulos.
//FiltrosdecontenidosenjQuery.
//Seleccionaloselementosconeltextoespecificado
$(':contains(texto)')
$('div:contains(texto)')
//Seleccionaloselementosquenotienennitextonielementos.
$(':empty')
$('div:empty')
//Seleccionaloselementosquetengaporlomenosunelemento
//especificadoporunselector.
$(':has(selector)')
//e.j.:SeleccionatodoslosDIVquetengaunIMGdeclase'box'.
$('div:has(img.box)')
//Seleccionaloselementosquetienentextooelementos.
$(':parent')
//FiltrosdevisibilidadenjQuery.
$(':hidden')//Seleccionaloselementosnovisibles.
$('div:hidden')//SeleccionalosDIVnovisibles.
$(':visible')//Seleccionaloselementosvisibles.
$('div:visible')//SeleccionalosDIVvisibles.
//FiltrosporatributosenjQuery.
//Seleccionaloselementosquetengaelatributoespecificado.
$('[atributo]')
//e.j.:SeleccionaloselementosconelatributoHREF.
$('[href]')
//Seleccionaloselementosquetengaelatributoespecificado
//yelvalorasociado.
$('[atributo=valor]')
//e.j.:SeleccionaloselementosconelatributoHREF="blank.html".
$('[href=blank.html]')
//ynoelvalorasociado.
$('[atributo!=valor]')
//e.j.:SeleccionaloselementosconelatributoHREFquenosea
//iguala"blank.html".
$('[href!=blank.html]')
//yquecomienzeconelvalorasociado.
$('[atributo^=valor]')
//e.j.:SeleccionaloselementosconelatributoHREFque
//comienzecon"blan".
$('[href^=blan]')
//ytermineconelvalorasociado.
$('[atributo$=valor]')
//termineen".html".
$('[href$=.html]')
//yquecontengaencualquierparteelvalorasociado.
$('[atributo*=valor]')
//tengaencualquierparteelvalor"k.h".
$('[href*=k.h]')
//Seleccionaloselementosquetengalosatributosespecificados
//ofiltrosdeatributosasociados.
$('[atributo1][atributo2][atributo3]')
//comienzepor"bla"ytermineen".html".
$('[href^=bla][href$=.html]')
//FiltrosdescendientesenjQuery.
//Seleccionalosdescendientesdeunelementoporndice,pares,
//imparesoecuacin.
$(':nthchild(ndice/par/impar/ecuacin)')
//e.j.:SeleccionatodoslosIMGdescendientesparesdeunDIV.
$(':nthchild(even)')
//e.j.:SeleccionatodoslosIMGdescendientesdetresentres
//conundesfasede1deunDIV.
$(':nthchild(3n+1)')
//Seleccionalosprimeroselementosdescendientesdeun
$(':firstchild')
//Seleccionalosltimoselementosdescendientesdeun
$(':lastchild')
//Seleccionaloselementosdescendientesdeun
$(':onlychild')
//FiltrosdeformulariosenjQuery.
//Seleccionaloselementosdeformulariosqueestnactivos.
$(':enabled')
//Seleccionaloselementosdeformulariosquenoestnactivos.
$(':disabled')
//SeleccionalosCHECKBOXsqueestnchequeados.
$(':checked')
//SeleccionalosOPTIONsseleccionadodeunSELECT.
$(':selected')
SELECT/DROPDOWNTRANSPARENTECONHOVER(usadoenBienco)
<style>
.encabezadoselect{opacity:0.01mozopacity:0.01zindex:99999height:16pxcolor:#FFFwidth:136px
margintop:16pxfilter:alpha(opacity=0.1)backgroundcolor:#333}
.listas{position:relativelineheight:150%background:url(../images/encabezado/grisazul.jpg)center0#333width:136px
textalign:centerheight:16pxcolor:#FFF}
.listashover{position:relativelineheight:150%background:url(../images/encabezado/grisazul.jpg)center16px#333
width:136pxtextalign:centerheight:16pxcolor:#FFF}
</style>
<script>
$('.encabezado').hover(function(){
$(this).children('div').removeClass("listas").addClass("listashover")
},function(){
$(this).children('div').removeClass("listashover").addClass("listas")
})
</script>
<divid="ciudad"class="listas">SELECCIONECIUDAD</div>
<selectname="zona"class="normal"id="xzona"
onchange="document.getElementById('zona').innerHTML=this.options[this.selectedIndex].innerHTML">
<optionvalue="0">SELECCIONEZONA</option>
<optionvalue='1'>NORTE</option>
<optionvalue='2'>SUR</option>
<optionvalue='3'>CENTRO</option>
<optionvalue='4'>ORIENTE/ESTE</option>
<optionvalue='5'>OCCIDENTE/OESTE</option>
</select>
POSICIONDELCURSORDELRATON(MOUSE)
$(function(){
$(document).mousemove(function(e){
$("#texto").text("X:"+e.pageX+"Y:"+e.pageY)
})
})
</script>
SELECCIONARTODOSLOSCHECKBOX
<script>
$(function(){
$('#Checkaprobar').click(function(){
if($(this).is(':checked')){
$('.cbborrarinput').attr('checked','checked')
}
else{
$('.cbborrarinput').removeAttr('checked')
}
})
})
</script>
EJECUTARUNEVENTOSINQUESELLAME
<script>
$(function(){
$('#boton').click(function(){
$('#boton').toggleClass('resaltado')
})
$('#boton').trigger('click')
})
</script>
TOGGLEMostraryocultarobjetos(Conefecto)
$(function(){
$('div').click(function(){
$('#nombre').toggle('fast')
})
})
TOGGLEALHACERCLICENUNDIVCAMBIARCOLORESVARIASVECESDEUNCAMPOTEXTO
<script>
$(function(){
$('div').toggle(
function(){$('#nombre').css('background','yellow')},
function(){$('#nombre').css('background','green')},
function(){$('#nombre').css('background','red')
})
})
</script>
Oasimismoseriaasi...
$(function(){
$('div').toggle(
function(){$(this).css('background','yellow')},
function(){$(this).css('background','green')},
function(){$(this).css('background','red')}
)
})
NOTA:
TambiensepuedecambiarelCSSdeunelemento:
<ahref="pa.html"onmouseover="this.style.color='#F00'"onmouseout="this.style.color='#333333'">
Carol
</a>
IRAUNAPAGINADETERMINADA
<script>
$(function(){
window.location.href="http://www.google.com
returnfalse
})
NOTA:ReturnfalseesparaquesirvaenInternetExplorer
GUARDARYLEERCOOKIES
$(function(){
$('#clic').click(function(){
document.cookie="Carolingealamejor!"
})
$('#carol').click(function(){
alert(document.cookie)
})
})
Asitambienperomascompleto:
Guardar Cookie:
document.cookie="ID = 123456; expires = 2 Dec 2017 23:59:59 GMT"
Saber si hay Galletas
if(document.cookie.length>0)
{
//Acciones
}
CAMBIARELCOLORAUTOMATICAMENTECADASEGUNDO(1000Miliseg)
$(function(){
$('div').toggle(
function(){$(this).css('background','yellow')},
function(){$(this).css('background','green')},
function(){$(this).css('background','red')
})
setInterval(function(){
$('div').trigger('click')},1000)
})
REFRESCARPAGINA
location.reload(true)
CONTADORDENUMEROCUENTADE1en1ylomuestraenunDIV
$(function(){
varnum=0
num++
$('div').text(num)
},1000)
})
ABRIRUNANUEVAVENTANAPARATODOSLOSENLACESCONLACLASEpop
<body>
<script>
$(function(){
$('a.pop').click(function(){
ventana=window.open($(this).attr('href'),'','height=200,width=150')
if(window.focus){
ventana.focus()
}
returnfalse
})
})
</script>
<aclass="pop"href="http://www.google.com">Clic</a>
</body>
Nota:Sinoseleponeelatributoreturnfalsecargalapaginatambienenlamismaventana.
CambiarpropiedadesCSS,cambiaelcolordefondodel<p>Hola</p>alhacerclic
Cualquierdelas3manerassirve
{
{
$('p').css('backgroundcolor','#FFC')
$('p').css({'backgroundcolor':'#FFC'})
$('p').css({cursor:"crosshair",color:"#0CF"})
})
})
SABERELURLOLAPAGINADONDESEESTA
$(function()
{
varpagina=$(location).attr('href')
//Oasitambien...
varpagina=window.location.pathname
//OAsi...
varpagina=location.pathname
}
SABERLAURLRELATIVA
varpagina=self.location.href.match(/\/([^/]+)$/)[1]
alert(pagina)
AUMENTARELTAMAODELAFUENTEALHACERCLICENUNBOTON
(OjoqueesCasesensitivelaspropiedadescss)
<script>
$(function(){
vartam=$('#principal').css('fontSize')
tam=parseFloat(tam)*1.1
$('#principal').css('fontSize',tam)
})
})
</script>
//Devuelveeltamaoactualdelelemento
Asiesparadisminuiryaumentareltamaodelafuentealhacerclicenunouotroboton
<divid="boton1"align="center"><b>Aumentar</b></div>
<divid="boton2"align="center"><b>Disminuir</b></div>
<script>
$(function(){
vartam=$('#principal').css('fontSize')
if(this.id=='boton1')
{
tam=parseFloat(tam)*1.1
}
elseif(this.id=='boton2')
{
tam=parseFloat(tam)/1.1
}
$('#principal').css('fontSize',tam)
})
})
</script>
CAMBIARTEXTOALPASARYQUITARELMOUSE<DIV>
<script>
$("div").mouseenter(function(){
$("div").html("<b>Dentro</b>")
})
$("div").mouseout(function(){
$("div").html("<b>Fuera</b>")
})
})
</script>
<div>Hola</div>
CAMBIARELANCHOYLARGO(WIDTH,HEIGHT)
$(function(){
$('p').click(function(){
$('p').height(100)
$('p').width(100)
})
})
SABERLAUBICACIONDEUNOBJETO,ALTOYIZQUIERDA(TOP,LEFT)
<bodystyle="margin:0px">
<script>
$(function(){
varubicacion=$('p.resaltado').offset()
alert("Derecha:"+ubicacion.left)
alert("Arriba:"+ubicacion.top)
})
})
</script>
<pclass="resaltado">Clic</p>
COLOCARLETOPYLEFTAUNOBJETO
$(function(){
$('p').offset({top:50,left:60})
})
SELECCIONARELTEXTODEUNTEXTBOX
<scrip>
$(function(){
$('#nombre').select()
})
</script>
AGREGARUNACLASE
<head>
<scriptsrc="Jquery.js"type="text/javascript"></script>
<styletype="text/css">
.cambio{backgroundcolor:#6FF}
</style>
</head>
<body>
<script>
$("div").click(function(){
$("div").addClass('cambio')
})
})
</script>
<div>Carolingea</div>
Quetermineen$=
Queempieceen^=
Quecontenga*=
SELECCIONARPORATRIBUTONAME
<script>
$(function(){
$('iframe[name="ifra"]').attr('src',"http://www.google.com")
})
APLICARCLASEATODOSLOSENLACESCONEXTENSIONHTML(alhacercliceneldiv)
//Siqueremosquebusqueloqueterminepor.html
<script>
$('a[href$=".html"]').addClass('efecto')
})
})
</script>
<div>
<ahref="inicio.html">Inicio</a><br>
<ahref="inicio.pdf">PDF</a><br>
<ahref="enlace.html">Enlace</a><br>
</div>
//Siqueremosquebusqueloquecontengancio
$('a[href*=cio]').addClass('efecto')
})
})
//Siqueremosquebusquelenlacesqueempiezapor...ini
$('a[href^=ini]').addClass('efecto')
})
})
CAMBIARCOLORESDECELDASPARESEIMPARESDETABLAS
<head>
<scriptsrc="Jquery.js"type="text/javascript"></script>
.par{backgroundcolor:#FF9}
.impar{backgroundcolor:#09F}
</style>
</head>
<body>
<script>
$('tr:odd').addClass('par')
$('tr:even').addClass('impar')
})
</script>
<table>
<tr>
<th>ANIMAL</th>
<th>COLOR</th>
<th>TIPO</th>
</tr>
<tr>
<td>Gato</td>
<td>Blanco</td>
<td>Mamifero</td>
</tr>
<tr>
<td>Perro</td>
<td>Negro</td>
<td>Mamifero</td>
</tr>
<tr>
<td>Lagartija</td>
<td>Gris</td>
<td>Reptil</td>
</tr>
<tr>
<td>Loro</td>
<td>Verde</td>
<td>Ave</td>
</tr>
</table>
VERIFICARSISETIENEUNACLASE
<script>
$(function(){
if($('p').hasClass('clase'))
{
alert('Tienelaclase')
}
else{
alert('Nolatiene')
}
})
</script>
<pclass="clase">Clic</p>
EFECTOSJQUERY
OPACIDAD:FadeIn,fadeOut,fadeTo
ALTURA,ANCHO,OPACIDAD:Show,Hide
ALTURA:SlideOn,SlideUp
MOSTRAROCULTARCONEFECTO
<script>
$(function(){
$('#principal').hide()
$('#principal').show('20')
})
})
</script>
//Tambienpuedeponerseasi:
$('#principal').show('slow')
EFECTOSlideToggle(Muestrayocultaelobjetoconunefectodeslizante)
$(function(){
$("#i").slideToggle("slow")
})
})
TambienpudeusarsefadeToggleesigual
ANIMATETOGGLE
$(function(){
$('#dos').animate({width:'toggle'})
})
})
Oasi:
$('#dos').animate({width:'toggle',opacity:'toggle'})
Paracambiarlavelocidad:
$('#dos').animate({opacity:'toggle',height:'toggle'},100)
EFECTOALPASARELMOUSEMUESTRAUNOBJETOYALQUITARLOLOOCULTA
$(function(){
$('#carol').hide()//Ocultamosparaquenoaparezca
$('#clic').hover(function(){
$('#carol').slideToggle()
})
})
</script>
Paravelocidad
EFECTOFADEIN
$(function(){
$('#principal').fadeIn('slow')
})
})
</script>
ConTOGGLE
<script>
$(function(){
$('#principal').toggle('slow')
})
})
</script>
METODOANIMATE
<script>
$(function(){
$('#principal').animate({height:500,width:200,opacity:0.6},'slow')
})
})
</script>
MOSTRARUNELEMENTOALHACERCLIC,CONEFECTO
$(function(){
$('li').click(function(){
varelegido=$(this).text()
$('p').hide(500).show(500)
$('p').empty().append(elegido)
})
})
</script>
VERIFICARSIESTAOCULTOONOUNELEMENTOSirveparaEfectosslideToggle,fadeToggle
if($(this).is(':visible')){
alert('Meven')
}
else{
alert('YaNOmeven')
}
RECORTARCADENADECARACTERES(Quitarlelaextensionalnombredelarchivodeunaimagen
SRC)
varnombre=$(this).find('img').attr('src')
vartexto=nombre.substring(0,nombre.length4)
RECORTAREXTENSIONESAPARTIRDEUNDETERMINADOCARACTER(elpunto)
varnombre=$(this).find('img').attr('src')
nombre=nombre.split(".")
nombre=nombre[0]
AGREGARUNHIJO
$('#clic').click(function(){
$('.clasediv:last').after('<div>Hola</div>')
})
<divclass="clase">
<div>Uno</div>
<div>Uno</div>
<div>Hola</div>
ANIMATE,EXPANDIRHACIAABAJO
<script>
$(function(){
$('div.resaltado').animate({height:100},'slow')
$('div.resaltado').animate({width:600})
//Oasitambien
})
})
</script>
<divid="boton"align="center">CLICAQUI</div>
<divclass="resaltado">CAROLINGEAASIES!</div>
EFECTOSENCADENADOS
<script>
$(function(){
//$('#principal').hide()
$('div.resaltado').animate({height:400})
.animate({width:400})
.fadeIn('slow')
.toggle('slow')
})
})
MASEFECTOSENCADENADOS...
</script>
<script>
$(function(){
$('div.resaltado').slideDown('slow',function(){
$('div.resaltado').animate({width:500})
$('div.resaltado').css({backgroundColor:'#C9F'})
})
})
})
</script>
CAMBIARATRIBUTOSHTML
Cambiaelhrefdetodosconenlacesconlaclase.resaltado
<script>
$(function(){
$('.resaltado').attr({href:'practicas.html'})
})
})
</script>
Asitambien...
$('.resaltado').attr({target:'_blank'})
USODELBUCLEEACH
Cambialosenlacesdentrodedivperode1en1,
Asiquedara:enlace0.html
enlace1.html
enlace2.html
<script>
$(function(){
$('diva').each(function(i){
$(this).attr({href:'enlace.html?num='+i})
})
})
})
</script>
Oasitambien:
$(this).attr({href:'enlace'+i+'.html'})
Oasitambienperoesmascomplicadito...
<script>
$(function(){
$('diva').each(function(i){
varenlace=$(this)
enlace.attr({href:'enlace.html?num='+i})
})
})
})
</script>
Oasitambien...
enlace.attr({href:'enlace.html?num='+i,title:enlace.text()})
enlace.attr({href:'enlace.html?num='+i,title:'num'+i})
.titlemuestraunmensajeemergente
.text()muestraeltextodelenlace
.hrefDirecciondelenlace
AGREGARNUMERACION
Agreganumerosantesdecadaenlace
<script>
$(function(){
$('a').each(function(i){
$(this).before(i+'')
})
})
</script>
AGREGARCODIGOHTMLDENTRODEALGUNOBJETO
Alhacerclicsobreelparrafoagregaradentrodemidivlapalabraholaennegrilla
<script>
$(function(){
$('#midiv').append('<B>Hola</B>')
})
})
</script>
<p>Agregar</p>
<divid="midiv">Midiv</div>
ENVOLVERCONWRAP(Unoauno)
Aplicanegrillaalcontenidodeldivquedandoasi<b><div>Envuelto<div></b>
$(function(){
$('div').wrap('<b>')
})
Tambienasi...$('div').wrap('<b></b>')
DESEMBOLVERUNWRAP
Quitalaetiqueta<b>delparrafo
$(function(){
$('p').unwrap('<b>')
})
</script>
<b><p>Parrafo</p></b>
ENVOLVERATODOSALAVEZ
Todoslosparrafosquedarianenvueltosconunasolaetiquetadiv
<script>
$(function(){
$('p').wrapAll('<div>')
})
</script>
<p>Parrafo1</p>
<p>Parrafo2</p>
<p>Parrafo3</p>
WRAPINNER(Envuelveloqueestaadentrodeunaetiqueta)
<script>
$(function(){
$('b').wrapInner('<divclass="res">')
})
})
</script>
REEMPLAZARReemplazalosdivporlapalabraremplazadoennegrilla
<script>
$(function(){
$('div').replaceWith('<b>Remplazado</b>')
})
</script>
REMOVERETIQUETASOBORRARRemuevetodoslosdiv
$(function(){
$('div').remove()
})
VACIARETIQUETASOCONTENIDODEETIQUETAS
Borratodoloqueestedentrodelpparrafo,sinborrarelparrafo
$(function(){
$('p').empty()
})
CLONARUNDIVYLOPONEDESPUESDELDIV
$(function(){
varclon=$('div').clone()
clon.appendTo('div')
})
APLICARHTMLYAGREGARMENSAJES
<script>
$(function(){
$('<b>HOLA</b>').insertAfter('#boton')
})
})
</script>
Otrosmetodos...
.insertBefore
.prependTo('body')locolocaalcomienzodelapagina
.insertAfter('a:eq(1)')asilocolocaraapartirdeunelemento,otambiensepuedecongt()
.appendcolocaelcontenidodespues
.wrapEnvuelve
.append: Agrega adentro
MOVERUNELEMENTOYCOLOCARLOJUNTOAOTRO
<script>
$(function(){
$('#boton').insertAfter('#pie')
})
})
</script>
CREARUNVINCULOCONUNANCLAAARRIBADELAPAGINA
<script>
$(function(){
$('<aid="arriba"name="arriba"></a>').prependTo('body')
$('<ahref="#arriba">Arriba</a>').insertAfter('div')
})
})
</script>
CAMBIAROREEMPLAZARELTEXTODEALGO
<script>
$(function(){
$('div').text('Hola')
})
</script>

//RESALTALACELDADONDEAPARECELAPALABRAGATO
.resaltado{backgroundcolor:#FF0}
</style>
</head>
<body>
<script>
$('td:contains("Gato")').addClass('resaltado')
})
</script>
ANIMAL
COLOR
TIPO
Gato
Blanco
Mamifero
Perro
Negro
Mamifero
Lagartija
Gris
Reptil
Loro
Verde
Ave
CONTAINSCONUNAVARIABLE
<body>
<script>
$(function(){
varbuscar=$('#texto').val()
$('div:contains("'+buscar+'")').css('color','red')
})
})
</script>
<div>CarolinaDelgadoVillalobos.</div>
<inputid="texto"type="text"/>
<inputid="boton"type="button"value="Clic"/>
</body>
//Asiseresaltaelsiguiente,oseaelqueestaallado:Blanco
$('td:contains("Gato")').next().addClass('resaltado')
})
//Asiseresaltanloshermanososealosdeallado
<script>
$('td:contains("Gato")').siblings().addClass('resaltado')
})
</script>
ANIMAL
COLOR
TIPO
Gato
Blanco
Mamifero
Perro
Negro
Mamifero
Lagartija
Gris
Reptil
Loro
Verde
Ave
Seleccionarelprimerhermanoconclasesubmenu
$(this).siblings('.submenu1').filter(':first').show()
CAPTURARLOSVALORESSELECCIONADOSDEUNSELECTYMOSTRARLOSENUNP
<script>
$(function(){
$('#lista').change(function(){
varvalor=$('#listaoption:selected').text()
//Leeelseleccionado
$('p').text(valor)
})
})
</script>
<p>Mostrar</p>
<selectid="lista"name="lista">
<optionid='uno'value="uno">Uno</option>
<optionvalue="dos">Dos</option>
<optionvalue="tres">Tres</option>
</select>
CAPTURARLOSVALORESSELECCIONADOSDEUNSELECTYMOSTRARLOSENUNP
PARATODOSLOSSELECTS
<script>
$(function(){
$('select').change(function(){
varvalor=$("option:selected",this).text()
//Leeelseleccionado
$('p').text(valor)
})
})
</script>
<p>SELECCIONA</p>
</select>
<optionid='uno'value="alfa">Alfa</option>
<optionvalue="beta">Beta</option>
<optionvalue="gamma">Gamma</option>
</select>
CAMBIARYLEERUNSELECTOPTIONLOSELECCIONADO
<body>
<script>
$(function(){
alert($('#listaoption:selected').text())
$('#uno').attr('value','Primero')
})
})
</script>
//Leeelseleccionado
//Lecambiaelvalue
<p>Clic</p>
</select>
</body>
ASICOMPROBAMOSELSELECTELEGIDOENELOPTION
<body>
<script>
$(function(){
varelegido=$('selectoption:selected').text()
if(elegido=='Uno'){
alert('EligioUno')
}
elseif(elegido=='Dos'){
alert('EligioDos')
}
elseif(elegido=='Tres'){
alert('EligioTres')
}
})
})
</script>
<p>Clic</p>
<optionvalue="uno">Uno</option>
</select>
</body>
Nota:
Tambienpuedenrecogerseelqueestaseleccionadodeestasmaneras...
varelegido=$('#lista:selected').text()
varelegido=$(':selected').text()
varelegido=$('select:selected').text()
(OJO!Sinelespacioantesdelosdospuntos:selectednofunciona)
ELEMENTOSELECCIONADODEUNRADIO
<body>
<script>
$(function(){
alert($('#generos:checked').val())
})
})
</script>
<p>CLICAQUI</p>
<formid="generos">
<inputtype="radio"name="genero"value="F">Femenino
<inputtype="radio"name="genero"value="M">Masculino
<inputtype="radio"name="genero"value="T">Trans
</form>
</body>
Tambiensepuedeasi...
alert($(':checked').val())
SACARELIDDECADAELEMENTO(Sineleachnomaslohariaparaelprimerelemento)
<body>
<script>
$(function(){
$('div').each(function(){
alert($(this).attr('id'))
})
})
})
</script>
<p>CLICAQUI</p>
<divid="alfa">Primero</div>
<divid="beta">Segundo</div>
<divid="gama">Tercero</div>
</body>
REMOVERATRIBUTOremoveAttr()
<body>
<script>
$(function(){
$('#beta').removeAttr('id')
})
})
</script>
<p>CLICAQUI</p>
<divid="alfa">Primero</div>
<divid="beta">Segundo</div>
AplicarCSSaHijosCHILDREN(Seaplicaraalasetiquetas<i>)
<script>
$(function(){
$('p').children().addClass('resaltado')
})
</script>
<p>Carolina
<i>Delgado</i>
<i>Villalobos</i>
</p>
Resaltasololasetiquetashijas<i>
$(function(){
$('p').children('i').addClass('resaltado')
})
</script>
<p>Carolina
<i>Delgado</i>
<i>Villalobos</i>
</p>
Oasi...
Resaltaloshijosde<p>quetenganlaclasecambio
$('p').children(".cambio").addClass('resaltado')
<p>Carolina
<iclass="cambio">Delgado</i>
<i>Villalobos</i>
</p>
SELECCIONARLASEGUNDAETIQUETAHIJA(1porquecontamosel0cero)
$(p).children(':eq(1)').addClass(resaltado)
//Resaltaretiquetapadrede<u>
<script>
$(function(){
$('u').parent().addClass('resaltado')
})
</script>
<p>Carolina
<i><u>Delgado</u></i>
<i>Villalobos</i>
</p>
Sisedesearesaltartodaslasetiquetaspadresseusaparents
$('u).parents().addClass('resaltado')
PARENTSUNTILResaltarhastadeterminadoselector
<script>
$(function(){
$('#cuarto').parentsUntil('#segundo').addClass('resaltado')
})
</script>
<divid="primero">
<divid="segundo">
<divid="tercero">
<divid="cuarto">
</div>
</div>
</div>
</div>
RESALTARelprimerpadre
$(function(){
$('#tres').closest('div').addClass('resaltado')
})
</script>
<div>Principal
<div>Uno
<div>Dos
<divid="tres">Tres</div>
</div>
</div>
</div>
RESALTARelsiguienteconnext(sealaeldos)
$(function(){
$('#uno').next().addClass('resaltado')
})
</script>
<pid="uno">Uno</p>
<p>Dos</p>
<p>Tres</p>
<p>Cuatro</p>
AsiseSealaetercero...
$('#uno').next().next().addClass('resaltado')
RESALTARtodoslossiguientesalprimero
$(function(){
$('#uno').nextAll().addClass('resaltado')
})
</script>
<pid="uno">Uno</p>
<p>Dos</p>
<p>Tres</p>
<p>Cuatro</p>
SiseleagregaaloanteriorandSelf()incluyealmismoelemento
<script>
$(function(){
$('p.cambio').nextAll().andSelf().css('background','yellow')
})
</script>
<p>Uno</p>
<pclass="cambio">Dos</p>
<p>Tres</p>
<p>Cuatro</p>
Asiresaltalossiguientesquetenganlaetiquetap
$('#uno').nextAll('p').addClass('resaltado')
<pid="uno">Uno</p>
<p>Dos</p>
<i>Tres</i>
<p>Cuatro</p>
Asiresaltahasta...elidtres
$('#uno').nextUntil('#tres').addClass('resaltado')
})
</script>
<pid="uno">Uno</p>
<p>Dos</p>
<pid="tres">Tres</p>
<p>Cuatro</p>
Asiresaltaelanterioralultimoparrafo(p:last)
$(function(){
$('p:last').prev().addClass('resaltado')
})
</script>
<p>Uno</p>
<p>Dos</p>
<p>Tres</p>
<p>Cuatro</p>
Asiresaltatodoslosanterioresalultimoparrafo(p:last)
$('p:last').prevAll().addClass('resaltado')
<p>Uno</p>
<p>Dos</p>
<p>Tres</p>
<p>Cuatro</p>
Asiresaltatodoslosanterioresalultimoqueseanp
$(function(){
$('p:last').prevAll('p').addClass('resaltado')
})
</script>
<p>Uno</p>
<i>Dos</i>
<p>Tres</p>
<b>Cuatro</b>
<p>Cinco</p>
Asiseresaltaelanteriordelanterioralultimo
$(function(){
$('p:last').prev().prev().addClass('resaltado')
})
</script>
<p>Uno</p>
<p>Dos</p>
<p>Tres</p>
<p>Cuatro</p>
<p>Cinco</p>
Asiseresaltahastaelidseleccionadodelosanterioresaultimo
$(function(){
$('p:last').prevUntil('#dos').addClass('resaltado')
})
</script>
<p>Uno</p>
<pid='dos'>Dos</p>
<p>Tres</p>
<p>Cuatro</p>
<p>Cinco</p>
Asiseresaltanloshermanosdeliddos,peronoestemismo
$(function(){
$('#dos').siblings().addClass('resaltado')
})
</script>
<p>Uno</p>
<pid='dos'>Dos</p>
<p>Tres</p>
<p>Cuatro</p>
<p>Cinco</p>
Resaltarloshermanosdelidquesean<p>masnoaestemismo
$(function(){
$('#dos').siblings('p').addClass('resaltado')
})
</script>
<b>Uno</b>
<pid='dos'>Dos</p>
<p>Tres</p>
<i>Cuatro</i>
<p>Cinco</p>
Slice():Resaltardesdelaposicion1hastala4(comienzadesde0)
$(function(){
$('p').slice(1,4).css('background','yellow')
})
</script>
<p>Uno</p>
<p>Dos</p>
<p>Tres</p>
<p>Cuatro</p>
<p>Cinco</p>
MAP():Aplicaalgunacaracteristicaatodoslosobjetosindicadosescomoelbucleeach
$(function(){
vari=0
$('p').map(function(){
i++
$(this).text(i)
})
})
</script>
Oasitambien...
$(this).html('<b>Num</b>'+i)
MAP()conunavariable...(sieselitem4,comocomienzapor0cero)
$(function(){
$('p').map(function(i){
if(i==3){
$(this).html('<b>Posicion</b>'+i)
}
})
})
</script>
MAP()Returnthis
$(function(){
$('p').map(function(i){
if(i>2){
returnthis
}
}).css('background','yellow')
})
</script>
<p>Uno</p>
<p>Dos</p>
<p>Tres</p>
<p>Cuatro</p>
<p>Cinco</p>
FILTERFiltraralgo
$(function(){
$('p').filter('#ocho').css('color','red')
})
</script>
<p>10</p>
<p>5</p>
<pid="ocho">8</p>
<p>9</p>
<p>2</p>
Tambienpuedeserconunaclase...
$('p').filter('.clase').css('color','red')
FILTER()conunafuncion.AplicaCSSalosquesean<=5
$(function(){
$('p').filter(function(){
return$(this).text()<=5
}).css('color','red')
})
</script>
<p>10</p>
<p>5</p>
<p>8</p>
<p>9</p>
<p>2</p>
BUSCARetiquetasconfind
$(function(){
$('body').find('p').addClass('resaltado')
})
<p>Uno</p>
<i>Dos</i>
FORMULARIOEventofocusinyfocusout
$(function(){
$('input').focusin(function(){
$(this).addClass('resaltado')
})
$('input').focusout(function(){
$(this).removeClass('resaltado')
})
})
<fieldsetstyle="width:300px">
<legend>FORMULARIO</legend>
<inputtype="text"/>
<inputtype="button"value="Click"/>
</fieldset>
//Resaltarceldasencursiva,oseaconlaetiqueta<i>enlatabla
<script>
$('td').parent().find('i').addClass('resaltado')
})
</script>
//Resaltarceldasencursiva<i>quenocontenganpalabraNegro
<script>
$('td').parent().find('i').not(':contains("Negro")').addClass('resaltado')
</script>
//Resaltarlacolumna2
<script>
$('td').parent().find('td:eq(1)').addClass('resaltado')
})
</script>
//Resaltarapartirdelacolumnasiguientealaindicada,oseadesdelacolumna2
<script>
$('td').parent().find('td:gt(1)').addClass('resaltado')
})
</script>
//ResaltartodoslosDivsconatributoid,losatributosvanencorchete[atributo]
<script>
$(function(){
$('div[id]').css("background","yellow")
})
</script>
//Asitambien...pararesaltarlosdivsconatributostyle
$('div[style]').css("background","yellow")
//Asipintalosdivconatributoseaid=uno
$('div[id=uno]').css("background","yellow")
//Asipintalosdivconatributoseaiddistintodeuno
$('div[id!=uno]').css("background","yellow")
//Asipintalosdivconquenotenganlaclaseresaltado
$('div:not(.resaltado)').css("background","yellow")
//oasitambienesvalido
$('div[class!=resaltado]').css("background","yellow")
//Asiseresaltalos<td>quecontenganlaetiqueta<i>osealasceldasconletracursiva
<script>
$(function(){
$('tdi').addClass('resaltado')
})
</script>
//Resaltaeltextoencursivaqueestadentrodelafilaconclassellamadanormal
<script>
$(function(){
$('tr.normali').addClass('resaltado')
})
</script>
//ResaltaTODASlasetiquetashijasde<td>
<script>
$(function(){
$('td>*').addClass('resaltado')
})
</script>
METODOSDEFILTROS
EQ:Seleindicalaposicionqueresaltara(eq(0)posicion1,eq(1)posicion2)
$(function(){
$('p').eq(1).addClass('resaltado')
})
</script>
<p>Uno</p>
<p>Dos</p>
<p>Tres</p>
<p>Cuatro</p>
EQ():AplicarCSSatodos,alprimeroaplicarotroCSS
$(function(){
$('p').css('background','green')
.eq(0).css('background','yellow')
})
</script>
<p>Uno</p>
<p>Dos</p>
<p>Tres</p>
<p>Cuatro</p>
Tambienasihacelomismo...
$('p').css('background','green').first().css('background','red')
FIRST():AplicarCSSalprimerparrafo
$(function(){
$('p').first().css('background','yellow')
})
<p>Uno</p>
<p>Dos</p>
<p>Tres</p>
<p>Cuatro</p>
LAST():AplicarCSSalultimo
$(function(){
$('p').last().css('background','red')
})
</script>
<p>Uno</p>
<p>Dos</p>
<p>Tres</p>
HAS():AtodoslospquetenganunbaplicaCSS
$(function(){
$('p').has('b').css('background','yellow')
})
</script>
<p>Uno</p>
<p><b>Dos</b></p>
<p><b>Tres</b></p>
<p>Cuatro</p>
DEVOLVERELNUMERODEelementosquecumplenconelHAS
$(function(){
alert($('p').has('b').length)
})
</script>
Igualsirveparafirst(),last(),eq()peromuestraelvalorde1
SABERSIEXISTEUNELEMENTO
if($('.carol').length)
{
alert('Existe!')
}
else
{
alert('NoExiste!')
}
Sieldivnocontienepmostraraelsiguientemensaje
$(function(){
if($('div').has(p).length==0){
$('div').text('Nohayproductos')
}
})
IS()Devuelvetrueofalsesieslaclaseindicada
$(function(){
alert($(this).is('.cambio'))
})
})
</script>
<div>Uno</div>
<divclass="cambio">Dos</div>
<div>Tres</div>
<divclass="cambio">Cuatro</div>
Asitambien,sisequiereconunid...
alert($(this).is('#uno'))
Alcliquearundivconosinlaclase.cambiolecolocaeltextoelegidoonoelegidorespectivamente
$(function(){
if($(this).is('.cambio')){
$(this).text('Elegido')
}
else{
$(this).text('Noelegido')
}
})
})
</script>
<div>Productos</div>
<div>Uno</div>
<div>Tres</div>
NOT():Aplicalaclaseresaltadoalosquenotenganclasecambio
$(function(){
$('div').not('.cambio').addClass('resaltado')
})
</script>
<divid="uno">Uno</div>
<div>Tres</div>
Asiparaaplicarleunaclaseatodosloselementosquenotenganid=uno
$('div').not('#uno').addClass('resaltado')
CHILDREN():Resaltarloshijosdedivqueseanp
$(function(){
$('div').children('p).addClass('resaltado')
})
</script>
<div>Madre
<b>Hijo</b>
<p>Hija</p>
</div>
Asipararesaltarhijosdedivconid=uno
$('div').children('#uno').addClass('resaltado')
<div>Madre
<p>Hijo</p>
<pid=uno>Hija</p>
</div>
Asipararesaltarhijosdedivconclase=cambio
$('div').children('.cambio').addClass('resaltado')
<div>Madre
<p>Hijo</p>
<pclass=cambio>Hija</p>
</div>
END()Vuelvealorigenosubeunnivel.Aplicaelcolorverdealdivcontenedor
$(function(){
$('div').children('p').css('background','yellow')
.end()
.css('background','green')
})
<div>
<p>Uno</p>
<p>Dos</p>
<p>Tres</p>
</div>
CAMBIARCOLORDEFONDO
<script>
$(function(){
$('body').addClass('resaltado')
})
})
</script>
<pid="boton"align="center"><b>CLICAQUI</b></p>
REMOVEROQUITARUNACLASE(removeClass)
.colores{backgroundcolor:#FF9}
</style>
$(function(){
$('#general').removeClass('general')
})
})
</script>
<divclass="colores"id="general">
Holaatodos...
</div>
//CAMBIARCOLORDEELEMENTOSQUENOSEAN<TH>OSEACABECERA
<script>
$(function(){
$('td:not(th)').addClass('resaltado')
})
</script>
<table>
<tr>
<th>Animal</th>
<th>Tipo</th>
</tr>
<tr>
</table>
USODELTHIS
<script>
$(function(){
$(this).addClass('impar')
})
})
</script>
USODELIF,Sielidesbotonentoncesharaloresaltara
<script>
$(function(){
if(this.id=='boton'){
$(this).addClass('resaltado')
}
})
})
</script>
ALTERNARLACLASEDEUNBOTON(Lequitayleagregalaclasealdiv)
<script>
$(function(){
$('div').toggleClass('resaltado')
})
})
</script>
ALTERNARALPASARELMOUSE
<script>
$(function(){
$('div').hover(function(){
$(this).toggleClass('resaltado')
})
})
</script>
PASARELMOUSEPORUNELEMENTO
<script>
$(function(){
$('.boton').hover(function(){
})
})
PASARELMOUSEPORENCIMAYSEPONDRAAMARILLO
$(function(){
$('a').hover(function(){
$(this).css('background','yellow')
},function(){
$(this).css('background','transparent')
})
})
//RESALTARALHACERELSEGUNDOCLICK
$(function(){
varc=0
$('div').toggleClass('resaltado',c==2)
c++
})
})
//LEERELATRIBUTOVALUEDEUNTEXTBOX
<script>
$(function(){
$('div').text($('input').attr('value'))
})
})
</script>
<form>
<inputtype="text"/>
</form>
OTAMBIENASIMASORDENADO,ALHACERCLICENUNBOTONLEERELTEXTBOX
<script>
$(function(){
$('div').text($('#nombre').attr('value'))
})
})
</script>
<form>
<inputtype="text"id="nombre"/>
<inputtype="button"id="boton"value="Clic"/>
</form>
//Tambienasifunciona...
$('div').text($('#nombre').val())
CARGARPAGINAENUNIFRAME
<script>
$(function(){
$('#click').click(function(){
$('iframe').attr('src','jquery1.html')
})
})
</script>
<pid="click">Click</p>
<iframe></iframe>
COMPRUEBASICARGOUNIFRAMEOCULTO(SeleagregalaclasecargadoparaqueNOhagala
accioncuandocarguelapagina)(ParaBienco)
ELiframe1tieneunenlaceconuntargetparaquecargueeneliframe2
<script>
$(function(){
$(window).load(function(){
$('#resultados').load(function(){
$(this).show()
if($('#resultados').hasClass("cargado"))
{
$(this).show()
}
else{
$(this).addClass("cargado")
}
})
})
})
</script>
<body>
<iframename="laeteral"src="prueba.html"width="500"height="300"></iframe>
<iframeid="resultados"name="dos"style="display:none"src="index.html"width="500"
height="300"></iframe>
COLOCARCOLORALACABECERADELATABLA
//Laetiqueta<td>espadrede<th>selecolocaraalos<th>quetengandepadrea<td>
</style>
</head><body>
<script>
$('th').addClass('resaltado')
})
</script>
<table>
<tr>
<th>ANIMAL</th>
<th>COLOR</th>
<th>TIPO</th>
</tr>
<tr>
<td>Gato</td>
<td>Blanco</td>
<td>Mamifero</td>
</tr>
COLOCARSTYLOATODOSLOSPARESEIMPARESQUENOSEAN<TH>
.par{backgroundcolor:#FF9}
.impar{backgroundcolor:#09C}
</style>
<script>
$('th').parent().addClass('resaltado')
$('tr:not(th):even').addClass('impar')
$('tr:not(th):odd').addClass('par')
})
</script>
MostrarelprimerelementodelaFilaseleccionadadelatabla
$(function(){
$('tr').click(function(){
alert($(this).children('td:first').text())
})
})
Oasiparaotroelemento...
alert($(this).children('td:eq(2)').text())
ANIMACIONES
{
{
$("p").html("<i>Hola</i>")
$("p").slideUp("slow")
$("p").css("backgroundcolor","#0000CC")
})
}
)
OtrasAnimaciones...
$("p").fadeTo("slow")
$("p").slideUp("slow")
$("p").slideToggle()Mostraroocultar
Para cualquier otro tipo de animacin con propiedades CSS cuyos valores sean numricos:
("p").animate({opacity:0.50},'slow')
$("p").animate({opacity:0.50,width:100},'slow')
EVENTOS
EVENTOCLICKENUNBOTON
<script>
$(function(){
alert('Hizoclickenelboton!')
})
})
</script>
<pid="boton"align="center"><b>CLICAQUI</b></p>
EventoClickconbind
<script>
$(function(){
$('div').bind("click",function(){
$('div').text('Holas')
})
})
</script>
Varioseventosseseparanporespacio
$(function(){
$('div').bind("clickmouseout",function(){
})
})
</script>
VARIOSEVENTOSALAVESORDENADAMENTE
<body>
<script>
$(function(){
$('div').bind({
mouseover:function(){
$(this).css("background","yellow")
mouseout:function(){
$(this).css("background","white")
click:function()
{
$(this).css("background","green")
})
})
</script>
<div>Midiv0</div>
<div>Midiv1</div>
//QUITAREVENTOS
<script>
$(function(){
$('div').bind({
mouseover:function(){
mouseout:function(){
click:function(){
})
$('#desactivar').click(function(){
$('div').unbind('click')
},
},
},
$(this).css("background","yellow") },
},
},
})
})
//CREAREVENTOSPARAOBJETOSNUEVOS
(GeneradosdespuesdecargarelDOOM,sirveparaprogramarsobreetiquetasdeloslightbox)
<body>
<script>
$(function(){
$('div').live("click",function(){
})
$('#crear').click(function(){
$('<div>Carolingea</div>').appendTo('body')
})
})
</script>
<div>Midiv0</div>
<div>Midiv1</div>
<br>
<inputtype="button"value="Desactivar"id="crear"/>
AGREGARVARIOSEVENTOSUSANDOLIVEANUEVOSOBJETOS
<body>
<script>
$(function(){
$('div').live("clickmouseovermouseout",function(event){
if(event.type=="click"){
}
elseif(event.type=="mouseover"){
$(this).css("background","red")
}
elseif(event.type=="mouseout"){
}
})
$('#crear').click(function(){
$('<div>Carolingea</div>').insertAfter('div')
})
})
</script>
<div>Midiv0</div>
<inputtype="button"value="Desactivar"id="crear"/>
//ParaquitareventosagregadosconLive,usamosdie
$('#quitar').click(function(){
$('div').die('mouseover')
})
//DISPARARAUTOMATICAMENTEUNEVENTO
$(function(){
$('div').css('background','yellow')
})
$('div').trigger('click')
})
USARUNAVESUNEVENTO
$(function(){
$('div').one("click",function(){
})
})
AJAXJQUERY
CargarunaPagina
$(function(){
$('#juegos').click(function(){
$('#contenido').load("juegos.html")
})
})
</script>
<pid="juegos">Juegos</p>
<divid=contenido></div>
PaginadeJuegos
<html>
<head></head>
<body>
MisJuegosOnline
</body>
</html>
PASARPARAMETROSOVARIABLESPOST
PaginaPHP
<?php
echo"Juegospara".$_POST["nombre"]
echo"Edad".$_POST["edad"]
?>
PaginaHTML
<html>
<head><title>JQUERY1</title>
<scripttype="text/javascript"src="Jquery.js"></script>
</head><body>
<script>
$(function(){
$('#contenido').load("juegos.php",{nombre:"Carol",edad:29})
})
})
</script>
<pid="juegos">Juegos</p>
<divid="contenido">CONTENIDO</div>
</body>
</html>
PARACREARUNAFUNCIONENELPARRAFOEXTERNO
AlhacercliceneltextoholamundomostraraunalertquediraHolaaaaaa!
PaginaHTML
<script>
$(function(){
$('#contenido').load("juegos.php",function(){
$('#parrafo').click(function(){
alert('Holaaaaaaa!')
})
})
})
})
</script>
PAGINAPHP
<?php
echo'Juegosymas'
?>
<pid="parrafo">HolaMundo</p>
PARECIDOALANTERIOR.SoloqueescribiraenelparrafoCarolingeayalpulsarsobreel
mostraraunalert
$(function(){
$('#contenido').load("juegos.php",function(){
$('#parrafo').text('Carolingea').click(function(){
alert('Carol')
})
})
})
})
</script>
MenuconENLACESReturnfalse
<script>
$(function(){
$('a').click(function(){
vararchivo=$(this).attr('href')
$('#contenido').load(archivo)
returnfalse
})
})
</script>
<ahref="juegos.php">Juegos</a>
<ahref="musica.php">Musica</a>
<divid="contenido">CONTENIDO</div>
APLICACIONCOLOCARTITTLECOMOMENSAJEEMERGENTE
NOTA:Paraquelomuestretocacolocarlelaclasetituloalitemquesequieramostrarelmensaje
emergente.Asiporejemplo:<pclass=titulotitle=Esteseramimensajito>Mitexto</p>
<linkrel="stylesheet"href="css/estilo.css"/>
<scriptsrc="jquery.js"></script>
<style>
#cuadro{border:solidthinwidth:200pxheight:50pxposition:fixed
backgroundcolor:#FFFcolor:#000padding:10pxmargin:5pxopacity:0.9}
</style>
<script>
$(function(){
varubicacion
varancho
$('#cuadro').hide()
$('.titulo').hover(function(){
ubicacion=$(this).offset()
ancho=$(this).width()
$('#cuadro').html($(this).attr('title'))
$('#cuadro').css('top',ubicacion.top).css('left',ubicacion.left+ancho)
$('#cuadro').show('fast')
},function(){
$('#cuadro').hide('fast')
})
})
</script>
<br/>
<aclass="titulo"title="<b>Carolina</b>"style="marginleft:0px">Carol</a>
<bclass="titulo"title="Carol">Hola</b>
<divid="cuadro">Cuadro</div>
MENSAJEEMERGENTEELMISMOANTERIORPEROMEJORADO
<html>
<head>
<title>JQUERYAJAX</title>
<scriptsrc="Jquery.js"></script>
#contenedor{backgroundcolor:#FFCborder:solidthinwidth:200px
height:50pxposition:fixedpadding:10pxfontsize:12px
fontfamily:"Arial"
texttransform:capitalize}
</style>
</head>
<body>
<script>
$(function(i){
$('#contenedor').hide()
$('.titulo').hover(function(){
varelegido=$(this).attr('title')
varpos=$(this).offset()
vary=pos.top
varx=pos.left
$('#contenedor').empty().append(elegido)
$('#contenedor').show()
$('#contenedor').css('top',y)
$('#contenedor').css('left',x+100)
},function(){
$('#contenedor').hide().fadeIn()
})
$('body').click(function(){//estoesparaocultarelcontenedoralcliquearenelbody
$('#contenedor').hide()
})
})
</script>
<div>
<liclass="titulo"title="<b>Elreydelbarrio</b>">Reinerys</li>
<liclass="titulo"title="laRaizaTao">Raiza</li>
<liclass="titulo"title="laRanaRene">Rene</li>
<aclass="titulo"title="carolingea">Carolina</a>
</div>
<divid="contenedor">Carol</div>
</body>
</html>
VALIDACIONES
SoloNumerosenunformulario
(Keyupeseleventoalescribiralgoenunform)
<script>
$(function(){
$('input').keyup(function(){
$(this).val($(this).val().replace(/[^09\.]/g,""))
})
})
</script>
SololetrasenunFormulario
<script>
$(function(){
$('input').keyup(function(){
$(this).val($(this).val().replace(/[âAzZ\.]/g,""))
})
})
</script>
PARALIMITARELNUMERODECARACTERESENUNIMPUT
Solosecolocaelparametromaxlengthenelinput
<formname="datos">
<inputtype="text"name="nombre"maxlength="5"/>
<inputtype="text"name="edad"maxlength="3"/>
<inputtype="button"name="Aceptar"value="Aceptar"/>
</form>
USODEUIYWIDGEDSJQUERY
ACCORDION:
1.Seagregalalibreriajquery.js
2.SeagregaelCSS
<html>
<head>
<title>JQUERYUI</title>
<linkhref="jquery/css/uidarkness/jqueryui1.8.8.custom.css"type="text/css"rel="stylesheet"/>
</head>
<scriptsrc="jquery/js/jquery1.4.4.min.js"></script>
<scriptsrc="jquery/js/jqueryui1.8.8.custom.min.js"></script>
</head>
<body>
<script>
$(function(){
$('#accordion').accordion({header:'h3'})
})
</script>
<divid="accordion">
<h3><ahref="#">MenuPrincipal</a></h3>
<div>Bienvenidosamiseccion</div>
<h3><ahref="#">Nombres</a></h3>
<div><ahref="#">Carolina</a><br><ahref="#">Jessica</a></div>
<h3><ahref="#">Colores</a></h3>
<div>Amarillo<br/>Azul<br/>Rojo</div>
</div>
</body>
</html>
NOTA:Paraquelospanelescrezcanautomaticamentecolocarasi:
$("#accordion").accordion({
'fillSpace':true,
'clearStyle':true
})
DRAGGABLE(Arrastrar)
Elstyloledaelcursor,elbordeylasdimensionesdelobjetodiv
<html>
<head>
</head>
#arrastrame{width:200pxborder:solidthin#333cursor:move}
</style>
</head>
<body>
<script>
$(function(){
$('#arrastrame').draggable()
})
</script>
<divid="arrastrame">Carolingea</div>
</body>
</html>
ELMISMOEJEMPLOANTERIORPEROCONUNACLASE
<html>
<head>
</head>
.arrastrame{width:200pxborder:solidthin#333cursor:move}
</style>
</head>
<body>
<script>
$(function(){
$('.arrastrame').draggable()
})
</script>
<divclass="arrastrame">Carolingea</div>
<pclass="arrastrame">PARRAFOMOVIBLE</p>
</body>
</html>
RESIZERedimensionarunobjeto
<html>
<head>
</head>
.dimensionar{width:200pxborder:solidoutset#006}
</style>
</head>
<body>
<script>
$(function(){
$('.dimensionar').resizable()
})
</script>
<divclass="dimensionar">
Carolingea<br/>
Reinerys<br/>
Jessica
</div>
</body>
</html>
REDIMENSIONARUNAIMAGEN
<html>
<head>
</head>
</head>
<body>
<script>
$(function(){
})
</script>
<imgclass="dimensionar"src="imagen.jpg"border="5"/>
</body>
</html>
OPCIONESRESIZE
<body>
<script>
$(function(){
$('.dimensionar').resizable({minHeight:100})
//MINIMOALTO
$('.dimensionar').resizable({minWidth:100})
//MINIMOANCHO
alert($('.dimensionar').width())
//CapturarANCHOWIDTH.TambienSepuedeusar$(this)
alert($('.dimensionar').height())
//CapturarALTOHEIGHT
})
</script>
<imgclass="dimensionar"src="1.jpg"border="5"/>
</body>
Otrasopciones..
maxHeightAltomaximo
maxWidthAnchomaximo
PARECIDOALANTERIORPEROCONUNBOTONYSINTAMAOMINIMO
<body>
<script>
$(function(){
alert('Ancho:'+$('.dimensionar').width())
alert('Alto:'+$('.dimensionar').height())
})
})
</script>
<pid="boton">ClickAqui</p>
</body>
PARECIDOALANTERIORPEROPARAVARIASIMAGENESCAPTURARTAMAO(RESIZABLE)
<body>
<script>
$(function(){
varancho=$(this).width()
varalto=$(this).height()
$('.dimensionar').resize(function(){
ancho=$(this).width()
alto=$(this).height()
})
alert(ancho)
alert(alto)
})
})
</script>
<pid="boton">ClickAqui</p>
SELECTABLESeleccionarobjetos(SinelCSSnofunciona)
<html>
<head>
</head>
#elegir.uiselecting{background:#FECA40}
#elegir.uiselected{background:#F39814color:white}
ul{liststyle:none}
</style>
</head>
<body>
<script>
$(function(){
$('#elegir').selectable()
})
</script>
<ulid="elegir">
<li>Carolina</li>
<li>Reinerys</li>
<li>Jessica</li>
<li>Nancy</li>
</ul>
</body>
</html>
DATEPICKERElegirunafechaconformato
<body>
<script>
$(function(){
$('#fecha').datepicker()
})
</script>
<inputtype="text"id="fecha"/>
</body>
Paracambiarleelnombrealosmeses....
$('#fecha').datepicker({monthNames:
['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembr
e']})
ParaquequedecompletamentetraducidoconlostextosdelosbotonesSiguienteyAnterior...
$('#fecha').datepicker({monthNames:
['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembr
e'],nextText:'Sig',prevText:'Ant'})
BotonoventanitaEmergenteDIALOG
<html>
<head>
<title>JQUERY</title>
<linkrel="stylesheet"href="jquery/css/uidarkness/jqueryui1.8.8.custom.css"/>
</head>
<body>
<script>
$(function(){
$('#dialogo').dialog()
})
</script>
<divid="dialogo"title="Mensajeparalahumanidad">Caroleslamejor!</div>
</body>
</html>
LOMISMOQUELOANTERIORPeroalhacerleclickmuestraeldialogo
<body>
<script>
$(function(){
$('#dialogo').hide()
$('#dialogo').dialog()
})
})
</script>
<pid="click">Click</p>
<divid="dialogo"title="Mensajeparalahumanidad">Caroleslamejor!</div>
</body>
NOTA:AloanteriorselepuedemeterHTMLhastaunIframe...
<divid="dialogo"title="Mensajeparalahumanidad">
<b>Caroleslamejor!</b><br/><iframesrc="jquery1.html"width="100"height="100"></iframe>
</div>
Asimuestralaventanamodal,esdecirconelfondoengris
<script>
$(function(){
$('#dialogo').hide()
$('#dialogo').dialog({modal:true})
})
$('#cerrar').click(function(){
$('#dialogo').dialog('close')
})
})
</script>
PROGRESSBARBarradeproceso
<html>
<head>
</head>
<body>
<script>
$(function(){
vari=0
$('#barra').progressbar({value:i})
i++
},100)
})
</script>
<divid="barra"></div>
</body>
</html>
PROGRESSBARConeventodecuandosecompletalabarra
$(function(){
vari=0
$('#barra').progressbar({value:i})
i++
},50)
$('#barra').bind("progressbarcomplete",function(){
$('p').html('<b>Hola</b>')
})
})
</script>
<p></p>
</body>
</html>
SLIDEBarradeslizante
<body>
<script>
$(function(){
$('#barra').slider()
})
</script>
<p></p>
</body>
</html>
SLIDEROBTENERUNVALORalhacerclicksobreelboton
<body>
<script>
$(function(){
$('#barra').slider()
alert($('#barra').slider('value'))
})
})
</script>
<pid="boton">Obtener</p>
</body>
TABPestaas(SinotienelamismaestructuraHTMLnocorrebien
<html>
<head>
</head>
<body>
<script>
$(function(){
$('#tabs').tabs()
})
</script>
<divid="tabs">
<ul>
<li><ahref="#t1">Nombres</a></li>
<li><ahref="#t2">Musica</a></li>
<li><ahref="#t3">Color</a></li>
</ul>
<divid="t1">Carolina</div>
<divid="t2">PowerMetal</div>
<divid="t3">Azul</div>
</div>
</body>
</html>
COLORPICKERCambiarelfondoalapagina.ParausarColorpickertocabajarseyagregarunalibreriay
unCSSespecial
<html>
<head>
<linkrel="stylesheet"href="colorpicker/css/colorpicker.css"type="text/css"/>
<scriptsrc="colorpicker/js/colorpicker.js"></script>
</head>
<body>
<script>
$(function(){
$('#tabs').ColorPicker({
flat:'true',
onChange:function(hsb,hex,rgb){$('body').css('backgroundColor','#'+hex)}
})
})
</script>
<divid="tabs">Color
</div>
</body>
</html>
MIPRIMERMENUENJQUERY^_^
<html>
<head>
<title>CAROLMENU</title>
#menu{width:autotextdecoration:noneborder:none}
.sub{padding:10pxdisplay:inlinebackgroundcolor:#E9E9E9
cursor:pointermarginleft:2pxtextalign:center}
.clicsub{padding:10pxdisplay:inlinebackgroundcolor:black
cursor:pointermarginleft:2pxtextalign:center}
.suba{textdecoration:nonecolor:#0059B3font:boldfontsize:12pxfontfamily:arial}
.clicsuba{textdecoration:nonecolor:whitefont:boldfontsize:12pxfontfamily:arial}
</style>
</head>
<body>
<script>
$(function(){
$('.sub').hover(function(){
$(this).toggleClass('clicsub')
})
$('div.sub').click(function(){
varpagina=$(this).children().attr('href')
alert('Tevasalapagina:'+pagina)
})
})
</script>
<p>MENUCAROL^_^</p>
<divid="menu">
<divclass="sub"><ahref="uno.html">Primero</a></div>
<divclass="sub"><ahref="dos.html">Segundo</a></div>
<divclass="sub"><ahref="tres.html">Tercero</a></div>
</div>
</body>
</html>
MENUENJQUERYCAROL^_Êsteesautomatico
Alasimagenesdecuandopasaelratonporencimadebenllamarseigualalaoriginalagregandolelaletracal
comienzo,asi:
imagen.jpg alpasarelmouseencimaseralaimagen cimagen.jpg
<html>
<head>
<title>CAROL</title>
#menu{textdecoration:none}
.sub{textdecoration:none}
.subimg{border:0px}
.suba{outline:nonetextdecoration:none}
</style>
</head>
<body>
<script>
$(function(){
varanterior
varnueva
$('.sub').hover(function(){
anterior=$(this).children().attr('src')
nueva="c"+anterior
$(this).children().attr('src',nueva)
},function(){
$(this).children().attr('src',anterior)
})
$('div.sub').click(function(){
varpagina=$(this).children().attr('href')
alert('Tevasalapagina:'+pagina)
})
})
</script>
<divid="menu">
<ahref="uno.html"class="sub"><imgsrc="1.png"/><ahref="dos.html"class="sub"><imgsrc="2.png"
/></a><ahref="tres.html"class="sub"><imgsrc="3.png"/></a>
</div>
</body>
</html>
Nota:Lasetiquetas<a>y<img>debendeirdeseguido,sindarENTERosaltodepaginaporquesinolepondraun
espacio.
MENUWILLIAM,MEDIAIMAGENOCULTA,HOVERYENCENDIDO
<style>
#menudiv{float:left}
#home{position:relativeoverflow:hiddenheight:28px}
#homea:hover{top:28pxposition:relative}
#musica{position:relativeoverflow:hiddenheight:28px}
#musicaa:hover{top:28position:relative}
</style>
<script>
$(function(){
$('#musicaa').css('top','28')
$('#musicaa').css('position','relative')
})
</script>
<divid="menu">
<divid="home"><ahref="#"><imgsrc="images/home.jpg"border="0"></a></div>
<divid="musica"><ahref="#"><imgsrc="images/musica.jpg"border="0"></a></div>
</div>
MENUWILLIAMOPTIMIZADO(elmismoanterior)Rapidoalhacerhover
Laimagendebeserpreparadaasiporejemplo:
<style>
#menu{height:42pxwidth:600px}
#menudiv{float:leftheight:42pxposition:relativeoverflow:hiddenmargin:010px}
#menudiva:hover{top:42pxposition:relative}
</style>
<script>
$(function(){
$('#canalesa').css('top','42px')
$('#canalesa').css('position','relative')
})
</script>
<divid="menu">
<divid="canales"><ahref=""><imgsrc="canalesexclusivos.jpg"></a></div>
<divid="cine"><ahref=""><imgsrc="cine.jpg"></a></div>
</div>
OTROEJEMPLOMENUHOVERSENSILLOCAROL
<style>
.vermas{height:23pxposition:relativeoverflow:hidden}
.vermasa:hover{top:23pxposition:relative}
</style>
<divclass="vermas">
<ahref="/logistica.aspx">
<imgsrc="/verprograma.jpg"alt="VerPrograma"width="117"height="46"border="0"/>
</a>
</div>
HOVEROPTIMIZADOPARASENCILLOSENLACES
TodolinkdentrodeunDIVconestaclaseharahover,noolvidarprepararlaimagendobleasi:
<style>
img{border:0}
.cambio{height:18pxposition:relativeoverflow:hiddenmargin:010px}
.cambioa:hover{top:18pxposition:relative}
</style>
<script>
$(function(){
$('.cambioa').css('top','18px')
$('.cambioa').css('position','relative')
})
</script>
<divclass="cambio"><ahref=#><imgsrc="images.jpg"></a></div>
IFRAMEQUESEAJUSTAALTAMAOINDICADO
<script>
$(function(){
varnombre
$('#iframe').load(function(){
nombre=$('#iframe').attr('src')
if(nombre=='pagina1.html){
$('#iframe').height(560)
}
elseif(nombre=='pagina2.html){
}
elseif(nombre=='pagina3.html){
}
})
</script>
IRALINICIODELAPAGINACONEFECTO
$(function(){
$('#uno').click(function(){
$('html,body').animate({scrollTop:'0px'},1500)returnfalse})
EFECTOPARAHACERUNSCROLL
$('#arriba').click(function(){
$('#rotar').animate({'top':'=60px'})
})
$('#abajo').click(function(){
$('#rotar').animate({'top':'+=60px'})
})
<divclass="control"id="arriba">></div>
<divclass="control"id="abajo"><</div>
<divid="lista">
<divid="rotar">
<imgsrc="images/videos/bannerhome4.jpg"alt="4nUkE1moTg"/>
<imgsrc="images/videos/bannerhome4.jpg"alt="9aCODiEh9d8"/>
<imgsrc="images/videos/bannerhome4.jpg"alt="4nUkE1moTg"/>
</div>
</div>
LOMISMOANTERIORPEROCONSCROLLALAIZQUIERDAYALADERECHA
<style>
div{margin:10pxpadding:10pxborder:2pxsolid#666height:50pxwidth:100pxoverflow:hidden}
</style>
<scriptsrc="http://code.jquery.com/jquerylatest.js"></script>
<div>
<div>Carolina</div>
</div>
<pid="derecha">Arriba</p>
<pid="izquierda">Abajo</p>
<script>
$(function(){
$("#arriba").click(function(){
$('derecha').animate({scrollLeft:'=10px'},'fast')
})
$("#izquierda").click(function(){
$('div').animate({scrollLeft:'+=10px'},'fast')
})
})
</script>
EFECTOQUEINCREMENTAELALTOALCOLOCARELMOUSE
<script>
$(function(){
$('.carol').hover(function(){
$(this).animate({height:'+=50px'},'slow')
})
})
</script>
ESQUINASCONJQUERY
DescargarelPluginyverejemplosde:http://jquery.malsup.com/corner/
<html>
<head>
<title>EsquinasRedondeadas</title>
<scriptsrc="jquery.corner.js"type="text/javascript"></script>
<scriptsrc=""></script>
</head>
<body>
<script>
$(function(){
$('.redonda').corner("5px")
$('.bottom').corner("bottom5px")
$('.top').corner("top5px")
})
</script>
<br/><br/>
<divstyle="width:500pxborderleft:solidthin#999borderright:solidthin#999backgroundcolor:#CCC"
class="redonda"><pclass="top"style="backgroundcolor:#69F">Redonditas</p><br><div
style="padding:10px">Contenido</div>
<pstyle="backgroundcolor:#FC6class="bottom">Parrafo</p>
</div>
</body>
</html>
IMAGENESREDONDEADAS
Deacasedescargahttp://www.netzgesta.de/corner/
<html>
<head>
<title>EsquinasRedondeadas</title>
<scriptsrc="corner/corner.js"type="text/javascript"></script>
</head>
<body>
<imgclass="cornerishadow50iradius24"src="fondo2.jpg"width="200"height="200">
</body>
</html>
Losvaloresishadowiradiuspuedenirde0a100
ALHACERCLICSOBREELELEMENTOMUESTRALAINFORMACIONTAB
<script>
$(function(){
$('.hijo').hide()
$('.padre').click(function(){
$('#con').text($(this).children().text())
})
})
</script>
<spanclass="padre">Click<spanclass="hijo">Loqueapareceraaqui</span></span>
<spanclass="padre">Click2<spanclass="hijo">Carolingealamejor!</span></span>
<spanclass="padre">Click3<spanclass="hijo">Osea!todobien</span></span>
<divid="con">Contenedor</div>
TABCONCOLORES
<style>
.padre{backgroundcolor:#FF9933color:#999999fontfamily:"LucidaSansUnicode","LucidaConsole"
fontsize:11pxfontweight:bold}
.hover{color:#990000}
</style>
<title>Clientes</title>
</head>
<body>
<script>
$(function(){
$('.hijo').hide()
varcolor
$('.padre').click(function(){
$('#con').text($(this).children().text())
$('.padre').not(this).css('background','#FF9933')
$(this).css('background','black')
})
$('.padre').hover(function(){
$(this).addClass('hover')
},function(){
$(this).removeClass('hover')
})
})
</script>
<spanclass="padre">Click<spanclass="hijo">Loqueapareceraaqui</span></span>
<spanclass="padre">Click2<spanclass="hijo">Carolingealamejor!</span></span>
<spanclass="padre">Click3<spanclass="hijo">Osea!todobien</span></span>
<spanclass="padre">Click4<spanclass="hijo">Osea!bien</span></span>
<spanclass="padre">Click5<spanclass="hijo">Osea!todo</span></span>
AGREGARUNACLASEALENLACEDELAPAGINAACTUALPARAMENUS
(Resaltaenlaceendondeseencuentra)
<html>
<head>
<scripttype="text/javascript"src="jquery.js">
</script>
.resaltado{backgroundcolor:#FFFF00}
.resaltado:hover{backgroundcolor:#FFFF00}
.menu:hover{backgroundcolor:#CCCCCC}
</style>
</head>
<body>
<script>
$(function(){
varlugar=location.href
$(".menu").each(function(){
if(this.href==lugar){
$(this).addClass("resaltado")
$(this).removeClass("menu")
}
})
})
</script>
<aclass="menu"href="/jquery.html">Uno</a><br/>
<aclass="menu"href="/jquery2.html">Dos</a><br/>
<aclass="menu"href="/flash.html">Tres</a><br/>
</body>
</html>
EXTRAERNOMBREDELAPAGINA
varurl=self.location.href.match(/\/([^/]+)$/)[1]
alert(url)
MENUCSSCAROLIGUALALANTERIORPEROMEJORADOYADAPTADO
<style>
#elegido{backgroundimage:nonebackgroundcolor:#0099FF}
#elegido:hover{backgroundcolor:#FFFF00}
.carola{textalign:centerwidth:100%height:100%display:inlineblock
backgroundimage:url(images/menu_bg.jpg)lineheight:150%}
.carola:hover{textalign:centerwidth:100%height:100%backgroundimage:nonebackgroundcolor:#0CF
display:inlineblock}
.carolb{position:relativetop:25%}
</style>
<script>
$(function(){
varlugar=location.href
$(".carola").each(function(){
if(this.href==lugar){
$(this).attr('id','elegido')
}
})
})
</script>
<tablewidth="323"border="0"cellspacing="0"cellpadding="0"class="carol">
<tr>
<tdwidth="102"height="33"><ahref="jquery.html"><b>Carol</b></a></td>
<tdwidth="111"height="33"><ahref="#">Rey</a></td>
<tdwidth="110"height="33"><ahref="#">Raiza</a></td>
</tr>
</table>
MIACORDION(Muestracontenidoparaleermas)
<style>
div.bloque{border:solidthin#F93width:500pxbackgroundcolor:#FFFoverflow:hidden
}
.titulo{backgroundimage:url(fondito.jpg)backgroundrepeat:repeatxcursor:pointercolor:#FFFtextalign:justify
padding:5pxfontfamily:"LucidaSansUnicode","LucidaGrande",sansseriffontsize:12pxfontweight:bold}
.contenido{color:#666fontfamily:"LucidaSansUnicode","LucidaGrande",sansseriffontsize:11px
textalign:justifymargin:5px}
</style>
<title>Prueba3</title>
</head>
<body>
<script>
<script>
$(function(){
varminimo=80
varmaximo=300
$('#elegido').height('100%')
$('#elegido').siblings().height(minimo)
$('.bloque').click(function(){
$(this).siblings().animate({height:minimo})
if($(this).height()==minimo){
$(this).animate({height:maximo},1000)
}
else{
$(this).animate({height:minimo})
//$(this).siblings().animate({height:minimo})
}
})
})
</script>
<divclass="bloque">
<divclass="titulo">Titulo1</div>
<divclass="contenido">
esteeselcontenidodeelasdasldasd
asdfasfjasdfasdjfsdf<br/>
asdhaksdasdhk
</div>
<divclass="bloque">
<divclass="titulo">Titulo2</div>
<divclass="contenido">
<divclass="contenido">Titulo2</div>
Contenidodeelsegundo...<br/>
Holaaaaaaa
</div>
</body>
MENUCONIMAGENES(implantadoencalicompromisocivico)SIN
HOVER
<script>
$(function(){
varruta
ruta=location.href
$('.menua').each(function(){
if(this.href==ruta)
{
if($(this).attr('id')==1)
{
$(this).children().attr('src','/images/menu/homesel.jpg')
}
}
})
})
</script>
<tableclass="menu"height="32"width="100%"border="0"cellspacing="0"cellpadding="0">
<tr>
<td><ahref="/inicio.aspx"id="1"><imgsrc="images/menu/home.jpg"/></a></td>
<td><ahref="quienes.aspx"id="2"><imgsrc="images/menu/quienes.jpg"/></a></td>
<td><ahref="contactenos.aspx"id="3"><imgsrc="images/menu/contactenos.jpg"/></a></td>
</tr>
</table>
MENUIMAGENESCONHOVER
$(function(){
varruta
ruta=location.href
$('.menua').each(function(){
if(this.href==ruta)
{
if($(this).attr('id')==1){
$(this).children().attr('src','images/menu/homesel.jpg')
}
elseif($(this).attr('id')==2){
$(this).children().attr('src','images/menu/quienessel.jpg')
}
$(this).children().attr('src','images/menu/contactenossel.jpg')
}
}
})
$('.menua').hover(function(){
if(this.href!=ruta)
{
$(this).children().attr('src','images/menu/homesel.jpg')
}
$(this).children().attr('src','images/menu/quienessel.jpg')
}
$(this).children().attr('src','images/menu/contactenossel.jpg')
}
}
},function(){
if(this.href!=ruta)
{
$(this).children().attr('src','images/menu/home.jpg')
}
$(this).children().attr('src','images/menu/quienes.jpg')
}
$(this).children().attr('src','images/menu/contactenos.jpg')
}
}
})
})
SENCILLAGALERIADEIMAGENES
Ubicacioneslacarpetadondeestanlasimagenes,prefijoeselnombredelaimagen.
Larutaseraasi:ubicacion+prefijo+id+.jpg
porejemplo:ubicacion=images/
prefijo=gatos
id=02
ruta:images/gatos02.jpg
<script>
$(function(){
$('.galeriaspan').click(function(){
varruta,prefijo
prefijo=""
ubicacion="images/"
ruta=ubicacion+prefijo+$(this).attr('id')+'.jpg'
$('#imagen').attr('src',ruta).hide().fadeIn(1000).show()
})
})
</script>
<divclass="galeria">
<spanid="1">1</span>
</div>
<br>
<imgid="imagen"src="images/1.jpg"width="223"height="226">
SLIDESHOWAUTOMATICO
<html>
<head>
<title>Posiciones</title>
</head>
<body>
<script>
$(function(){
vari,n,prefijo
i=1
n=8
tiempo=4000
prefijo="carol"
//numerodeimagenes
//Intervalodetiempo
//prefijodelnombredelasimagenes
if(i<n){
$('#imagen').attr('src','images/'+prefijo+i+'.jpg').hide().fadeIn('slow')
i=i+1
}
else
{
i=1
}
},tiempo)
})
</script>
<imgid="imagen"src="images/4.jpg">
</body>
</html>
OTROSENSILLOSLIDESHOWDEIMAGENES
<html>
<head>
<title>Posiciones</title>
</head>
<body>
<script>
$(function(){
vari,n
i=0
tiempo=3000
varimagen
n=$('.slideimg').size()
imagen=$('.slideimg').eq(i).attr('src')
enlace=$('.slidea').eq(i).attr('href')
$('#imag').hide().fadeIn('3000').html('<ahref="'+enlace+'"><imgsrc="'+imagen+'"/></a>')
if(i<n1){
i=i+1
}
else{i=0}
},tiempo)
})
</script>
<p>Clic</p>
<divclass="slide">
<ahref="http://www.google.com"><imgsrc="images/1.jpg"></a>
<ahref="http://www.yahoo.com"><imgsrc="images/2.jpg"></a>
<ahref="http://www.gmail.com"><imgsrc="images/3.jpg"></a>
</div>
<divid="imag"></div>
</body>
</html>
MENUAVANXODOTNETNUKE
<!EncadapaginacolocarelsiguientescriptenEDITPageHeaderTagsparailuminarcadaboton,donde
#inicioseriaeliddelbotoninicio
<script>
$(function(){
$('#inicio').css('backgroundimage','url(http://www.avanxo.com/images/menu_inicio_hover.png)')
})
</script>
>
<style>
body{margin:0}
/*FONDODELATABLAYDIVSPARAQUENOSEBAJEN*/
.menu{backgroundimage:url(http://www.avanxo.com/images/top_bg.jpg)}
.menudiv{float:leftdisplay:block}
#inicio{backgroundimage:url(http://www.avanxo.com/images/menu_inicio.png)width:79pxheight:34px
backgroundrepeat:norepeat}
a:hover#inicio{backgroundimage:
url(http://www.avanxo.com/images/menu_inicio_hover.png)backgroundrepeat:norepeat}
#cloud{backgroundimage:url(http://www.avanxo.com/images/menu_cloud.png)width:156px
height:34pxbackgroundrepeat:norepeat}
a:hover#cloud{backgroundimage:url(http://www.avanxo.com/images/menu_cloud_hover.png)width:156px
#compa{backgroundimage:url(http://www.avanxo.com/images/menu_compania.png)width:109px
a:hover#compa{backgroundimage:
url(http://www.avanxo.com/images/menu_compania_hover.png)width:109px
#servicios{backgroundimage:url(http://www.avanxo.com/images/menu_servicios.png)width:102px
a:hover#servicios{backgroundimage:
url(http://www.avanxo.com/images/menu_servicios_hover.png)width:102px
#soluciones{backgroundimage:url(http://www.avanxo.com/images/menu_servicios.png)width:115px
a:hover#soluciones{backgroundimage:
url(http://www.avanxo.com/images/menu_servicios_hover.png)width:115px
#eventos{backgroundimage:url(http://www.avanxo.com/images/menu_eventos.png)width:93px
a:hover#eventos{backgroundimage:
url(http://www.avanxo.com/images/menu_eventos_hover.png)width:93px
#clientes{backgroundimage:url(http://www.avanxo.com/images/menu_clientes.png)width:97px
a:hover#clientes{backgroundimage:
url(http://www.avanxo.com/images/menu_clientes_hover.png)width:97px
#noticias{backgroundimage:url(http://www.avanxo.com/images/menu_noticias.png)width:70px
a:hover#noticias{backgroundimage:
url(http://www.avanxo.com/images/menu_noticias_hover.png)width:70px
#contactenos{backgroundimage:url(http://www.avanxo.com/images/menu_contactenos.png)width:123px
a:hover#contactenos{backgroundimage:
url(http://www.avanxo.com/images/menu_contactenos_hover.png)width:123px
</style>
<tableclass="menu"width="100%"border="0"cellspacing="0"cellpadding="0">
<tr>
<tdheight="34"align="center"><tableborder="0"width="980"cellspacing="0"cellpadding="0">
<tr>
<tdheight="34">
<divstyle="overflow:hidden">
<ahref="/inicio.aspx"><divid="inicio"></div></a>
<ahref="/Cloud_Computing.aspx"><divid="cloud"></div></a>
<ahref="/compania.aspx"><divid="compa"></div></a>
<ahref="/servicios.aspx"><divid="servicios"></div></a>
<ahref="/soluciones.aspx"><divid="soluciones"></div></a>
<ahref="/eventos.aspx"><divid="eventos"></div></a>
<ahref="/clientes.aspx"><divid="clientes"></div></a>
<ahref="/noticias.aspx"><divid="noticias"></div></a>
<ahref="/contactenos.aspx"><divid="contactenos"></div></a>
</div>
</td>
</tr>
</table></td>
</tr>
</tr>
</table>
REPRODUCIRUNFLASHALHACERCLIC
//insertamosnormalmenteelFlash
<objectid="flash"classid="clsid:166B1BCA3F9C11CF8075444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=8,5,0,0"
width="800"height="600">
<paramname="src"value="googlechina.swf"/>
<embedsrc="googlechina.swf"pluginspage="http://www.macromedia.com/shockwave/download/"
width="800"height="600"></embed>
</object>
</body>
<ahref="#"onclick="document.getElementById('flash').Play()">Sonido</a>
</html>
SONIDOCHATAVANXO
<script>
$(function(){
varactual
actual=$('.Messagediv').size()
hijos=$('.Messagediv').size()
varhijos
hijos=$('.Messagediv').size()
if(hijos!=actual){
actual=hijos
$('#audio').html('<embedsrc="/swf/user.swf"autostart="true"width="1px"
height="1px"></embed>')
}
},1000)
})
</script>
<script>
$(function(){
varactual2
actual2=$('.Usersdiv').size()
hijos2=$('.Usersdiv').size()
varhijos2
hijos2=$('.Usersdiv').size()
if(hijos2!=actual)2{
actual=hijos
$('#audio2').html('<embedsrc="/swf/beep.swf"autostart="true"width="1px"
height="1px"></embed>')
}
},1000)
})
</script>
SCROLLSIMULADO
<style>
.carol{width:120pxliststyle:noneborder:inset2px#000overflow:hiddenheight:50pxfloat:left}
#arriba,#abajo{border:solid1pxwidth:50px}
</style>
<script>
$(function(){
$('#arriba').click(function(e){
$('.carol').animate({scrollTop:'=30px'},'1000')
})
$('#abajo').click(function(){
$('.carol').animate({scrollTop:'+=30px'},'1000')
})
})
</script>
<divclass="carol">
Uno<br/>
Dos<br/>
Tres<br/>
Tres<br/>
Tres<br/>
Tres<br/>
Cuatro<br/>
Tres<br/>
Tres<br/>
Tres<br/>
Tres<br/>
Cuatro<br/>
</div>
<divstyle="float:left">
<divid="arriba">Up</div><br/>
<divid="abajo">Down</div>
</div>
HOVERDEIMAGEN,ALPASARELMOUSEMUESTRALAMISMAIMAGENGRANDE
<style>
#grande{position:absolute}
</style>
<script>
$(function(){
varruta,x,y
$('.ampliar').hover(function(){
ruta=$(this).attr('src')
$('#grande').fadeIn(500)
$('img').mousemove(function(e){
$(this).attr('src',ruta)
x=e.pageX+10
y=e.pageY+20
$('#grande').css({'top':y,'left':x})
$('#grande').attr('src',ruta)
})
},function(){
$('#grande').hide()
})
})
</script>
<imgclass="ampliar"src="images/1.jpg"width="100"height="100"border="5"/>
<imgid="grande"src=""style="display:none"/>
PUBLICIDADQUEROTACADATANTOSSEGUNDOS
<style>
#pautas{overflow:hiddenwidth:300pxheight:300px}
</style>
<script>
$(function(){
$('#pauta1').hide()
$('#pauta2').show()
$('body').trigger('click')
},5000)
$('body').toggle(function(){
$('#pauta1').fadeIn('slow')
$('#pauta2').fadeOut()
},function(){
$('#pauta2').fadeIn('slow')
$('#pauta1').fadeOut()
})
})
</script>
<pid="clic">Clic</p>
<divid="pautas">
<divid="pauta1">
<script>
varrnd=(newString(Math.random())).substring(2,8)+(((newDate()).getTime())&
262143)
varcs=document.charset||document.characterSet
document.write('<scri'+'ptlanguage="JavaScript1.1"type="text/javascript"
src="http://ads.us.eplanning.net/eb/3/adba/8e0f3c68c3087592?o=j&rnd='+rnd+'&crs='+cs+'"></scr'+
'ipt>')
</script>
</div>
<divid="pauta2">
<script>
varrnd=(newString(Math.random())).substring(2,8)+(((newDate()).getTime())&
262143)
varcs=document.charset||document.characterSet
document.write('<scri'+'ptlanguage="JavaScript1.1"type="text/javascript"
src="http://ads.us.eplanning.net/eb/3/adba/9e2577a2bc58832f?o=j&rnd='+rnd+'&crs='+cs+'"></scr'+
'ipt>')
</script>
</div>
</div>
ACORDIONCAROL^_ÂCCORDION
<script>
$(function(){
$('.acordion').next().hide()
$('#seleccionado').next().show()
$('.acordion').click(function(){
$(this).next().slideToggle()
//Estoesparaocultarlostodos
//Eldivquetengaesteidsemostraraautomaticamente
})
})
</script>
<div>
<h3class="acordion"id="seleccionado">Mision</h3>
<div>
Nuestramisionesbrindar...
</div>
<h3class="acordion">Vision</h3>
<div>
Nuestravisionesbrindar...
</div>
</div>
ABRIRUNFORMULARIOENUNIFRAMEENLAMISMAPAGINASINMOSTRARELIFRAME
(UsadoenBienco)
$('iframe').hide()
$('form').submit(function(){
$('#central').hide()
$('iframe').show()
})
<formaction=pagina.phptarget=resultados>
<input>...
</form>
<iframewidth=100height=200></iframe>
<divid=central></div>
ROTADORDEIMAGENESHOME(UsadoenBienco)
Lasimagenesdebenllamarse:0.jpg,1.jpg,2.jpgyasisucesivamente.CambiarurldelArrayparacada
imagen.ESTRUCTURA:<ahref=""><imgclass="rotar"src=""/></a>
varcarpeta,i,n
vararray=['index.html','avaluos.html','inventarios.html']//cambiarURLs
carpeta="images/home/"
n=5//Numerodeimaganes
i=0
if(i<=n){
url=carpeta+i+'.jpg'
$('.rotar').attr('src',url)
$('.rotar').hide()
$('.rotar').fadeIn('slow')
$('.rotar').parent().attr('href',array[i])
i++
}
else{
i=0
}
},8000)
<ahref="pagina.html"><imgclass="rotar"src="imagen.jpg"/></a>
ROTADORDEIMAGENESCONEFECTOSLIDEALADERECHA(usadoenbienco)
Lasimagenesdebenllamarse0.jpg,1.jpg,2.jpgyasisucesivamente
<script>
$(function(){
varcarpeta,i,n
vararray=['index.html','avaluos.html','inventarios.html']
carpeta="images/home/"
n=5
//Numerodeimagenes
i=1
if(i<=n){
url=carpeta+i+'.jpg'
$('.rotar').attr('src',url)
$('.rotar').css('left','903px')//PosicionInicial
$('.rotar').css('opacity','0.1')//PosicionInicial
$('.rotar').css('position','relative')//PosicionInicial
$('.rotar').animate({left:'0',opacity:'1'},'1000')
$('.rotar').parent().attr('href',array[i])
i++
}
else{
i=0
}
},8000)
})
})
</script>
<ahref=""><imgclass="rotar"src=""/></a>
OPCIONAL:
Paradarunefectocomosinosalieradelapaginasinodeadentromismo,loencerramosenunDIVcon
overflow:hiddenasi:
<divstyle="background:#343434overflow:hidden">
<ahref=""><imgclass="rotar"src="images/home/0.jpg"/></a>
</div>
CREARUNPLUGINJQUERY
Enunarchivo.js:
$(function(){
$.fn.plugin=function(){
alert($(this).text())
}
})
Enunhtmlnormal:
<scriptsrc="js/plugin.js"></script>
<script>
$(function(){
$('#clic').plugin()
})
</script>
<divid="clic">Clic</div>
PLUGINTOOLTIP(MensajeEmergente)MEJORADOporCarol
Enunarchivotooltip.js
(Laetiquetatitulo,esllamismatitle,secolocoasiparaevitarqueaparecieraelmensajeemergente).
ProbadoenChrome,Opera,InternetExplorer8,Firefox,Safari
$(function(){
$.fn.tooltip=function(){
$('body').append('<spanid="flotante"style="position:absolutedisplay:none"/></span>')
varmensaje,x,y
this.hover(function(){
mensaje=$(this).attr('titulo')//Puedecolocarsetitle
$('#flotante').fadeIn(100)
$('#flotante').html(mensaje)
$(this).mousemove(function(e){
x=e.pageX+10
y=e.pageY+10
$('#flotante').css({'top':y,'left':x})
})
},function(){
$('#flotante').hide()
})
}
})
EnunarchivoHTML
<scriptsrc="js/jquery.js"></script>
<scriptsrc="js/tooltip2.js"></script>
<linkrel="stylesheet"type="text/css"href="js/tooltip.css"/>
<script>
$(function(){
$('span').tooltip()
})
</script>
<divclass="carol">
<spantitulo="Carolingea">Carolina</span>
<spantitulo="Reiner">Reinerys</span>
</div>
Enunarchivotooltip.css
#flotante{
background:#333
color:#FFF
fontweight:bold
fontfamily:Arial,Helvetica,sansserif
fontsize:11px
width:200px
height:50px
padding:5px
border:outset3px#FFF
}
PLUGINPARAVERLASIMAGENESREDUCIDASATAMAOORIGINAL
Enunarchivoverimagen.js
//PLUGINIMAGENCAROL^_êselmismoanteriorperoenPlugin
$(function(){
$.fn.verimagen=function(){
varruta,x,y
$('body').append('<imgid="molde"style="position:absolutedisplay:none"/>')
this.hover(function(){
ruta=$(this).attr('src')
$('#molde').fadeIn(300)
$('#molde').attr('src',ruta)
$(this).mousemove(function(e){
x=e.pageX+10
y=e.pageY+10
$('#molde').css({'top':y,'left':x})
})
},function(){
$('#molde').fadeOut(10)
})
}
})
EnelHtmllollamamosasi:
<scriptsrc="js/verimagen.js"></script>
<linkrel="stylesheet"type="text/css"href="js/verimagen.css"/>
<script>
$(function(){
$('.carol').verimagen()
})
</script>
<imgclass="carol"src="images/1.jpg"width="50"height="50"/>
<imgclass="carol"src="images/2.jpg"width="50"height="50"/>
OPCIONAL:
Unarchivollamadoverimagen.css
#molde{border:solid4px#333}
ACORDIONPLUGINMEJORADOCAROL
EnunArchivollamadoacordion.js
$(function(){
$(this).children().next().hide('slow')
$.fn.acordion=function(){
this.not('#elegido').not('.elegido').children().next().hide('slow')
this.click(function(){
$(this).children().next().slideToggle()
})
}
})
EnunHTML:
<scriptsrc="js/acordion.js"></script>
<script>
$(function(){
$('.acordion').acordion()
})
</script>
<divclass="acordion">
<h3>Pasatiempos</h3>
<div>Violin<br/>Programacion<br/>MapleStory</div>
</div>
<divclass="acordionelegido">
<div>Estudiar<br/>Chatear<br/>Twittiar</div>
</div>
<divclass="acordion"id="elegido">
<div>Estudiar<br/>Chatear<br/>Twittiar</div>
</div>
ROTADORDEVIDEOCAROLCONSCROLL(UsadoenEIN)
Basicamenteelrotadorleeelaltdelaimagenlacualvaatenerelcodigodelvideodeyoutube
Porejemplo:
http://www.youtube.com/watch?v=9aCODiEh9d8
Lepuseentabla,peropuedemanejarsesintablaapurodivyconfigurarse
<style>
#lista{background:#FFFheight:200pxoverflow:hiddenposition:relative}
#listaimg{display:blockwidth:106pxheight:60pxmargin:5px}
.control{width:35pxmarginleft:340pxmargintop:15pxheight:12px}
#videoarriba{background:url(/images/videos/flechitaarriba.jpg)norepeat}
#videoabajo{background:url(/images/videos/flechitaabajo.jpg)norepeat}
</style>
<script>
$(function(){
$('#listaimg').click(function(){
ruta=$(this).attr('alt')
$('#youtube').attr('src','http://www.youtube.com/embed/'+ruta)
})
$('#videoabajo').click(function(){
$('#lista').animate({scrollTop:'=30px'},'1000')
})
$('#videoarriba').click(function(){
$('#lista').animate({scrollTop:'+=30px'},'1000')
})
</script>
<divclass="control"id="videoarriba"></div>
<iframeid="youtube"class="youtubeplayer"type="text/html"width="294"height="190"
src="http://www.youtube.com/embed/"frameborder="0"></iframe>
<divid="lista">
<imgsrc="/images/videos/bannerhome4.jpg"alt="4nUkE1moTg"/>
<imgsrc="/images/videos/bannerhome2.jpg"alt="9aCODiEh9d8"/>
</div>
<divclass="control"id="videoabajo"></div>
MENUAUTOMATICO
$(function(){
//RUTAGENERAL
varruta=window.location.pathname
ruta=ruta.split(".")
ruta=ruta[0]
ruta=ruta.split("/")//Separarenniveles
varn=ruta.length//Numerodeelementoscortados
for(h=1h<nh++)
{
for(i=hi<ni++)
{
$('#menu1a').each(function(){
id=$(this).attr('id')
if(ruta[i]==id)
{
$(this).css('top','50px').css('position','relative')
}
})
$('#menuproga').each(function(){
id=$(this).attr('id')
if(ruta[i]==id)
{
$(this).css('top','32px').css('position','relative')
}
})
}
}
})
ACORDIONUSADOENFUM
$(function(){
$('.encabezado').parent().next().hide()
$('.encabezado').parent().eq(0).next().show()
$('.encabezado').eq(0).attr('style','background:url(/images/interna/acordiongrisheader.jpg)norepeat')
$('.encabezado').eq(0).find('.Head').css('color','#695E3E')
$('.encabezado').click(function(){
if($(this).parent().next().is(':visible')){
$(this).attr('style','background:url(/images/interna/acordiongrisheader.jpg)norepeat')
$(this).find('.Head').css('color','#695E3E')
}
else{
$(this).attr('style','background:url(/images/interna/acordionazulheader.jpg)norepeat')
$(this).find('.Head').css('color','#FFF')
}
$(this).parent().next().fadeToggle('slow')
})
})
MENUCONSUBMENUCAROL(UsadoenPaulMichael)
<script>
$(function(){
$('#1').hide()
$('#filosofia').hover(function(){
$('#1').fadeIn()
})
$('#1').hover(function(){
//Nadahago!
},function(){
$(this).hide()//Looculto!
})
})
</script>
<style>
#menusuperior{width:432pxbackground:url(images/menusuperior/fondo.jpg)norepeatheight:56px}
#menusuperiordiv{width:142pxheight:56pxcolor:#FFFFFFfloat:lefttextalign:center}
#menusuperiordiva,#menusuperiordiva:link,#menusuperiordiva:visited{display:blockheight:50px
color:#FFFFFFtextdecoration:nonefontsize:15pxlineheight:330%}
#submenu{width:150pxheight:100pxposition:fixed}
#submenudiva,#submenudiva:link,#submenudiva:visited{display:blockbackground:#161616
color:#FFFFFFtextdecoration:noneoutline:nonefontsize:13pxpadding:5px10px}
#submenudiva:hover{background:#666666}
</style>
<divid="menusuperior">
<div><aid="filosofia"href="#">Filosof&iacutea</a></div>
<div><aid="productos"href="#">Productos</a></div>
<div><aid="dondecomprar"href="#">D&oacutendeComprar</a></div>
</div>
<divid="submenu">
<divid="1">
<ahref="#">Carol</a>
</div>
<divid="2"></div>
<divid="3"></div>
</div>
Estemenudebeestarsuperpuestoaestemensaje
ACORDIONEINFACEBOOK
<scriptsrc="/acordion.js"></script>
<style>
.acordion{background:url(acordion1.jpg)norepeatheight:28px}
div{margintop:0px}
</style>
<script>
$(function(){
$('.elegido').next().show()
$('.acordion').click(function(){
$('.acordion').css('background','url(acordion1.jpg)norepeat')
$(this).next().fadeToggle('slow')
$(this).css({'background':'url(acordion2.jpg)norepeat'})
})
})
</script>
<divclass="acordionelegido"><imgsrc="porquelaein.jpg"width="177"height="27"alt="Porquela
EIN"></div>
<div>
<pstyle="margin:10px">
Losbeneficiosdelasmaestriasonline<br>
Dobletitulacion
</p>
</div>
<divclass="acordion"><imgsrc="programasblended.jpg"width="177"height="27"alt="Programas
Blended"></div>
<div>Mas</div>
<divclass="acordion"><imgsrc="programasblended.jpg"width="177"height="27"alt="Programas
Blended"></div>
<div>RaizaOver</div>
ENLACEVERMAS
<script>
$(function(){
$('.vermas').next().hide()
$('.vermas').click(function(){
if($(this).next().is(':visible'))
{
$(this).text("Mas...")
}
else
{
$(this).text("Menos...")
}
$(this).next().fadeToggle()
})
})
</script>
<spanclass="vermas">Mas</span>
<span>
Estosevaamostrar.
</span>
TABsCarol
<style>
.tabs{}
.tabs.tab{background:#666666color:#CCCCCCcursor:handcursor:pointerpadding:3px10pxborder:0
width:100pxfloat:left}
.tabs.activo,.tabs.tab:hover{background:#CCCCCCcolor:#FFFFFF}
#tabcontent{background:#999999padding:10pxfloat:leftwidth:100%height:100px}
</style>
<script>
$(function(){
$('.tab').next().hide()
$('.tabs').append('<divid="tabcontent"></div>')
contenido=$('.tab').next().eq(0).html()
$('.tab').eq(0).addClass('activo')
$('#tabcontent').html(contenido)
$('.tab').click(function(){
$('#tabcontent').show()
contenido=$(this).next().html()
$('#tabcontent').html(contenido)
$('.tab').removeClass('activo')
$(this).addClass('activo')
})
})
</script>
<divclass="tabs">
<divclass="tab">Uno</div>
<div>
Estosevaamostrar.
</div>
<divclass="tab">Dos</div>
<div>
Muchomascontenido
</div>
<divclass="tab">Tres</div>
<div>
Masinfo3
</div>
</div>
DETECTARNAVEGADORES
$(function(){
if($.browser.opera)$("#navegador").text('Opera')
if($.browser.mozilla)$("#navegador").text('mozilla')
if($.browser.safari)$("#navegador").text('Safari')
if($.browser.mozilla)$("#navegador").text('mozilla')
if($.browser.msie&&$.browser.version<=6)$("#navegador").text('ExplorerMenoroiguala6')
})
CAROLBOXMILIGHTBOX
<style>
#mascara{background:#666666opacity:0.5mozopacity:5pxzindex:9000filter:alfa(opacity=50)width:100%
height:100%position:fixedtop:0left:0}
#cuadro{zindex:9001top:25%left:20%width:60%height:50%background:#FFFFFFposition:fixed
overflow:hidden}
#cerrar{float:right}
#iframe{width:100%height:100%}
</style>
<script>
$(function(){
$('body').append('<divid="cuadro"><divid="cerrar">X</div><divid="contenido"></div></div>')
$('#cuadro').hide()
$('#mascara').hide()
$('[rel=carolbox]').children().hide()
$("[rel=carolbox]").click(function(){
$('#contenido').html($(this).children().html())
$('#cuadro').fadeIn('slow')
$('#mascara').fadeIn('slow')
})
$("a[rel=carolboxiframe]").click(function(e){
e.preventDefault()
$('#contenido').html("<iframeid='iframe'frameborder='0'scrolling='no'src='"+$(this).attr('href')+
"'></iframe>")
})
$('#mascara,#cerrar').click(function(){
$('#cuadro').fadeOut('slow')
$('#mascara').fadeOut('slow')
})
})
functionabrir(codigo){
$('#contenido').html(codigo)
}
functioncerrar(){
$('#cuadro').fadeOut('slow')
$('#mascara').fadeOut('slow')
}
</script>
<divid="mascara"></div>
<divrel="carolbox">Carol
<div>TOdobienvale</div>
</div>
<br/>
<ahref="lightbox.html"rel="carolboxiframe">Enlace</a>
<br/>
<ahref="imagen.html"rel="carolboxiframe">Enlace</a>
<spanonclick="abrir('<i>Carolina</i>')">CLic2</span>

Copyof JQUERYCODIGOSCAROL

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Copyof JQUERYCODIGOSCAROL

Hochgeladen von

Copyright:

Verfügbare Formate

CODIGOSJQUERYCAROL

CAMBIAR PROPIEDAD EN EL EVENTO Onclick

Das könnte Ihnen auch gefallen