| Culinária | Detonados | Internet | Poesias | Wallpapers | Web Tools |
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.
Copie o código abaixo, salve-o como teste.html e execute no navegador.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#image").mouseover(function(){
$(this).fadeOut(600);
$(this).fadeIn(4000);
});
});
</script>
</head>
<body>
<img id="image" src="http://novidades100.com.br/dicas/images/screenshot.webp" 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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(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://novidades100.com.br/gadget/web/images/001.webp" 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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(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>
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
Nosso site utiliza cookies para melhorar sua experiência ao utilizar nosso conteúdo, além de personalizar publicidades de acordo com seus interesses.
Política de Privacidade
