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
7 de janeiro de 2008
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
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
Assinar:
Postagens (Atom)