lunes, 11 de febrero de 2013

Encadenamiento de métodos con jQuery:

 Por lo general escribimos las sentencias jQuery una a la vez (una después de la otra).

Sin embargo, existe una técnica llamada encadenamiento, que nos permite ejecutar varios comandos con jQuery, uno tras otro, en el mismo elemento o elementos.

Sugerencia: De esta manera, los navegadores no tienen que encontrar el mismo elemento  más de una vez.

Para encadenar una acción, sólo tiene que añadir la acción a la acción anterior y unirlas por medio de un punto.


Cuando encadenamos métodos en jQuery, la línea de código puede ser bastante larga. Sin embargo, jQuery no es muy estricto acerca de la sintaxis: puede darle formato como usted desee, incluyendo saltos de línea y sangrías.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Afrodita Muestra/Oculta</title>
<style>
#afrodita{
    width:800px;
    height:502px;
    background-image:url(imagenes/afrodita.jpg);
    background-repeat:no-repeat;
    background-size:100%;
}
p{
    background-color:#CCC;
    text-align:center;
}
</style>
<script src="jquery.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
    $("#toggle").click(onSelecciona);
   
}
function onSelecciona(){
    $("p").css("color","red").slideUp(1000).slideDown(1000);
   
}
</script>
</head>

<body>
<div id="afrodita"><p>El nacimiento de Venus, por Sandro Botticelli (1445 - 1510)</p></div>
<input type="button" id="toggle" value="Selecciona"/>

</body>
</html> 


Curso completo de jQuery en:
http://www.udemy.com/jquery-y-mobile/

No hay comentarios:

Publicar un comentario