Rafael Barros
-
09:43:13 pm on February 22, 2008 | # |
Entendendo: Bom confesso que quando se fala em FrameWork é natural rejeitar, mas quando se entende o conceito, fica tudo mais colorido! Bom a começar que o jQuery é um facilitador na sua nada mole vida caro developer. Entenda que ele está ai para te ajudar, em sua proposta original temos a brilhante definição “Pense Mais, Codifique Menos”, tentador não?!
Começando: Para começar a brincar sugiro que você entre na sessão de Downloads e baixe os arquivos, basicamente ele se separa em 2 versões (uncompressed e packed), respectivamente temos a versão para testes e estudos onde é possivél ver seu codigo fonte lá bonitinho e comentado (70kb) e em seguida a versão com as mesmas funcionalidades porém comprimida (23kb), obviamente você coloca este em produção.
Brincando: Agora você vai garfa uma página qualquer (ver código fonte, ctrl+c, ctrl+v) , uma dica boa é pegar uma página de algum portal grande, pois tem lá um código todo semântico, dá até gosto!! Melhor ainda se você garfar uma página de conteúdo interresante, para os homens aconselho ensaios de petecas. Feito isso você já tem o Jquery e um ambiente para brincar, agora basta você traçar os objetivos, análise a arquitetura e pire na maionese literalmente. Pensa! Pensa! Pensa!
Esquentando: Para instalar o jQuery basta dar include no arquivo.js que você baixou de preferência dentro da TAG <header></header>, simples assim. Working…
Eventos: Dá um funçadinha aqui, ai você vai começar a enteder como selecionar os elementos htmls e o que é possivél fazer como eles. O que antes era assim (document.getElementById(’rafa’)) fica assim $(’#rafa’) - O que era (document.getElementByClass(’barros’)) fica assim $(’.barros’) - Esconder o elemento #rafa fica assim $(’#rafa’).hide(); agora com efeito $(’#rafa’).hide(’slow’) - E para aparecer o RAFA - $(’#rafa’).show() ahh mas assim seco?? Agora com efeito $(’#rafa’).show(’slow’) Ai tu vai pirando mais!! E se cada vez que eu chamar certa função, o que estiver escondido deve aparecer e o que estiver aparecendo quero que desapareça é simples rafa?? Opa dá para resolver em uma linha $(’#rafa’).toggle() mas está muito com cara de display/none e display/block tá bom agora com efeito $(’#rafa’).toggle(’slow’) tá lerdo?! Se liga nessa então $(’#rafa’).toggle(’fast’) uhuuu aeee agora sim??!!
Principios Básicos: Brincar de jQuery é simples assim a coisa vai ficando legal de acordo com suas pirações, conforme você vai dominando o básico você vai querer mais e mais. Mas não esqueça dos principios básicos de JS, Quando você executa uma ação o elemento deve estar carregado na tela, você resolve isso de 2 maneiras fazendo funções e na interação do usuário dispara as funcionalidades do jQuery sobre o elemento ou ainda você pode disparar os evento no onLoad da página que no jQuery fica assim: $(function(){ //coloca aqui seus eventos }); Ai quando a página carregar por inteiro ele dispara.
Concluindo: Se você gostou e se interresou a brincadeira não para por ai não meu caro, você pode ainda turbinar o seu jQuery com alguns plugins e deixar a brincadeira ainda mais crocante. Veja alguns demos de plugins e tire suas conclusões.