iMasters | Por uma internet mais criativa e dinâmica

• Javascript
• Web Standards
• XHTML

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 4 comentários

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

Todos os artigos de Breno Oliveira

4 comentários publicados

• 1. Boa

  Terça-feira, 17/04/2007, por Wilker Silva

  Ae cara, legal a matéria, eu já tinha visto algumas coisas sobre o jQuery, eu não o uso por um motivo... o jQuery é muito limitado (mesmo tendo la suas extensões)... o jQuery se concentrou muito no trabalho de selecionar e trabalhar com elementos, e isso ele fez muito bem. Mas ele esqueceu que a linguagem JavaScript é carente de muitas outras coisas, e devido a isso eu ainda não troco o uso do Prototype, o Prototype não tem um selector bom como o jQuery, mas ele contém um gama muito boa de recursos para todas as outras partes, como eventos, enumeráveis, dicionários, elementos... de qualquer forma, muito bom o artigo ^^

  Responder comentário

• 2. JQUERY é muito bom mesmo

  Quarta-feira, 18/04/2007, por Fabyo Guimaraes

  Eu acho o Jquery a melhor coisa que ja foi criado, na minha opniao é muito melhor que o prototype, da para fazer inumeras coisas com apenas 1 linha de codigo, é muito facil de mecher, faz com que usuarios leigos façam coisas inovadoras, é cheio de recursos e pra mim jquery reinventou o javascript, vejam esse link uma comparação de jquery com a maioria dos framewokrs, yahoo, prototype etc...
  http://jquery.com/blog/2006/10/18/zebra-table-showdown/ com jquery usou apenas 1 linha de codigo para zebrar uma tabela, eu ja fiz uma função para trocar o tab por enter com 1 linha de codigo etc., pra mim só vejo vantagens em usar ela, é poderosa e quem conhecer nao vai se arrepender de usar
  mais links
  http://forum.imasters.com.br/index.php?showtopic=223155&pid=767832&st=0&#entry767832

  Responder comentário

• 3. Muito bom!

  Sexta-feira, 20/04/2007, por João Victor dos Santos Fonseca

  Bom post, eu não conhecia essa ferramenta ainda, a documentação é muito boa também.

  Responder comentário

• 4. ...

  Terça-feira, 24/06/2008, por wagner vitcoski

  O jquery é sensacional, porém é preciso tomar cuidado em não se atrelar a ele, nada como o bom e velho javascript standart.

  Responder comentário

Sobre o autor

Breno Oliveira desenvolve aplicações para Web há 4 anos utilizando diversas tecnologias, como PHP, Java, JavaScript e ActionScript. Também segue as regras de WebStandard. Atualmente atua como programador da empresa FiberInteractive.

Indique para um amigo

Tags relacionadas

desenvolvimento tecnologia 3g brasil windows mobile php empresa celular gerência google web mercado linux design yahoo seguranca apple microsoft internet ti lançamento photoshop youtube crescimento iphone

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!