Manual de Ccs Jquery

Tutorial de jQuery
javascript css xhtml jquery
jQuery es una liviana libreria de JavaScript, pensada para interactuar con los elementos de una web por medio del DOM.
Lo que la hace tan especial es su sencillez y su reducido tamao.
Por que debera usarlo?
La sencillez de su sintaxis y la poca extension del codigo que necesitas escribir son las caracteristicas ms notables. Si
hicieras lo que hace jQuery con getElementById y window.onload no solo tendrias que escribir mucho, si no que podrian
haber diversos problemas.
Como empiezo a usarlo?

Lo primero que debes hacer, es descargarlo de la web oficial: jQuery. Una vez descargada la libreria (son ms o menos
16k) puedes proceder a tu primer script:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Prueba de jQuery</title>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
Lo primero que hacemos es linkear el jQuery a nuestro documento. Facil, no?
Ejecucin y sintaxis bsica
jQuery tiene una sintaxis muy sencilla. Los comandos se reconocen por comenzar con el simbolo "$". Ahora, la forma de
una sentencia es la siguiente:
$(elemento).evento(funcion-o-parametro);
La manera de inicializar jQuery es muy util:
$(document).ready(function(){
//Aqui tu codigo
});
Ready es un mtodo propio de jQuery, que revisa si el DOM est listo para usarse. Es ms util que el window.onload,
pues este debe esperar a que todos los elementos de la pagina esten cargados (como scripts e imagenes) paa ejecutar. El
"ready", en cambio, espera solo a la estructura.
Acceso a elementos y eventos
Acceder a los elementos de la pgina es sencillo pues se usa la misma nomenclatura que en CSS:
Tipo de elemento Modo de llamado
Etiqueta Nombre de la etiqueta. Ejemplos: "a", "strong", "div"
Elemento con un Id Id precedido por el signo "#". Ejemplos: "#principal","#texto"
Elemento con una clase (class) Clase precedida por un punto (.). Ejemplos: ".codigo", ".titulo"
Nota: Tambien funcionan muchos de los selectores de CSS como ">", "*", etc. Un ejemplo de su uso seria:
$("* > a").click( function(){alert("nada");});
Los eventos que se pueden usar son los mismos que usariamos normalmente. El unico cambio es la supresin del "on"
inicial: mouseover, click, focus, etc
Veamos todo junto
Veamos un ejemplo de lo visto hasta ahora:
<head>
<title>Prueba de jQuery</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (){
//Aqui asignamos el click al elemento <a>
$("a").click(function (){
alert("Presionaste un <a>");
});
});
</script>
</head>
<body>
<a href="#"> Presioname! </a>
</body>
</html>
Al presionar cualquier etiqueta "a" del documento, se ejecutaria el alert.
Aadir o retirar clases
Cuando queremos que un elemento pueda interactuar con un css ya establecido, usamos las clases. Con jQuery, estas
pueden ser asignadas dinamicamente:
$("a").addClass("boton");
O tambien removidas:
$("a").removeClass("boton");
Ahora, podemos aadirle CSS a esa determinada clase, y ver como se comporta:
<head>
<title>
Prueba de jQuery
</title>
<script src="jquery.js" type="text/javascript">

</script>
<script type="text/javascript">
$(document).ready(function (){
//Aqui asignamos el click al elemento <a>
$("a").click(function (){
alert("Presionaste un <a>");
//Aqui removemos la clase!
$("a").removeClass("boton");
});
//Aqui aadimos la clase a los elementos <a>
$("a").addClass("boton");
});
</script>
<style type="text/css">
.boton{
color:#f00;
display:block;
width:100px;
text-align:center;
border:#f00 solid 1px;
</style>
</head>
<body>
<a href="#" class="algo">Presioname!</a>
</body>
</html>
Al ejecutarse el script, todos los "a", tomarn la clase "boton", que tiene propiedades de CSS. Sin embargo, al oprimir el
elemento, la clase es removida.
Efectos especiales
Esta librera tambin esta compuesta por algunos efectos, que resultan muy tiles. Son livianos y faciles de llamar. A
continuacin, una breve descripcion de cuales son, que hacen y como se usan:
Nombre del
Descripcion Descripcion de los parmetros
efecto
Modifica los atributos alto, ancho y

Show (Mostrar) transparencia, partiendo de 0.
$(objeto).show("velocidad")
Modifica los atributos alto, ancho y
transparencia, partiendo de los valores
Hide (Ocultar)
actuales hasta llegar a 0.
$(objeto).hide("velocidad")
Modifica los atributos alto y transparencia,
Slide Down partiendo de 0. Es similar a "show", salvo que Velocidad: Determina el tiempo en el
(Aparecer hacia no modifica el ancho, creando un efecto de que se realizar el efecto. Puede ser
abajo) "cortinilla". "slow" (lento), "normal", o "fast"
(rpido).
$(objeto).slideDown("velocidad")
Modifica los atributos alto y transparencia,
Slide Up partiendo de los actuales, hasta llegar a 0. Es
(Aparecer hacia similar a "show", salvo que no modifica el
arriba) ancho, creando un efecto de "cortinilla".
$(objeto).slideUp("velocidad")
Fade Modifica el atributo transparencia desde 0.
In(Aparecer)
$(objeto).fadeIn("velocidad")
Fade Modifica el atributo transparencia desde el
Out(Desaparecer) valor actual, hasta llegar a 0.
$(objeto).fadeOut("velocidad")
Centra un elemento con respecto a su
Center (Centrar) "parent".
$(objeto).center("velocidad");
Velocidad: Determina el tiempo en el
que se realizar el efecto. Puede ser
"slow" (lento), "normal", o "fast"
Modifica el atributo transparencia a un valor
Fade To(Cambiar (rpido).
especifico.
transparencia)
$(objeto).fadeTo("velocidad", transparencia) Transparencia: Un numero de 0 a 100
que indica que tan visible es el
elemento.
Velocidad: Determina el tiempo en el

que se realizar el efecto. Puede ser
"slow" (lento), "normal", o "fast"
(rpido).
Modifica un atributo especifico.
Animate (Animar) Propiedades: Una o ms propiedades
$(objeto).animate("propiedades","velocidad"); con valor numrico en CSS, por
ejemplo width y height. La llamada
seria:
$(objeto).animate({width:20,height:200},
"slow");
"Callbacks", llamar funciones y pasar parametros
Despues de un evento se pueden llamar otras funciones JavaScript y jQuery, de la forma tradicional:
funcion();
Hay eventos que permiten, acabada su ejecucin, llamar funciones. Los efectos, por ejemplo, permiten un parmetro
opcional, el de "callback". De modo que la sintaxis para un efecto con callback, sera (por ejemplo) la siguiente:
$(objeto).show("velocidad", funcion);
Nota: La funcion debe colocarse sin los parentesis y sin comillas
Como no se pueden usar parentesis en un callback, el modo de pasar los parametros seria el siguiente:
$(objeto).show("slow", function(){
lafuncion("parametro1","parametro2");
});
Conclusiones
Este tutorial es a modo de introduccion. Depende de ti explorar jQuery para explotar todas sus funcionalidades. Para
conocer ms a fondo esta librera, puedes visitar los siguientes vinculos:
Descarga los ejemplos de este tutorial
Pgina principal de jQuery
Documentacin de jQuery
Tutoriales de jQuery
Descargas de jQuery
Blog de jQuery
Poner imagen en la cabecera (Blogger beta)

Todas las plantillas no son iguales, las indicaciones para aadir una imagen en la cabecera del blog son
para la plantilla Minima (esta que estis viendo) an as las referencias y cdigos pueden servir de
ejemplo para situaros en vuestra plantilla.
Dicho todo esto vamos a poner una imagen en nuestro blog.
Lo primero de todo debemos tener la Url de nuestra imagen, para ello utilizamos algn alojamiento,
por ejemplo Imageshack una vez conseguimos la Url nos situamos en:
Plantilla/Edicin HTML/Expandir plantilla de artilugios y buscamos donde dice:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
Aadiremos lo siguiente:
background-image: url(http://aqutuimagen/fondoheader.png);
De manera que quedara as:

#header-wrapper {
width:660px;
margin:0 auto 10px;
}
#header {
margin: 5px;
height:100px;
background-image: url(http://aqutuimagen/fondoheader.png);
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
Si el alto de la imagen no es el adecuado podemos aadir height:150px; y modificar el valor150 para

darle el tamao deseado.
Queris quitar el borde de la imagen? Donde dice:border: 1px cambiar el 1 por 0
Si deseas que al clicar en la imagen de la cabecera tu blog se actualice entonces sigue lasexplicaciones
dadas aqu, adems necesitis eliminar el ttulo aqu tienes la solucin.
Suerte
<style type='text/css'>
.rotator{
background-color:#111;
width:800px;
height:300px;
margin:0px auto;
position:relative;
font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
color:#fff;
text-transform:uppercase;
letter-spacing:-1px;
border:3px solid #f0f0f0;
overflow:hidden;
-moz-box-shadow:0px 0px 10px #222;
-webkit-box-shadow:0px 0px 10px #222;
box-shadow:0px 0px 10px #222;
}
.rotator ul{
list-style:none;
position:absolute;
right:0px;
top:0px;
margin-top:6px;
z-index:999999;
}
.rotator ul li{
display:block;
float:left;
clear:both;
width:260px;
}
.rotator ul li a{
width:230px;
float:right;
clear:both;
padding-left:10px;
text-decoration:none;
display:block;
height:52px;
line-height:52px;
margin:1px -20px 1px 0px;
opacity:0.7;
color:#f0f0f0;
font-size:20px;
border:2px solid #000;
border-right:none;
outline:none;
text-shadow:-1px 1px 1px #000;
-moz-border-radius:10px 0px 0px 20px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:20px;
border-top-left-radius:10px;
border-bottom-left-radius:20px;
}
.rotator ul li a:hover{
text-shadow:0px 0px 2px #fff;
}
.rotator .heading{
position:absolute;
top:0px;
left:0px;
width:500px;
}
.rotator .heading h1{
line-height:52px;
font-weight:normal;
font-size:46px;
padding:20px;
}
.rotator .description{
width:500px;
height:80px;
position:absolute;
bottom:0px;
left:0px;
padding:20px;
-moz-border-radius:0px 10px 0px 0px;
-webkit-border-top-right-radius:10px;
border-top-right-radius:10px;
opacity:0.7;
border-top:2px solid #000;
border-right:2px solid #000;
}
.rotator .description p{
text-transform:none;
letter-spacing:normal;
line-height:26px;
}
a.more{
color:orange;
text-decoration:none;
text-transform:uppercase;
font-size:10px;
}
a.more:hover{
color:#fff;
}
</style>
Otro
<div class="rotator">
<ul id="rotmenu">
<li><a href="rot1">Ttulo pestaa-1</a>
<div style="display:none;">
<div class="info_image">url-imagen-1</div>
<div class="info_heading">
Texto-contenido-1</div>
<div class="info_description">
Aqu texto descripcin 1
<a href="#" class="more">Sigue...</a>
</div>
</div>
</li>
<li><a href="rot2">Ttulo-pestaa-2</a><div style="display:none;">
<a href="#" class="more">Sigue...</a></div>
</div>
</li>
</div>
</li>
</div>
</li>
Ttulo-contenido-5</div>
</div>
</li>
</ul>
<div id="rot1">
<img src="url-imagen-1" width="800" height="300" class="bg" alt=""/>
<div class="heading">
<h1>
</h1>
</div>
<div class="description">
<p>
</p>
</div>
</div>
</div>

Manual de Ccs Jquery

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual de Ccs Jquery

Cargado por

Copyright:

Formatos disponibles

Tutorial de jQuery

javascript css xhtml jquery

Por que debera usarlo?

Como empiezo a usarlo?

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

Lo primero que hacemos es linkear el jQuery a nuestro documento. Facil, no?

Ejecucin y sintaxis bsica

La manera de inicializar jQuery es muy util:

Tipo de elemento Modo de llamado

Etiqueta Nombre de la etiqueta. Ejemplos: "a", "strong", "div"

Elemento con un Id Id precedido por el signo "#". Ejemplos: "#principal","#texto"

$("* > a").click( function(){alert("nada");});

Veamos todo junto

Veamos un ejemplo de lo visto hasta ahora:

//Aqui asignamos el click al elemento <a>

<a href="#"> Presioname! </a>

Aadir o retirar clases

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

//Aqui asignamos el click al elemento <a>

//Aqui removemos la clase!

//Aqui aadimos la clase a los elementos <a>

border:#f00 solid 1px;

<a href="#" class="algo">Presioname!</a>

Modifica los atributos alto, ancho y

Velocidad: Determina el tiempo en el

Nota: La funcion debe colocarse sin los parentesis y sin comillas

Poner imagen en la cabecera (Blogger beta)

De manera que quedara as:

Si el alto de la imagen no es el adecuado podemos aadir height:150px; y modificar el valor150 para

Queris quitar el borde de la imagen? Donde dice:border: 1px cambiar el 1 por 0

También podría gustarte