o simbolo $.7. EFEITOS JQUERY7.1 Mostrar e Esconder ( hide(), show() )Com jQuery e possivel mostrar, esconder elementos HTML com estas funcoes.123456$("#hide").click(funcao(){ $("p").hide();});$("#show").click(funcao(){ $("p").show();});Ambos podem funcionar em conjunto com parametros opcionais: speed e callback.123$(selector).hide(speed,callback)$(selector).show(speed,callback)O parametro speed especifica a velocidade de mostrar/esconder, e pode ter os valores slow, normal, fast ou em milisegundos:12345$("botao").click(funcao(){$("p").hide(800);));O parametro callback e o nome de uma funcao a ser executada depois da funcao hide/show estar completa.7.2 Alternar ( toggle() )O metodo toggle() permite alterar a visibilidade de elementos HTML que usam a funcao show/hide. Os elementos escondidos sao mostrados, e os elementos visiveis sao escondidos.1$(selector).toggle(speed,callback)Tal como referido anteriormente, o parametro speed aceita valores slow, normal, fast ou em milisegundos.12345$("botao").click(funcao(){$("p").toggle(850);));7.3. Deslizar ( slideDown(), slideUp(), slideToggle() )Os metodos de deslizamento do jQuery alteram gradualmente a altura dos elementos seleccionados, atraves dos seguintes metodos12345$(selector).slideDown(speed,callback)$(selector).slideUp(speed,callback)$(selector).slideToggle(speed,callback)Mais uma vez, relembro que o parametro speed aceita valores slow, normal, fast ou em milisegundos.O parametro callback e o nome de uma funcao a ser executada depois da funcao hide/show estar completa.7.3.1 Exemplos PraticosslideDown()12345$("flip").click(function(){ $(".panel").slideDown();));slideUp()12345$("flip").click(function(){ $(".panel").slideUp();));slideToggle()12345$("flip").click(function(){ $(".panel").slideToggle();));7.4 Desvanecer ( fadeIn(), fadeOut(), fadeTo() )Os metodos de desvanecer alteram gradualmente a opacidade dos elementos seleccionadosjQuery tem os seguintes metodos de desvanecimento:12345$(selector).fadeIn(speed,callback)$(selector).fadeOut(speed,callback)$(selector).fadeTo(speed,opacity,callback)Os parametros de speed e callback sao os mesmos de anteriormente, e o parametro opacity permite desvanecer para uma opacidade escolhida, como ira ser demonstrado no exemplo mais a frente.7.4.1 Exemplos praticosfadeIn()12345$("botao").click(funcao(){ $("div").fadeIn(2000);));fadeOut()12345$("botao").click(funcao(){ $("div").fadeIn(2000);));fadeTo()12345$("botao").click(funcao(){ $("div").fadeTo("slow",0.30);));7.5 Animacoes jQueryAs animacoes sao introduzidas atraves do seguinte codigo1$(selector).animate({parametros},[duracao],[e asing],[callback])O parametro chave e parametros onde irao ser introduzidas propriedades CSS que vao ser animadas. Podem ser animadas varias propriedades ao mesmo tempo.1animate({width:"60%",opacity:0.3,marginTop:"0.3in",fontsize:"2em"})O segundo parametro e a duracao, que define o tempo da animacao. Aceita valores slow, fast, normal e em milisegundos.Vejamos um exemplo:12345678910111213<script type="text/javascript">$(document).ready(funcao(){ $("botao").click(funcao(){ $("div").animate({left:"29px"},"slow"); $("div").animate({fontsize:"4em","slow"); ));));1</script>7.6 Exemplos de efeitos jQuery12345678910111213141516171819$(selector).hide()$(selector).show()$(selector).toggle()$(selector).slideDown()$(selector).slideUp()$(selector).slideToggle()$(selector).fadeIn()$(selector).fadeOut()$(selector).fadeTo()$(selector).animate()8. FUNCAO CALLBACKVamos agora ficar a conhecer o que e o callback em jQuery.A funcao callback e executada depois de a animacao estar concluida. As declaracoes Javascript sao executadas linha-a-linha. No entanto, com as animacoes, a proxima linha de codigo pode ser executada mesmo que a animacao nao esteja concluida, o que pode levar a erros. Para prevenir estas situacoes, cria-se a funcao callback. Esta nao sera chamada antes de animacao estar terminada.Exemplo:123$("p").hide(1000,function(){ alert("O paragrafo foi escondido");});9. MANIPULACAO HTMLjQuery tem ferramentas muito poderosas que permitem alterar e manipular atributos e elementos HTML.9.1 Alterar conteudo HTMLUtilizando esta sintaxe $(selector).html(content) alteramos o conteudo de um dado parametro.1$("p").html("Escola de Criatividade");9.2 Adicionar conteudo HTMLUtilizando a sintaxe $(selector).append(content), pode-se anexar informacao aos elementos seleccionados.Utilizando a sintaxe $(selector).prepend(content), pode-se des-anexar informacao dos elementos seleccionados.12$("p").append("Escola de Criatividade");$("p").prepend("Escola de Criatividade");9.3 Inserir conteudo depois de elementos HTMLUtilizando a sintaxe $(selector).after(content) pode ser introduzido conteudo depois do elemento escolhido.1$("p").after(" Escola de Criatividade.");9.4 Inserir conteudo antes de elementos HTMLUtilizando a sintaxe $(selector).before(content) pode ser introduzido conteudo antes do elemento escolhido.1$("p").before("Escola de Criatividade.");10 METODOS CSS10.1 Metodo css()jQuery tem um metodo bastante importante para manipulacao CSS que e css(). Tem tres sintaxes diferentes:css(nome) Devolve o valor de uma propriedade CSScss(nome,valor) Define um valor numa propriedade CSScss({propriedades}) Define multiplos valores em multiplas propriedades10.2 Devolver propriedade CSSUtilize o metodo css(nome) para devolver uma propriedade CSS escolhida, que sera extraida