Websites – Chaining – JQuery – Linux

Publicado: 23 de outubro de 2014 em JavaScript, JQuery

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

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>
Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

w

Conectando a %s