“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.
julho 15, 2009 às 7:11 am
8D Jquery é uma mão na roda! Agiliza muito o desenvolvimento, poupa a gente de ter LER e deixa o código bonito. Fora que a documentação é muito bem escrita e estruturada. Melhor que Jquery, só Jquery.
By the way, no lugar de $(document).ready…, gosto de usar $(function() {});, que faz a mesma coisa \o\
O novo layout daqui ficou muito bom, só pra constar. Cheers!
julho 17, 2009 às 9:57 pm
Oi muito legal seu site, eu tenho alguma experiência com Jquery, acho muito bom, e o que eu aprendi
sobre ready() foi o seguinte:
$(document).ready(function() {});
A linha acima garante que só será iniciado nosso script quando o DOM estiver pronto.
Exemplo:
$(document).ready(function() {
// faça alguma coisa quando o DOM estiver pronto
});
A gente não quer fazer referência a algo que não está lá! Imagine tentar mudar a cor
de algum campo que ainda não foi carregado!
Sem mais,
Muito Obrigado e um abraço.
Jorge Luis de Souza.
Site:http://www.jorgeluis.eti.br
Blog:http://blog.jorgeluis.eti.br
E-mail:contato@jorgeluis.eti.br
julho 18, 2009 às 12:31 am
Oi Jorge e Shino. Fico muito feliz que tenha gostado do site e muito obrigada pelas dicas
julho 21, 2009 às 9:06 pm
Parabéns vc foi a primeira pessoa que explicou de forma clara o que é o jquery, vlw
julho 22, 2009 às 12:45 am
Oi Samira, que bom que minha explicação tenha lhe ajudado a entender sobre Jquery.
julho 28, 2009 às 9:29 pm
Uso jQuery desde o lançamento e vc mandou uma dica q eu nunca vi ngm usar, e eu tb nunca tinha percebido, usar o noConflict() acorrentado e no final do código, farei isso sempre! =)