Faltam 3 dias! Inscreva-se agora! O maior encontro de profissionais web da américa latina.

Olá pessoal. Vamos falar um pouco sobre uma biblioteca javascript que vem conquistando muitos desenvolvedores, que é a JQuery. Todos que desenvolvem em JavaScript sabem que é uma dor de cabeça tornar o código compatível com qualquer navegador.

Qual é a vantagem de utilizar ela?

Creio que podemos fazer uma lista:

• Compatibilidade com qualquer navegador;
• Seu peso é bem leve ficando em torno de 20kb(compressed);
• 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.

Iniciando com a JQuery

Faça o download da versão mais recente da JQuery http://docs.jquery.com/Downloading_jQuery.

<script type="text/javascript" language
="javascript" src="javascript/jquery.js"></script>

A sintaxe da JQuery

Suponha que você queira selecionar todas as tag's div, seu código seria o seguinte:

( "div" );

Quanto no método tradicional, você teria de usar :

document.getElementsByTagName("div");

Esse exemplo bem básico já demonstra a simplicidade da JQuery e o tempo que você pode economizar utilizando ela.

Agora suponhamos que você queira selecionar uma div com um id em específico.

( "id_da_div" );

Bom, mas até agora não fizemos nada de interessante. Suponhamos que você queira esconder todas as Tag's 'p' de um local em específico.

( "p" , "id_da_div" ).hide();

Fácil, não é? E para fazer o inverso é bem fácil, e também intuitivo. Basta usar .show();

A JQuery ainda conta com efeitos do tipo fadeIn, fadeOut e fadeTo.

("p").fadeIn("slow");
("p").fadeOut("slow");
("p").fadeTo("slow", 0.5);

Eventos com JQuery

Mas até agora o que vimos de JQuery não se trata muito do nosso dia-a-dia. A biblioteca da JQuery é tão poderosa que nos permite manipular eventos JavaScript (onclick,onmouseout,etc) e nos permite adicionar esses eventos aos objetos.

Agora queremos adicionar um botão que, quando clicarmos nele, irá aplicar fadeOut em outro elemento. Nosso HTML seria:

<div id="menu">
	<p>www.vipertech.com.br</p>
</div>

<button id="botao">Clique aqui</button>

Nosso código JQuery seria somente:

"botao").click( function() {
	( "p", "menu" ).fadeOut ("slow");
});

O que estamos fazendo é bem intuitivo. Como explicado já anteriormente, pegamos o objeto de id "botao" e adicionamos uma função (function) que irá chamar o efeito de fadeOut. Tudo isso em apenas 3 linhas de código. Poderíamos adicionar outros eventos como já mencionei antes.

Manipulando Objetos DOM

A JQuery ainda nos permite manipular objetos DOM com ela. Vamos ainda utilizar o exemplo acima:

("botao").click( function() {
	( "p", "menu" ).text('Breno Henrique Duarte de oliveira');
});

Assim podemos demonstrar a facilidade de utilizar a biblioteca do JQuery.

Na JQuery temos uma função que funciona de maneira similar a innerHTML:

("div").html("<b>Novo Nó HTML</b>");

Podemos manipular atributos de uma imagem por exemplo. Podemos mudar sua src:

("botao").click( function() {
	("img").attr("src","img/editar.png");
});

O código acima vai alterar o src de todas as imagens. Mas você pode colocar um ID na imagem e apenas alterar a imagem que você queira.

Você passa como primeiro parâmetro o atributo e depois o novo valor.

Aqui só mostrei algumas coisas que a JQuery é capaz de fazer em apenas algumas linhas de código. Claro que você pode fazer tudo o que foi mostrado aqui utilizando outras bibliotecas ou o próprio DOM com CSS, porém vale a pena você conferir e utilizar a JQuery. Ele é bem leve e com um leque de recursos úteis.

http://docs.jquery.com/Main_Page

Espero que tenham gostado.

Até a próxima e visitem meu blog www.vipertech.com.br...