Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 75 postagens
Mais de 75 postagens
Tópico Autor
Mensagens: 96
Nome: Júnior
Descrição do site: Voltado para o Desenvolvimentos de Sistemas
Localização: Goiania
Contato:

Iniciando com jQuery

04-02-2009 11:58

fonte: http://www.htmlstaff.org/ver.php?id=21509
Qual é a vantagem de utilizar ela?

Creio que podemos fazer uma lista:

* Compatibilidade com qualquer navegador;
* Seu peso é bem leve ficando em torno de 20 KB (compactada);
* 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

Feito o download do arquivo, basta adicionar o arquivo na sua página.

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

( "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 tags '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.

Referências:

* http://docs.jquery.com/Main_Page;
* http://www.visualjquery.com/1.1.1.html
0

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado