TADS:Estrutura de Dados: codigos2801: mudanças entre as edições

De Wiki Cursos IFPR Foz
Ir para navegaçãoIr para pesquisar
Sem resumo de edição
Sem resumo de edição
 
Linha 9: Linha 9:
</syntaxhighlight>
</syntaxhighlight>


que vincula uma função anônima
que vincula uma *[http://blog.caelum.com.br/boas-praticas-com-javascript-e-jquery-codigo-nao-obstrusivo/ função anônima] ao evento '''ready''' do documento. Assim, esta função irá executar assim que o documento estiver pronto. É necessário fazer esta vincualação, pois o jQuery precisa que os elementos já existam antes de executar seus códigos. Assim, esperar o documento ficar pronto garante que os elementos irão existir no momento da execução.
 
A estrutura de um comando jQuery sempre segue a estrutura $('seletor').ação(). O '''seletor''' será utilizado para ajudar o jQuery a escolher o elemento que será trabalhado. Vale salientar que as funções de CSS para criar seletores também se aplicam aqui. Para mais informações, acesse esta página da *[http://www.w3schools.com/jquery/jquery_selectors.asp '''W3Schools'''].





Edição atual tal como às 00h08min de 5 de fevereiro de 2016

Este código possui as funcionalidades básicas do jQuery. Atenção para o código:

$(document).ready(function(){
     .
     .
     .
});

que vincula uma *função anônima ao evento ready do documento. Assim, esta função irá executar assim que o documento estiver pronto. É necessário fazer esta vincualação, pois o jQuery precisa que os elementos já existam antes de executar seus códigos. Assim, esperar o documento ficar pronto garante que os elementos irão existir no momento da execução.

A estrutura de um comando jQuery sempre segue a estrutura $('seletor').ação(). O seletor será utilizado para ajudar o jQuery a escolher o elemento que será trabalhado. Vale salientar que as funções de CSS para criar seletores também se aplicam aqui. Para mais informações, acesse esta página da *W3Schools.


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

	<script>
		$(document).ready(function(){
				//$("*").hide();
				$("p").hide();
				$(".teste").hide();
				$("#fera").hide();
				
				$("#fera").click(function(){
					$("#fera").hide();
				});	
				$(".teste").click(function(){
					$(".teste").hide();
				});
				$("p").click(function(){
					$(this).hide();
				});
				$("#botao").click(function(){
					$("*").show();
				});
			});


	</script>
	</head>
	<body>
		<input type="button" id="botao" value="mostrar">
		<h1 class="teste"> Titulo</h1>
		<h2 id="fera">Id Fera</h2>
		<p>Primeiro</p>
		<p>Segundo</p>
		
	</body>
</html>