Jquery, introdução

O jQuery, é uma das melhores coisas que aconteceram nos últimos anos em termos de programação. A Linguagem jQuery é rápida e concisa, ao utilizala, tornamos o site extremamente poderoso, funcional e atractivo.

Neste post vou mostrar uma introdução ao Jquery, motivos para utiliza-lo no desenvolvimento de um web site.

Vantagens:

  • Compatibilidade com qualquer navegador;
  • Seu peso é bem leve ficando em torno de 20kb(comprimido);
  • Otimização de código, você evita de programar linhas e linhas de código;
  • Você consegue acessar a qualquer elemento ou combinações de elementos;
  • Possui diversos efeitos visuais para deixar seu site mais atraente.

Introdução

Primeiramente acesse este link http://docs.jquery.com/Downloading_jQuery, e faça o download da versão mais recente da JQuery. De prefencia baixe a versão comprimida.

Após ter efetuado o download bastar inserir o jquery entre os heads do seu html

[code language=”html”]
<script type="text/javascript" language
="javascript" src="javascript/jquery.js"></script>

[/code]

Utilizando

O uso do jQuery é bem simples, digamos que você queira selecionar todas as tgs ‘div’.

Em javascript

[code language=”javascript”]
document.getElementsByTagName("div");
[/code]

Em jQuery:

[code language=”javascript”]
("div");
[/code]

Seguindo o exemplo acima já podemos ter uma noção da simplicidade do uso do jQuery. Agora supomos que vc queira selecionar não todas as divs, mas outro elemento pelo id ou pela classe.

[code language=”javascript”]

// pela id conteudo
("#conteudo");

// pela classe link
(".link");

//um link com a classe titulo
("a.titulo");

//selecionando todas as div com a classe menu que estão dentro da div conteudo
("#conteudo div.menu");
//ou
("div.menu", "#conteudo");

[/code]

A estrutura segue este padrão bem simples. Sem muita complicação.

Bom agora vejamos como utilizar efeitos no jQuery.

[code language=”javascript”]

// escondendo um elemento
("#id_do_elemento").hide()

// mostrando o elemento
("#id_do_elemento").show()

[/code]

No exemplo acima temos
(“#id_do_elemento”) = refencia ao elemento
hide(“slow”) = efeito

O jQuery conta também com efeitos do tipo fadeIn, fadeOut e fadeTo

[code language=”javascript”]
("p").fadeIn("slow");
("p").fadeOut("slow");
("p").fadeTo("slow");
[/code]

Eventos

Agora queremos um elemento que ao clicarmos nele dispara um evento em outro elemento.

Estrutura html

[code language=”html”]

<a href="#" class="mostra">mostrar div</a>

<div id="recebe" style="display:none;">estou mostrando esta div</div>

[/code]

Estrutura jQuery

[code language=”javascript”]
$(document).ready(function(){
$("a.mostra").click(function(){
$("#recebe").show();
});
});
[/code]

Exemplo:
mostrar div

O que foi feito é bem simples, pegamos a tag de link “a” com a classe “mostra” e adicionamos uma acão ao ser clicado “.click(function(){ }) ;”, dentro da função instanciamos o elemento de id “recebe“, adicionando o efeito de show();

O jQuery é bem dinamico e ainda possibilita a manipulação de objetos DOM, Ajax, validação de formulário e muitos outros efeitos.

Por hoje é tudo pessoal, logo estarei postando aqui mais funcionalidades do jQuery.

1 comentário

Deixe um comentário

O seu endereço de e-mail não será publicado.