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



Tags:


Publicado por

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 Comentários para Iniciando em Jquery

  1. Pingback: Iniciando em JQuery – Parte II « Eu Faço Programas

  2. Pingback: Iniciando em Jquery – Parte III « Eu Faço Programas

  3. Pingback: Iniciando em Jquery – Parte IV « Eu Faço Programas

  4. Pingback: Iniciando em Jquery – Parte Final « Eu Faço Programas

  5. Pingback: Iniciando em JQuery – Parte II

  6. Matee says:

    You clodun’t pay me to ignore these posts!

  7. Pingback: Slideshow Carrossel - jQuery | Eu Faço Programas

  8. Rafael says:

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

    • Eu Faço Programas says:

      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

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *


nove − = 1

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Back to Top ↑