Mudando o background da div
Categoria: jQuery 13 de abril de 2010
Como citado no artigo anterior sobre o básico do jQuery, onde falei da possibilidade de mudança de background utilizando jQuery, neste artigo demonstro este efeito.
Veja o exemplo funcionando antes de prosseguir.
A primeira coisa a fazer é colorir o background da div com o CSS.
Supondo que a div tenha um id = "box", o CSS inicial seria este:
<style type="text/css">
#box {
background:#ccc;
width:300px;
height:200px;
}
</style>Com um background pré-definido com CSS, podemos então criar o código jQuery para mudar esse background.
Se você ainda não está familiarizado com o código abaixo, então não deixe de ver o artigo sobre o básico do jQuery.
<script type="text/javascript">
$(document).ready(function(){
/* ao clicar na div com id="box" executa a função */
$("#box").click(function(){
/* a função muda o background da div com id="box" */
$("#box").css("background","#f00");
});
});
</script>
Não deixem de ler os comentários dentro do código.
Utilizamos o evento click() do jQuery para este efeito e passamos como parâmetro para este evento uma função.
Então ao clicar na div com id="box", a função será executada e o background da div mudará de cor.
O evento click() pode ser utilizado em vários outros efeitos em jQuery, não se prenda apenas a este exemplo e teste outras possibilidades utilizando o evento click().
Uma boa sorte a todos!