Nenhum usuário logado Login / Cadastro
   Seu navegador está desatualizado e não possui capacidade para visualizar todos os recursos deste Site
   Recomendamos Mozilla Firefox, Chrome e Safari.
aguarde

Curso jQuery

28/03/2013

Se você está lendo esse artigo já deve saber o que é e para que serve o JQuery, mas de qualquer forma vou tentar explicar.

JQuery é uma biblioteca Javascript que é usada no desenvolvimento de páginas e sistemas WEB,  tem como objetivo auxiliar na manipulação de elementos para tornar a navegação uma experiência mais agradável e dinâmica e de certa forma substitue por algumas vezes problemático Flash.

É muitas vezes usada para fazer slideshow, galeria de imagens, animar formulário, etc...

Exemplo:

Vamos supor que haja um formulário para cadastro de uma pessoa, nele vai haver vários campos,  se a pessoa marcou que não tem filhos,  não tem porque aparecer o campo "número de filhos", correto?

Então podemos utilizar o JQuery para omitir o campo "número de filhos" e mostra-lo apenas se a pessoa selecionar que tem filhos, dá pra fazer isso usando apenas o PHP ou ASP, mas para isso a página teria que ser recarregada varias vezes dependendo do formulário.

r JQuery também pode ser usado para verificação de preenchimento, por exemplo, se um campo numérico é preenchido com uma letra é possível exibir um erro no momento do preenchimento, se usarmos apenas o PHP essa verificação tem que ser feita depois do envio do formulário, lá no servidor consumindo tempo e recurso.

Enfim, é mais ou menos isso... vamos para um exemplo prático.

Estou assumindo que você conhece HTML e sabe construir uma página simples, se não souber talvez esta não seja a hora de aprender JQuery, em breve criarei material que ensine HTML básico.


Obtendo a biblioteca jQuery


Primeiro temos que baixar a biblioteca no site: http://docs.jquery.com/Downloading_jQuery , neste momento a ultima versão é a 1.9.1.

Não se assuste se ao invez de ser oferecido um arquivo para download abrir uma página cheia de código Javascript, é isso mesmo, copie esse código e cole num arquivo de texto (plano) , crie um nome sugestivo tipo jquery-1.9.1.js e salve junto com o código de sua página.
 

Adicionando a biblioteca ao código de sua página


Entre as tags  head ("< head >") adicione a referencia a biblioteca que você baixou anteriormente:

Tem que ser o caminho certinho, se você colocar o código em uma pasta ex: js você tem que colocar o caminho, ex:

Se você nomear o arquivo como "jquery-1.9.1.js" e  gravá-lo diretório js ficaria assim:


Escrevendo seu codigo


Voce pode escrever seu codigo direto no aquivo que exibira os efeitos ou pode criar um arquivo separado, se optar pela segunda opçao voce deve referenciar esse arquivo como fez com a biblioteca, ex:


(supondo que seu arquivo chame meuscript.js)

Se optar por escrever o código no mesmo arquivo de sua página ele tem que ficar entre as tags script, ex:

Vamos começar......

Coisas que você precisa saber:

Quase sempre o código jQuery deve ser colocado dentro dessa estrutura:

jQuery( document).ready(function(){
  /*  AQUI Ó  */
});


Isso fará com que o código seja executado apenas quando a página estiver carregada e pronta, evita erros.

Outra coisa que deve saber: tudo que estiver entre /*  */ não é executado, é comentário, ok?

O jQuery precisa encontrar o elemento que ele vai trabalhar, para isso é fundamental que esse elemento tenha uma identificação (id,class) ex:

Para eu referenciar essa div eu uso:

jQuery('#minhadiv')

nota: o # é porque demos um id para a div, se fosse uma classe usáriamos o ponto (.), aí ficaria assim:

n

jQuery('.minhadiv')

Se eu quiser fazer alguma coisa se alguém clicar nela eu uso o elemento .click, fica assim:

jQuery('#minhadiv').click( function(){
     /* o que estiver aqui vai acontecer quando eu clicar na div "minhadiv" */
} );

Vamos fazer a minhadiv desaparecer quando alguém clicar nela, usaremos o elemento .hide, vai ficar assim:

jQuery('#minhadiv').click( function(){
   jQuery('#minhadiv').hide();
} );

Agora ela tem que aparecer, né? Vamos criar outra div para auxiliar:

Temos as duas divs agora uma vai sumir e a outra ao ser clicada var trazer de volta a sumida:

Vamos para o script

jQuery('#minhadiv'). click( function(){
   jQuery('#minhadiv').hide();
});

/* Nota: para exibir usamos o elemento .show */

jQuery('#mostra_minhadiv').click( function(){ /* AO CLICAR NESSA DIV */
   jQuery('#minhadiv').show(); /* MOSTRE ESSA DIV */
} );

Olha isso funcionando aqui:   http://jeitodigital.com.br/exemplos/jquery_a1/teste.html

r Faça o download dos arquivos:  jQuery básico

O seu não funcionou? Se precisar de ajuda entre em contato pelo Site  ou por e-mail contato@jeitodigital.com.br

Funcionou! Parabéns.

Extra

Agora você pode testar outros efeitos al& eacute;m de .hide  e .show.

Tente trocar o .show por .fadeIn(3000) , isso fara com que ao invez de aparecer repentinamente a div apareça suavemente, o 3000 significa 3000 milisegundos, pode alterar esse valor avontade.

Lista de efeitos jQuery

.show() Mostra um elemento

.hide() Oculta.

.fadeIn()  Mostra  suavemente

.fadeOut() Oculta suavemente

.slideDown() Mostra deslizando verticalmente.

.slideUp() Oculta deslizando verticalmente.

.slideToggle() Mostra ou oculta deslizando verticalmente dependendo se o elemento está visível ou não.

Em breve postarei mais sobre o assunto

VEJA TAMBÉM



 

 

 

Comentários


Voltar
 
Desenvolvido por JeitoDigital  
Jeito Digital - - ©2012 - Todos os direitos reservados
w3c html5 acesso restrito Free DNS