Facilitando a vida com jQuery
Autor: Márcio Tadeu | Publicado: 2011-07-25T09:00:00-03:00


Uma das primeiras coisas para fazer uma web mais interativa é utilizar javascript. Desde os seus primórdios, essa linguagem de programação já começava a dar uma certa revolucionar no modo em que visualizávamos  os sites. Era uma animação aqui, uma mensagem na tela, uma validação de formulário e a coisa foi ficando cada vez mais interessante. A vantagem disso tudo, é que isso se dava no lado do cliente, são interações resolvidas pelo navegador.



É neste ponto que alguns problemas aparecem. Como uma briga de forças, Microsoft de um lado com o Internet Explorer e o resto do mundo do outro, estabeleceu ali algumas disputas. Como nem tudo é padronizado, e pra piorar cada navegador entende de um jeito, programadores se viravam com essa linguagem, testando em um browser, testando em outra, vendo o que funcionava em um o que não funcionava em outro. E no meio dessas brigas surgiram ao longo do tempo, diversas frameworks para facilitar ainda mais desenvolver algo em javascript. Algumas mais populares do que outras, mas no geral, todas buscam facilitar escrever e entender o script, e algumas trazendo uma compatibilidade incrível em todos os navegadores.



E porque escolhi adotar e falar do jQuery? Para mim, é a framework mais popular existente. Com isso, ganhamos tempo não reinventando a roda porque existem inúmeros plugins, ajax se faz em poucas linhas, validação de formulário, caixas de diálogo, iframes, datagrid, e outras coisa que se faz de uma maneira mais simples e prática. O lema do jQuery é "Escrever menos e fazer mais". Além da facilidade de encontrar plugins, como é uma das frameworks mais utilizadas, mais pessoas podem te ajudar a resolver ou pelo menos dar o caminho das pedras para o seu problema.



Só para ter um pequeno exemplo, ao invés de document.getElementById('idCampo').value, temos $("#idCampo").val() uma pequena redução e um maior entendimento do código. Com jQuery, podemos separar o que é html do que é javascript, organizando melhor o nosso código. Fazemos isso da seguinte maneira:





$(document).ready(function() {
    //Aqui dentro colocamos todo o código javascript
});
&nbsp;


Desta forma, começamos a separar tudo que é html de javascript. Dentro do evento ready, podemos adicionar diversos comando que seriam inseridos no meio das tags html formando aquela linguiça incrível. Um exemplo disso são os eventos onclick, onchange, onblur que colocamos nome meio do código, e depois para ver o que você fez ou dar uma manutenção naquilo fica difícil. Vejamos alguns exemplos



&lt;input type='text' name='nomeCampo' id='idCampo' onchange='alert("Mensagem");'&gt;



com jQuery isso se separaria da seguinte forma:



&lt;script language='javascript'&gt;
$(document).ready(function() {
&nbsp;&nbsp;&nbsp; $("#idCampo").change(function(){
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; alert("Mensagem2");
&nbsp;&nbsp;&nbsp; });
});
&lt;/script&gt;
&lt;input type='text' name='nomeCampo' id='idCampo'&gt;



A uma primeira vista, pode parecer que ficou mais complicado, mas a medida que começamos a separa tudo que é html do script, o entendimento fica muito mais fácil. Quando temos que dar manutenção ou souber o que foi feito, ele está sempre no mesmo lugar. Outro exemplo é adicionar ou remover classe. Fazemos isso simplesmente com o event addClass ou removeClass. Uma coisa que facilita bastante também é quando você quer fazer algo em todos os elementos do código. Utilizamos assim os seletores do jQuery. Alguns exemplos:



$("a"); // Pega todos os links da página....

$("a").click(function(){alert("teste");}); // Qualquer link ele manda alerta teste



Ou entao:



$("a").click(function(){alert($(this).attr("nome"));}); // Pega o atributo nome quando se clica no link

&lt;a href="#" nome="joao"&gt;teste&lt;/a&gt;
&lt;a href="#" nome="maria"&gt;teste&lt;/a&gt;
Neste caso ira dar um alert escrevendo joao ou maria, dependendo do link



Acessar&nbsp; qualquer coisa fica mais fácil com jQuery. Exemplos:



$("option:even");&nbsp; // Pega os elementos de índice par. Se fosse ímpar, apenas troque even por odd

$("li:first"); //Pega o primeiro ítem da lista. Do mesmo jeito, last pega o utilmo ou eq(numeroIndice) pega o equivalente que você colocar.
$("input:text").val("campovalor"); //Seta atributo valor para TODOS os campos input type='text'
$("input[nomeAtributo=conteudoAtributo]").val("campovalor"); //Altera o valor de todos os inputs que tem o atributo nomeAtributo=conteudoAtributo



E por aí vão as inúmeras possibilidade com jQuery. O melhor de tudo que&nbsp; é compatível com navegadores de diferentes verões. Claro que existem alguns plugins que necessitam de configurações mínimas, mas no mais é aproveitas essa ferramenta.&nbsp;



Vale a pena dar uma conferida e aprofundar sobre jQuery. Esta é apenas uma pincelada sobre o mundo que se abre com essas facilidades. Você pode ter um código mais limpo, menor e um efeito visual incrível em sua página. Não adianta termos apenas algo que funciona, tem que ser bonito para impressionar quem queremos. E nisso, o jQuery e seus plugins nãos nos decepciona.