Mudando o background da div

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!