Novidades100 - Dicas de Internet e Computador
CulináriaInternetDetonadosWallpapersPoesiasVideos

Dinamizar Elementos Html com o JQuery

Selecionei aqui algumas das muitas e eficientes funções da biblioteca do JQuery. Estão expostas em formas de códigos prontos, basta apenas digitá-los ou copiá-los no editor de texto de sua preferência.
Veja um dos exemplos na imagem abaixo.

Truques do JQuery
Passe o Mouse

Copie o código abaixo, salve-o como teste.html e execute no navegador.

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#image").mouseover(function(){
$(this).fadeOut(600);
$(this).fadeIn(4000);
});
});
</script>
</head>
<body>
<img id="image" src="http://www.novidades100.com.br/dicas/images/screenshot.jpg" width="300" height="300"><br>
<b>Passe o Mouse</b></p>
</body>
</html>

Esta função vai alterar os elementos <div> e <p>, tanto no seu conteúdo quanto nas configurações de estilo.

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function(){
$("div.alterar").css("background-color", "yellow", "font-size", "14em");
$("p").css("font-size", "160%");
$("p").css("color", "00f");
$("p").html('Novo Texto!!!');
});
});
</script>
</head>
<body>
<div class="alterar" style="width:100%;height:100%;background:#008;color:#fff;font-size:230%;"><p>Este texto vai ser alterado!<br>
<b>Click para alterá-lo </b>.</p>
</div>
</body>
</html>

A próxima função vai alterar o conteúdo da <div>, alterando seperadamente os elementos <h1> e <p>, com a diferença de que isto vai acontecer ao colocar e tirar o ponteiro do mouse do conteúdo. Esta função também vai diminuir e aumentar a nitidez da página.

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseover(function(){
$("div").fadeTo("slow",0.40);
$("div").fadeTo("slow",1.00);
$("h1").html('<h1>Texto Alterado</h1>');
$("div").css("background","#3cf");
$("h1").css("color","#ff0");
$("p").css("color","#000");
$("p").css("font-size","130%");
$("h1").css("font-size","170%");
$("p").html('<p>Todos este trecho do parágrafo foi alterado, você também pode utilizar-se de arquivos externos.</p>');
$("div").css("border-color", "#ff0");
});
});
</script>
</head>
<body style="background:#ff0;">
<div style="background:#3cf;width:300px;height:300px;border:12px dotted #3a0;"> <h1 style="text-align:center;color:#fff;" >Isto Vai Mudar!</h1>
<p style="color:#00f;font-size:150%">Este parágrafo vai ser também alterado tanto o texto quanto suas configurações de css.</p>
</div>
</body>
</html>

Esta função vai ocultar e exibir novamente a imagem ao clicar no botão Ocultar e Mostrar.

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ocultar").click(function(){
$("img").hide();
});
$("#mostrar").click(function(){
$("img").show();
});
});
</script>
</head>
<body>
<div style="width:100%;height:100%;background: #8b4;">
<p><img style="width:180px;height:160px;" src="https://www.novidades100.com.br/gadget/web/images/001.jpg" alt="imagem" title="imagem"></p>
<button id="ocultar" style="background:#ff0;font-size:130%;">Ocultar</button>
<button id="mostrar" style="background:#ff0;font-size:130%;">Mostrar</button>
</div>
</body>
</html>

Esta é equivalente a função anterior. Apenas vai ocultar e exibir o elemento <p>.

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#esconder").click(function(){
$("p.ocultar").hide();
});
$("#exibir").click(function(){
$("p.ocultar").show();
});
});
</script>
</head>
<body>
<button id="esconder" style="background:#ff0;color:#00f;font-size:130%;">Ocultar</button>
<button id="exibir" style="background:#ff0;color:#00f;font-size:130%;">Mostrar</button>
<p class="ocultar" style="background:#ff0;color:#00f;padding-left:10px;font-size:120%;">Texto para ser ocultado e depois exibido novamente.</p>
<p class="ocultar" style="background:#ff0;color:#00f;padding-left:10px;font-size:120%;">Este é um outro pequeno trecho que será ocultado e depois exibido novamente.</p>
</body>
</html>

Esta última função utiliza-se também do ajax, ferramenta do js de grande utilidade, para não dizer fundamental. Importa arquivos externos de várias linguagem e exibe em html. No caso aqui vai ser alterado o conteúdo da página, importando um arquivo .php. Neste caso o arquivo está com a extensão .php mas é apenas um arquivo .html simples.
Você deve criar este arquivo e salvar em uma pasta chamada php que deve ficar armazenada dentro da pasta que ficará este arquivo de teste.

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("div"). innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","php/popup.php",true);
xmlhttp.send();
}
</script>
</head>
<body style="background:#ff0;width:98%;height:95%;font-size:120%;">
<div id="div"><h2>Usar Ajax para Mudar Conteúdo</h2>
<p>Utilizar a biblioteca do Ajax para importar os mais variados tipos de arquivos externos em páginas da web.</p>
<button type="button" style="background:#ff0;color:#00f;font-size:130%;" onclick="loadXMLDoc()">Alterar Conteúdo</button>
</div>
</body>
</html>

Dinamizar, Elementos Html, JQuery, Funções

Pressione CTRL + D para Adicionar Esta Página aos Seus Favoritos

Sobre o Autor| Política de Privacidade

Nosso site utiliza cookies e outras tecnologias para melhorar sua experiência ao utilizar nosso conteúdo, além de personalizar publicidades e outros serviços de acordo com seus interesses.