Ir ao conteúdo
  • Cadastre-se
lc1337

Mudando dor com jquery

Recommended Posts

Oi sou novo no forum 

eu estou começando à aprender Jquery hoje por conta própria :P

to com um probleminha aqui

Gostaria de, ao clicar no botão, ele mudasse de cor ou mudasse a cor da pagina.

Eu criei um alerta para me retornar uma resposta ao clicar no botão (pra ve se ta tudo nos conformes :p)

O alerta retorna normalmente mas o botão não muda de cor ainda.

Sem mais delongas ai vai o código: 

Ai é  HTML

<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="jquery.js"> </script>
</head>
<body>
	<input type="button" id="teste" value="teste" />
</body>
</html>

Aqui o JS

(function($) {
	$(document).ready(function(){
		$("#teste").click(function(){
			$("#teste").css('background-color:','blue');
			alert( "DEU CERTO" );
		});
	});
})(jQuery);	

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@lc1337 Olá,  seja bem  vindo em nosso Fórum do Clube do Hardware.

O problema do seu código é bem simples e são duas coisas.

 

1) sintaxe errada do inicio

2) sintaxe errada da função  css().

 

Corrigindo 

1) Sintaxe do jquery está errada porque você chamou duas vezes o jquery.

 

O correto é:

$(document).ready(function(){
	//resto do código aqui
});

Já a sintaxe do css()  pode ser duas: 

com o separador  " : " (dois pontos) e chaves delimitadoras OU sem o separador dois pontos e acrescentar uma virgula.

Então faça desta forma:

$("#teste").css('background-color','blue');

OU assim:

$("#teste").css({'background-color':'blue'});

Particularmente prefiro a segunda.. pois permite mais de um atributo separando por virgulas por exemplo:

$("#teste").css({'background-color':'blue', 'color':'#fff'});

Então seu código completo e funcionando ficaria assim:

$(document).ready(function(){
		$("#teste").click(function(){
		   $("#teste").css({"background-color":"blue"});
		});
	});

Você poderia até mesmo referenciar o próprio elemento como trata-se de um botão e quer que aplique nele mesmo poderia ser escrito usando o psudo elemento  $(this)  desta forma:

 

$(document).ready(function(){
		$("#teste").click(function(){
			  $(this).css({"background-color":"blue"});
			
		});
	});

 

  • Curtir 3

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado pela ajuda e pelo seu tempo :)

Você explicou tudo bem detalhado :P

Acho q agora destravei e posso começar a aprender de verdade

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×