Uma breve introdução sobre jQuery
“Writre Less, do more”, em tradução livre:”Escreva menos, faça mais”, esse é o lema do jQuery. Esse poderoso e largamente utilizado frameworrk de Javascript pode realmente reduzir um código gigante de JS em apenas poucas linhas de uma forma extremamente simples, tudo o que você precisa é um pouco de conhecimento de Javascript. Se o assunto começou a lhe interessar , então continue lendo porquê vai ficar mais interessante.
O Jquery surgiu em janeiro de 2006, e embora seja razoalvelmente novo, possui funções que vem atraindo cada vez mais desenvolvedores do mundo inteiro. Além do framework padrão do jQuery, é possível extender suas funcionalidades através de plugins disponíveis no site oficial do Jquery. A atual versão é a 1.3 e já possui muitas melhorias em relação a versão anterior, dentre uma delas a de funcionalidades de plugins intríseca no framework.
Escrevendo as primeiras linhas
A primeira coisa a ser feita é baixar o framework jQuery para seu computador e em seguida devemos refereciar esse framework através de um include JS:
1 | <script src="jquery-1.3.min.js" type="text/javascript"></script> |
Agora já podemos utilizar o JQuery. Todos os comandos JQuery devem começar com “jQuery” ou com “$” que é uma espécie de atalho.
EX:
1 2 3 4 5 | <script type="text/javascript"> $.(document).ready(function() { } </script> |
A função acima é utilizada para carregar tudo que estiver dentro dela antes do carregamento do HTML.
Seletores
OS seletores são utilizados para referenciar objetos HTML de uma maneira mais simples que o Javascript convencional, como por exemplo objetos HTML com atributos id.
1 | <div id="div1">Qualquer Texto</div> |
Para manipular o exemplo acima com JS convencional ficaria da seguinte forma:
1 | document.getelementById("div1"); |
Com o jQuery ficaria assim:
1 | $("#div1"); |
Para exibir o texto dessa div num alert poderia ser feito da seguinte forma:
1 | alert($("#div1).html()); |
E para classes seria da seguinte forma:
1 | $(".classe"); |
E para objetos:
1 | $("p"); |
Quem utliza o CSS vai perceber que a sintaxe para refereciar objetos e atributos id e class é bem semelhante, e na verdade é exatemente essa ideia do jQuery, padronizar atributos e objetos.
Confiltos do jQuery com outras biobliotecas
Algums frameworks JS, quando utlizados em conjunto com jQuery, como prototype, podem criar confiltos com jQuery devido ao uso de “$” nos framework utilizados. Existem algumas medidas que podem evitar esse conflito como o uso da palavra “jQuery” ao invés de “$” no inicio de funções ou a expressão noConflict() no final das funções.
Ex:
1 2 3 4 5 | <script type="text/javascript"> $.(document).ready(function() { }.noConflict(); </script> |
Com esses exemplos já vimos que o jQuery pode simplificar muito o código, e isso é só o começo. Para saber mais, acesse a documentação (em inglês) do jquery.
