7 de janeiro de 2008

Eventos com JQuery

Boa tarde pessoal,

hoje cou mostrar aqui pra vocês como funciona alguns eventos da JQuery.

Bom vamos lá

>CODE <<>

//Aqui é onde inicia nosso código, ou seja, quando o documento for lido rode estes eventos.
$(document).ready(function(){

//Aqui é um exemplo de ultilizar o fade em uma div. Pegue a "div" e vá para o fade zero em animação rápida
$("#id_da_minha_div").fadeTo("fast", 0);

//Aqui é um exemplo de como ocultar uma "div" logo que se inicializa sua página
$("#id_da_minha_div").hide();

//Aqui é um exemplo de um fade após clicar em um botão. Após clicar no botão pegue a "div" e vá para o fade zero em animação lenta
$("#id_do_meu_botao").click(function(){
$("#id_da_minha_div").fadeTo("slow", 0);
});

});


Ráá simples néh?

bom próximo post eu deixo os eventos que podem ser ultilizados dentro das funções..
até mais
;D

2 de janeiro de 2008

Iniciando com a JQuery

Opa, mais um ano se inciando e o serviço continuando kkkk ;D
Vamos intão começar a intender o JQuery

Feito o download do JQuery, basta adicionar em nossa página.

>CODE <<>

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

<!--- Importante que o arquivo jquery.js esteja sendo chamado do
local correto, nesse exemplo ele se encontra detro de uma pasta chamada
'javascript'-->


A JQuery tem uma sintace bem simples e prática
Vamos selecionar todas as tag's 'div' do nosso código:

>CODE <<>

( "div" );


Enquanto no método tradicional seria:

>CODE <<>

document.getElementsByTagName("div");


Bom já deu pra perceber a diferença e praticidade que a JQuery te oferece.
Agora vamos dizer que nos queremos selecionar um 'div com id especifico'

>CODE <<>

( "nome_da_id" );


Bom até aqui foi fácil.
Vamos agora aprender alguns efeitos simples

Utilizaremos 5 efeitos simples:

Esconde todos os 'p' dentro da determinada 'id'
1)
( "p" , "
nome_da_id" ).hide();

Mostra todos os 'p' dentro da determinada 'id'
2) ( "p" , "nome_da_id" ).show();

Mostra todos os 'p' com efeito(lento) de alpha dentro da determinada 'id'
3) ( "p" , "nome_da_id" ).fadeIn("slow");

Esconde todos os 'p' com efeito(lento) de alpha dentro da determinada 'id'
4) ( "p" , "nome_da_id" ).fadeOut("slow");

Mostra ou Esconde todos os 'p' com efeito(lento) até o determinado alpha setado dentro da determinada 'id'
5) ( "p" , "nome_da_id" ).fadeTo("slow", 5);

Espero que gostem ;D
Próximo Post vou ensinar ultilizar esses efeitos dentro de Eventos como ".click"

Até mais ;x