jQuery - O básico dos básicos

O jQuery tem uma estrutura básica e padrão. Mas apesar de padronizada, é sempre bom saber o porquê de cada parte dessa estrutura...

O básico dos básicos em códigos jquery, em outras palavras, seria o esqueleto essencial para fazer funcionar todos os scripts em jquery.

A primeira coisa a fazer é baixar os arquivos da biblioteca jQuery no site oficial, e note os tipos de arquivos disponíveis:

Production: é um arquivo compactado, ideal para usar em projetos, pois por ser compactado o seu tamanho em kilobytes é reduzido.

Development: não muito recomendado em projetos, mas ideal para os desenvolvedores que gostam de analisar o código da biblioteca jQuery. Os códigos são bem estruturados e fáceis de analisar.
Se você não pretende analisar o código da biblioteca, então escolha a versão Production.

Hora de incluir dentro do HTML.

Insira a localização do arquivo que você baixou no site oficial dentro da tag HEAD, como no exemplo abaixo:


<head>
	<script type="text/javascript" src="CAMINHO DO ARQUIVO/jquery.min.js"></script>
</head>

Feita a chamada da biblioteca dentro do HTML da página, vamos a estrutura básica de código em jquery.

Ainda antes do fechamento da tag HEAD acrescentamos o seguinte código:


<head>
	<script type="text/javascript" src="CAMINHO DO ARQUIVO/jquery.min.js"></script>

	<script type="text/javascript">
		$(document).ready(function(){
		
			/* Seu código aqui */

		});
	</script>
</head>


Esta é uma estrutura básica e todo código que você for fazer para jquery será dentro desta estrutura. É como em HTML ter tag de abertura e fechamento e todo o conteúdo vai entre a abertura e fechamento.

O código diz: “quando o documento (document) estiver pronto (ready) execute a função (function). E Assim tudo que estiver dentro da função será executado.

Vamos agora acrescentar mais alguma coisa dentro da nossa função para verificar a funcionalidade:


<head>
	<script type="text/javascript" src="CAMINHO DO ARQUIVO/jquery.min.js"></script>

	<script type="text/javascript">
		$(document).ready(function(){
			
			$("body").css("background","#ccc");
				
		});
	</script>
</head>


Acrescentamos um efeito css a tag body do HTML, ou seja, toda a página recebe o efeito de cor cinza no background.

Ah sim! Saiba que qualquer elemento HTML ou id dos elementos ou mesmo as classes dos elementos podem receber efeitos e eventos jquery.

No lugar de body poderíamos usar o id de uma div, assim como no CSS. De certa forma não tem utilidade nenhuma colorir o background com jquery, já que podemos usar CSS. Porém em alguns casos é muito útil saber mudar o background com jquery.

Por exemplo, se você tem uma div de cor amarela e quer que ao clicá-la, a cor da div mude para vermelho.

Em um próximo artigo mostro esse efeito de mudança de cor.


Comentários

Stélio Filho | 09/12/2013 11:16:08
nã consigo pegar um campo com valor monetário e jogar convertido em extenso para outro. Me ajude por favor. Estou fazendo um progminha de impressão de cheques.

desd já agradeço a atenção dispensada.
Jorge Luiz | 27/11/2013 17:02:51
Gostei de seu tutorial realmente esta de parabéns por esta aula continue assim vou usar sempre que precisar.
Josean Matias:

Olá Jorge, obrigado pelo elogio e visita. Fico feliz em ter ajudado.

Max William | 23/05/2013 12:37:29
Muito bom, gostei bastante. Primeiro artigo que eu leio sobre jQuery, agora é seguir lendo e colocando em prática.
Edwin Lima | 11/11/2010 15:07:19
Parabéns pelo artigo. Estou ansioso para ler o segundo artigo de mudança de cores continue com seu excelente trabalho!! até a próxima.
Josean Matias: Olá Edwin, obrigado pelo elogio! E o artigo que você se refere já foi postado em: Mudando o background da div

Comentar