Iniciando em Jquery

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? :)



Eu Faço Programas

Entre o código e o batom, o salto e o pc, a maquiagem e o SEO, fazendo programas e cobrando por isso. Debugue-me! :-D

9 Comments

  • [...] Nesse post eu mostrei um pequeno efeito com JQuery, ao clicar em um link. Agora continuaremos nossos estudos. [...]

  • [...] dois tutorias anteriores (aqui e aqui) aprendemos alguns efeitos básicos utilizando Jquery. A parte III do tutorial fará você [...]

  • [...] estilos de elementos da tela, apenas (você pode ver os tutorias anteriores clicando aqui, aqui e aqui). Agora começaremos com coisas mais [...]

  • [...] Olá pessoal. Estamos encerrando o tutorial “Iniciando em JQuery” com a quinta parte (você pode ver os tutorias anteriores clicando aqui,  aqui, aqui e aqui). [...]

  • [...] gabiifonseca 3 Comments Tweet Nesse post eu mostrei um pequeno efeito com JQuery, ao clicar em um link. Agora continuaremos nossos estudos  [...]

  • Responder novembro 17, 2011

    Matee

    You clodun’t pay me to ignore these posts!

  • [...] Agora trabalharemos o Jquery. Certifique-se que você tenha inserido o link para a biblioteca iQuery previamente em sua página (se não sabe como faze-lo, dê uma olhada na série Introdução a jQuery). [...]

  • Responder março 26, 2014

    Rafael

    seria legal visualizarmos o exemplo que você deu, porque assim, só com uma imagem estática, é difícil…

    • Responder março 31, 2014

      Eu Faço Programas

      Rafael, nós acreditamos que você só aprende a programar programando! Os exemplo está aí para que você abra o seu bloco de notas (ou editor de sua preferencia) e brinque com o código. Para posts mais complexos você vai encontrar visualizações (algumas para download) e samples com o código para copiar/colar. Divirta-se! :D

Leave a Reply


6 − = um