Como mostrar e ocultar elementos com jQuery

Odnei Sales 09:44
Com jQuery você pode ocultar e mostrar elementos da página muito facilmente. Os elementos da página podem ser qualquer coisa como uma div, uma imagem, um parágrafo ou qualquer coisa que esteja na sua página web. 
E é assim que se faz:
$ (this).hide() //oculta o elemento atual
$ ("p").hide() //esconde todos os parágrafos
$ ("p.test").hide() //esconde todos os paragráfos
$ ("#test").hide() //oculta o elemento com o id="test"

Veja os exemplos abaixo na ordem acima:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $(this).hide();
    });
});
</script>
</head>
<body>

<button>Click aqui</button>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
</script>
</head>
<body>

<h2>Este é um cabeçalho</h2>

<p>Este é um parágrafo.</p>
<p>Este é outro parágrafo.</p>

<button>Click aqui para esconder os parágrafos</button>

</body>
</html>

Este é um cabeçalho

Este é um parágrafo.

Este é outro parágrafo.


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#test").hide();
    });
});
</script>
</head>
<body>

<h2>Este é um cabeçalho</h2>

<p>Este é um parágrafo.</p>
<p id="test">Este é um outro parágrafo.</p>

<button>Click aqui</button>

</body>
</html>

Este é um cabeçalho

Este é um parágrafo.

Este é um outro parágrafo.


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".test").hide();
    });
});
</script>
</head>
<body>

<h2 class="test">Este é um cabeçalho</h2>

<p class="test">Este é um parágrafo.</p>
<p>Este é outro parágrafo.</p>

<button>Click aqui</button>

</body>
</html>

Este é um cabeçalho

Este é outro parágrafo.

Este é um parágrafo.

Fonte: http://www.w3schools.com/jquery/jquery_syntax.asp
Odnei Sales

Postado por Odnei Sales

Postar um comentário

0 Comentários