Ana Claudia

Programação e Design Web

Uma breve introdução sobre jQuery

posted by Ana Claudia On julho - 13 - 2009 6 COMMENTS

“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.

Site Oficail:

http://docs.jquery.com

Leitura Recomendada:

jQuery In action, de Bear Bibeault e Yehuda Katz

Categories: HTML, Javascript

6 Comments

  1. 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!

  2. 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

  3. Oi Jorge e Shino. Fico muito feliz que tenha gostado do site e muito obrigada pelas dicas :D

  4. Parabéns vc foi a primeira pessoa que explicou de forma clara o que é o jquery, vlw

  5. Oi Samira, que bom que minha explicação tenha lhe ajudado a entender sobre Jquery.

  6. 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! =)

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Comentários Recentes

  • Hugo: conseguir peço desculpas pra vc an
  • Hugo: podemos falar no msn se vc poder é
  • Hugo: vc quer todos os codigos? ou basta
  • Hugo: cara ana claudia estou adorando aqu
  • Ana Claudia: Gente havia um erro no script,no ar
  • Hugo: certo relamente errei feio salvei o