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>
