Faça o download da versão mais recente da JQuery http://docs.jquery.com/Downloading_jQuery.
Feito o download do arquivo, basta adicionar o arquivo na sua página.
1.<script type=”text/javascript” language=”javascript” src=”javascript/jquery.js”></script>
A sintaxe da JQuery
A JQuery tem uma sintaxe bem simples e intuitiva.
Suponha que você queira selecionar todas as tag’s div, seu código seria o seguinte:
1. ( “div” );
Quanto no método tradicional, você teria de usar :
1. 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.
1. ( “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.
1. ( “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.
1. (”p”).fadeIn(”slow”);
2. (”p”).fadeOut(”slow”);
3. (”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:
1. <div id=”menu”>
2. <p>www.webartz.com.br</p>
3. </div>
4. <button id=”botao”>Clique aqui</button>
Nosso código JQuery seria somente:
1. (”botao”).click( function() {
2. ( “p”, “menu” ).fadeOut (”slow”);
3. });
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:
1. (”botao”).click( function() {
2. ( “p”, “menu” ).text(’Texto que voce deseja’);
3. });
Assim podemos demonstrar a facilidade de utilizar a biblioteca do JQuery.
Na JQuery temos uma função que funciona de maneira similar a innerHTML:
1. (”div”).html(”<b>Novo Nó HTML</b>”);
Podemos manipular atributos de uma imagem por exemplo. Podemos mudar sua src:
1. (”botao”).click( function() {
2. (”img”).attr(”src”,”img/editar.png”);
3. });
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.
