anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Escreva menos e faça mais com jQuery!

jQuery

Para quem já trabalha com internet há algum tempo, jQuery é uma sigla bastante comum, mas muitas pessoas ainda não sabem como utilizar esse maravilhoso recurso em suas páginas. Neste artigo, você vai aprender a dar os seus primeiros passos com o jQuery, além de um pequeno tutorial  de como utilizá-lo em seus trabalhos.

Importante: vale lembrar que é muito importante que você possua conhecimentos básicos de Javascript. Isso vai facilitar, e muito, a sua compreensão. No entanto, caso ainda não possua conhecimento algum sobre essa linguagem, não se preocupe.  Mesmo quem nunca utilizou jQuery em suas páginas conseguirá um bom aproveitamento das lições descritas aqui e terá  uma valiosa fonte para futuros estudos.

O que seria jQuery?

jQuery é um Framework do JavaScript. Desenvolvido pelo americano John Resig, um profundo conhecedor da linguagem Javascript e que atua na Mozilla Corporation.
Se você não sabe o que é um Framework, explico: é uma coleção de códigos, (que chamaremos de Biblioteca daqui por diante, ok?) que serve como base para a programação avançada de aplicações, oferecendo uma série de códigos ou funções prontas para realizar tarefas habituais. Os programadores utilizam os frameworks para que eles mesmos não tenham que desenvolver toda hora as mesmas tarefas, já que esses blocos de scripts já foram testados, funcionam e não necessitam ser (re)criados.

Agora que você sabe o que é um Framework, voltemos a John Resig: ele tinha em mente simplificar a forma de programar, dando mais versatilidade ao código e disponibilizando, de forma gratuita, uma ferramenta poderosa para programadores – iniciantes ou não. Sua intenção era dar a uma pagina web muito mais dinamismo e interatividade de forma relativamente mais fácil, contando com a incrível compatibilidade que a biblioteca oferece com sistemas Operacionais e navegadores diversos.

Mas o que você pode fazer com jQuery?

Manipulando essa biblioteca, você poderá:

  • Adicionar animações.
  • Acessar o DOM com muita facilidade.
  • Promover interatividade.
  • Alterar conteúdos e muito mais.

E onde encontrar essa biblioteca?

Visite o site oficial jQuery e conheça a documentação do desenvolvedor, tutoriais e até um fórum de discussão (infelizmente, está disponível somente em inglês, mas nada que um bom tradutor não resolva! Além disso, você pode acompanhar o blog do curso de inglês MicrocampSP que vai te dar aquela força!).
É neste endereço que faremos o download do plugin oficial que usamos neste artigo.

página jQuery

Na página inicial há uma opção para Development.
Marque-a e clique no botão de Download (jQuery).

Em seguida será exibida uma tela, como na figura abaixo.

Código jQuery

Não se assuste, o procedimento é esse mesmo. Salve o plugin no seu computador com um Control+S. De preferência, salve-o dentro de uma pasta criada por você unicamente para esta finalidade. Os arquivos que criaremos mais adiante também deverão ser serão salvos na mesma pasta. Você poderá salvar o plugin com o nome que quiser, mas aconselho a salvar com o nome de “jQuery” mesmo, pois este é o assunto principal deste artigo.

Salvar código como

Com a biblioteca devidamente salva, vamos iniciar os nossos trabalhos.

Criando a página

Abra o Notepad++ (você pode utilizar o seu programa editor de códigos preferido como o Dreamweaver por exemplo, mas caso não possua um programa desses em seu computador, você poderá baixar o Notepad++ gratuitamente). Digite o seguinte código, conforme a ilustração abaixo:

Código HTML

Compreendendo o código:

  • Linha 1: Temos uma identificação da linguagem Html, é por meio dela que iniciamos a criação da nossa página.
  • Linha 2:  Iniciamos a sessão de cabeçalho do nosso documento.
  • Linha 3: Temos a declaração de titulo para nossa pagina, com menção à biblioteca jQuery, o assunto abordado neste post.
  • Linha 4: Finalizamos a sessão de cabeçalho do nosso documento.
  • Linha 5: Iniciamos a sessão body, a parte onde colocamos todo o conteúdo da pagina.
  • Linha 6:  Finalizamos a sessão body.
  • Linha 7: Encerramos a sessão Html.

Após digitar as marcações conforme a ilustração acima, salve seu documento com o nome de index.html.

Obs.: você poderá dar o nome que desejar, mas usamos index.html para indicar que esta pagina que criamos é a pagina principal/inicial. Observação importante: sempre é bom lembrar que é boa prática de programação digitar o nome do arquivo sem espaços e com letras minúsculas, evitando também caracteres especiais.

Após salvar com a extensão apropriada, seu documento ficara assim:

Código HTML e título

Perceba que o Notepad++ exibe as tags Html na cor azul e as informações a serem exibidas no navegador na cor preta.

Agora, vamos inserir o plugin jQuery em nosso documento. Para isso, faremos essa inclusão na sessão de cabeçalho, conforme a ilustração a seguir:

Linha jQuery

Como pode perceber, na linha 4 identificamos o arquivo jQuery, através de um link.

Agora que o arquivo já faz parte do nosso documento, vamos reservar o espaço onde serão inseridos os comandos Javascript com as facilidade da biblioteca jQuery.

Observe a próxima figura:

Finalizando código Javascript

Na Linha 5 iniciamos a sessão do Javascript e na Linha 8  a encerramos.

Links e parágrafos

Vamos criar dois links e um pequeno paragrafo para exemplificar o uso da biblioteca.

Na sessão body do nosso documento, criamos os elementos que serão animados com o uso da jQuery. Para melhorar a visualização do nosso documento e suas marcações, vamos dar alguns espaços somente a fim de ter mais controle de todos os elementos inseridos em nossa pagina Html, veja a seguir:

Inserindo códigos no Body

Poderíamos até mesmo dar mais espaço, visto que eles não são interpretados pelo nosso navegador, a menos que desejássemos dar uma quebra de linha, o que não é a nossa intenção, ainda.

Criando links

Inserindo link

Links são ligações entre paginas, sites ou textos em um documento html. A criação de um link é muito simples, iniciamos com a letra “a” seguido da propriedade “href” e o sinal de igual. Depois, entre aspas simples ou duplas, colocamos o nome da pagina solicitada ou a parte de um documento para onde queremos direcionar o usuário.

Neste link, colocamos o sinal de sharp(#) na propriedade “href”, fazendo com que o nosso link não possua uma ação definida. Ao lado da propriedade “href”, temos a propriedade id.  A esta propriedade daremos o valor “link1”, que servirá de identificador para que possamos aplicar as ações com o uso da biblioteca jQuery. Não se preocupe se não conseguir entender esta parte, continue seguindo os passos que mais adiante tudo se esclarecerá.

Após colocar os links, salve as alterações e abra o arquivo Html que está na pasta. Dê um duplo clique sobre ele, para visualizar o resultado em seu navegador.

Veja como esta o nosso arquivo até este momento:

testando no navegador

Criando um paragrafo

Criando um parágrafo

Abaixo dos nossos links vamos criar um pequeno paragrafo.

Caso queira usar outro texto, fique a vontade, isso não influenciará em nada o nosso tutorial.

Inserindo o jQuery

Comandos jQuery

Os comandos jQuery deverão ser colocados na sessão Javascript que reservamos para isso.

A biblioteca jQuery usa o sinal de cifrão ($) seguido de parênteses, para acessar qualquer elemento em uma pagina. Não esqueça que ao abrirmos parênteses devemos fecha-lo também, isso é uma regra da linguagem Javascript (e da programação em geral) e aplica-se ao jQuery.

Na Linha 6 indicamos que as ações só serão aplicadas quando o documento estiver totalmente carregado.

Acessando um elemento via jquery

Como citamos antes, acessamos os elementos de uma pagina através do sinal de cifrão seguido de parênteses.

$ (‘#nome_do_id’): quando colocamos a propriedade id em uma tag, podemos usá-la como Seletor, que é o elemento que receberá as regras de formatação de uma linguagem. Ou ainda, por meio do jQuery, o elemento no qual aplicamos uma ação para modificar algo em nossa pagina.

Para usar a propriedade Class em uma tag podemos acessar esta classe deste jeito $(‘.nome_da_classe’), – sempre entre aspas, simples ou duplas.

Acessando o id

Acessando o Id

Acessamos o link pelo seu id.

Na Linha 7, acessamos o link com o id de nome link1. O .click simula o evento onclick do Javascript, e quer dizer que ao clicar neste link uma ação acontecerá.

Acessando o parágrafo

Acessando o paragrafo

Na Linha 8 selecionamos o parágrafo e em seguida atribuímos o efeito .show para exibir elementos escondidos. Entre aspas simples ou duplas, podemos colocar a velocidade com a qual ocorrerá o efeito em três valores possíveis, que são: fast (rapido), medium (médio) e slow (lento). Também podemos indicar a velocidade com números, como por exemplo: 200, 300, 400 não sendo necessário coloca-los entre aspas.

Com isso, acessamos o primeiro link e atribuímos o efeito para exibir elementos escondidos. Vamos acessar agora o segundo link para fazer com que elementos que estão sendo exibidos desapareçam. Veja como:

Acessando links

Lembre-se que o segundo link tem o id com o valor link2, veja como o identificamos na linha 12: é praticamente uma cópia do primeiro, com a diferença no nome do id e do efeito!

Após essa etapa,  confira o efeito no navegador:

O resultado final

O paragrafo desaparece com a ação dos links!

Parabéns! Se fez tudo certinho, você conseguiu utilizar o jQuery pela primeira vez! Se gostou, curta e compartilhe com seus amigos! Não esqueça de comentar dizendo o que achou. Espero que tenham curtido e que esses primeiros passos sejam o início de bons trabalhos com o jQuery em suas páginas. Até o próximo post!

Próximo

Postado por

Tenho 29 anos, fiz vários cursos na área de informática dentre os quais me identifiquei muito com Web Design, em especial a programação que trata a parte do raciocínio lógico por trás de todos os sites e programas, atualmente estou fazendo faculdade de Sistema de Informação e estudando modelagem 3D. Leciono na Microcamp de Praia Grande no curso de Web desde de 2010.