TADS:Estrutura de Dados: codigos3001

De Wiki Cursos IFPR Foz
Revisão de 23h46min de 4 de fevereiro de 2016 por Estevan.costa (discussão | contribs) (Criou página com 'Este primeiro Código cria 3 Div's com características diferentes: <syntaxhighlight lang="jquery"> <html> <head> <style> div{ width:150px; height: 150px; bord...')
(dif) ← Edição anterior | Revisão atual (dif) | Versão posterior → (dif)
Ir para navegaçãoIr para pesquisar

Este primeiro Código cria 3 Div's com características diferentes:

<html>
	<head>
	<style>
		div{
			width:150px;
			height: 150px;
			border: 1px solid #000000;
			display: inline-block;
		}
		#prim{
			background-color: #FF0000;
		}
		#seg{
			background-color: #00FF00;
		}
		#terc{
			background-color: #0000FF;
		}

	</style>
	</head>
	<body>
		<div id="prim"></div>
		<div id="seg"></div>
		<div id="terc"></div>

	</body>
</html>

Este código cria uma página parecida com o código anterior, porém adiciona as características de CSS via jQuery. Além disso, adiciona uma funcionalidade que ao clicar em qualquer um dos divs, estes trocam de cor.

<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

	<script>
		$(document).ready(
			function()
			{
				$("div").css("width","150px");
				$("div").css("height","150px");
				$("div").css("border", "1px solid #000000");
				$("div").css("display", "inline-block");

				
				$("#prim").css("background-color", "#FF0000");
				$("#seg").css("background-color", "#00FF00");
				$("#terc").css("background-color", "#0000FF");

				$("div").click(
					function()
					{
						alert($("#prim").css("background-color"));
						var prim = $("#prim").css("background-color");
						var seg  = $("#seg").css("background-color");
						var terc = $("#terc").css("background-color");

						$("#prim").css("background-color", terc);
						$("#seg").css("background-color", prim);
						$("#terc").css("background-color", seg);
					}
				);
			}
		);
	</script>

	</head>
	<body>
		<div id="prim"></div>
		<div id="seg"></div>
		<div id="terc"></div>

	</body>
</html>

Este último código cria outros 3 div's, porém com mais diferenças do que apenas cores. Logo, para poder trocar todas as propriedades do CSS, é utilizado o comando attr(), que altera um atributo do elemento selecionado. Também da para ver os comandos de removeClass() e addClass(), que consegue gerenciar a classe vinculada na tag.

<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

	<script>
		$(document).ready(function(){
			
			$("div").click(function(){
				
				var c1 = $("#prim").attr("class"); 
				var c2 = $("#seg").attr("class");
				var c3 = $("#terc").attr("class");

				$("#prim").attr("class" , c3);
				$("#seg").attr("class" , c1);
				$("#terc").attr("class" , c2);


				/*alert( $("#prim").attr("class")  );

				$("#prim").removeClass("r"+aux);
				$("#seg").removeClass("r"+aux+1);
				$("#terc").removeClass("r"+aux+2);

				$("#prim").addClass("r3");
				$("#seg").addClass("r1");
				$("#terc").addClass("r2");*/
			});

		});
	</script>

	<style>
		.r1{
			width: 50px;
			height : 50px;
			background-color: #FF0000;
		}
		.r2{
			width: 100px;
			height: 100px;
			border: 1px solid #000000;
		}
		.r3{
			width: 150px;
			height: 150px;
			background-color: #00FF00;
			border: 1px solid #000000;
		}
		div{
			display: inline-block;
		}
	</style>
	</head>
	<body>
		<div id="prim" class="r1"></div>
		<div id="seg"  class="r2"></div>
		<div id="terc" class="r3"></div>
	</body>
</html>