Chaining é um conceito do JQuery que significa encadeamento e nos permite executar vários métodos jQuery continuadamente. Se você chamar um método em uma seleção e o método retornar um objeto jQuery, você pode continuar a chamar métodos jQuery no objeto sem parar até que você finalize o método o encerrando com um caractere ponto e vírgula.
Ao contrario do exemplo anterior que utilizamos o mesmo método e o chamamos varias vezes utilizando inúmeras linhas de instruções JQuery para o mesmo elemento, agora chamamos o objeto uma única vez e o repetimos até que nossa condição seja satisfeita utilizamos uma única linha para cada elemento.
JQuery – Chaning – Animado
Exemplo:
Neste exemplo utilizamos o conceito de encadeamento para repetir instruções JQuery para criar o CSS e uma animação para a pagina do website.
JQuery
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>
<!-- Está é uma instalação do JQuery, você apenas precisa apontar
o para o respectivo script da versão que você deseja utilizar -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>
<!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
Todo o script roda no evento equivalent ao OnLoad da pagina html-->
<script>
$( document ).ready(function() {
$("body").css("background-color", "#FFFFFF");
$("#header").css("background-color", "#000000").css("color", "white")
.css("padding", "5px").css("text-align","center");
$("#nav").css("background-color", "#9C9C9C").css("color", "#696969").css("height", "370px")
.css("width", "100px").css("float","left").css("padding","5px");
$("#section").css("width", "550px").css("float","left").css("padding","15px");
$("#footer").css("background-color", "#000000").css("color", "white").css("clear", "both")
.css("text-align", "center").css("padding","5px");
$("a").css("color", "#6C7B8B");
$("p").slideUp(100).slideDown(3000);
$( "a" ).click(function( event ) {
alert( "Desenvolvimento Aberto.\nObrigado por visitar!" );
});
});
</script>
</head>
<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>
<div id="nav">
HTML<br>
CSS<br>
Javascript<br>
JQuery<br>
</div>
<div id="section">
<p>Desenvolvimento Aberto é uma organização voltada para o aprendizado e discussão de técnicas de
desenvolvimento focado em algumas linguagens de programação sendo parcialmente/totalmente abertas ou
com licenças gratuitas para desenvolvedores de cada uma de suas respectivas marcas registradas.<br /> <br />
Desenvolvimento Aberto foi escrito e desenvolve utilizando ferramentas gratuitas disponibilizadas
pelas melhores empresas de software da atualidade, incluindo a própria hospedagem e design deste site,
sendo assim, também proporciona conteúdo gratuito, isso quer dizer que você não paga nada para aprender
e utilizar as tecnologias de ponta que podem ser manuseadas através das linguagens de programação mais
requisitadas pelas empresas no mercado atual.
</p>
<a href="#">Clique aqui!!!</a>
</div>
<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>
</body>
</html>
Ricardo Mantovani
Desenvolvimento Código Aberto 