O jQuery vem se tornando um de meus queridinhos. E não é muito difícil explicar o porquê. Com ele é possível criar efeitos às vezes tão bacanas quanto no Flash, mas utilizando somente código – de uma maneira que a gente já conhece.

O jQuery não se trata de uma linguagem da programação. A melhor maneira de defini-lo é como uma compilação de Javascript. Para utilizar seus recursos basta referenciar o arquivo .js, que você encontra em sua última versão no site oficial, e começar a desenvolver.

Esse tutorial tem como objetivo fazer com que você desenvolva sua primeira página HTML utilizando jQuery. Pronto?

O primeiro passo é fazer o download do jQuery. Mantenha sempre a última versão, que contém mais recursos.

Crie uma página html comum, com as marcações básicas, e faça uma referência à esse arquivo, como na imagem abaixo:

Como trabalharemos inicialmente com um comando simples, ele será inserido diretamente na página. Contudo, para comando mais complexos, é recomendado a criação de um novo arquivo .js, que deverá ser referenciado na página APÓS a referência ao jquery.

Basicamente um script é construído como o abaixo, entre tags <script></script>:

$(document).ready(function
() {
// Código
});

O $ indica o elemento do corpo da página que deverá ser alterado e o comando ready, nesse caso, diz que o script deve ser executado assim que a página estiver “pronta”, ou seja, assim que for carregada.

Para iniciar, criaremos um link comum no html, um <a href> qualquer que, ao ser clicado, mostrará uma mensagem de “Olá Mundo!”. Os comandos utilizados seguem a mesma sintaxe do javascript, portanto, é bom que você tenha um conhecimento prévio da linguagem.

Altere seu código de forma que a página fique como a imagem abaixo:

O código das tags <script></script> é:

$(document).ready(function
() {
$(“a”).click(function()
{
alert(“Olá, Mundo!”);
});
});

Como foi dito anteriormente, o atributo “a” será o elemento modificado, assim que for clicado, emitindo um alerta com os dizeres “Olá Mundo!”.

Super simples, hein? 🙂


// Comente!

comentários