Novidades100 - Dicas de Internet e Computador

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 scripts prontos, basta apenas digitá-los ou copiá-los no editor de texto de sua preferência.
Atenção: Para que tudo ocorra de forma eficaz, não esqueça de criar um diretório nomeado de js aonde deve ser colocando o arquivo JQuery, que você pode baixar AQUI, e um outro diretório nomeado de htm, no qual deve ser colocado o arquivo content.htm, que será importado pelo ajax (último script). (Você mesmo pode criar qualquer conteúdo html para este fim).
Esta primeira função vai fazer sumir (fadeOut) e novamente aparecer (fadeIn) em tempos de execuções diferentes.

Truques do JQuery
Passe o Mouse

Copie o código abaixo, execute no navegador e faça as alterações que achar conveniente.

<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="js/ jquery.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="js/ jquery.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="js/jquery.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="http://www.novidades100.com.br/images/papel/ papelpeq/abelha.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="js/jquery.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 htm.

<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","htm/content.htm",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>

| | HomePage | Relatar Problema |