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
Olá Jorge, obrigado pelo elogio e visita. Fico feliz em ter ajudado.
Comentar