O jQuery, \u00e9 uma das melhores coisas que aconteceram nos \u00faltimos anos em termos de programa\u00e7\u00e3o. A Linguagem jQuery \u00e9 r\u00e1pida e concisa, ao utilizala, tornamos o site extremamente poderoso, funcional e atractivo.<\/p>\n
Neste post vou mostrar uma introdu\u00e7\u00e3o ao Jquery, motivos para utiliza-lo no desenvolvimento de um web site.<\/p>\n
Primeiramente acesse este link http:\/\/docs.jquery.com\/Downloading_jQuery<\/a>, e fa\u00e7a o download da vers\u00e3o mais recente da JQuery. De prefencia baixe a vers\u00e3o comprimida.<\/p>\n Ap\u00f3s ter efetuado o download bastar inserir o jquery entre os heads do seu html<\/p>\n [code language=”html”] [\/code]<\/p>\n O uso do jQuery \u00e9 bem simples, digamos que voc\u00ea queira selecionar todas as tgs ‘div’.<\/p>\n Em javascript<\/p>\n [code language=”javascript”] Em jQuery:<\/p>\n [code language=”javascript”] Seguindo o exemplo acima j\u00e1 podemos ter uma no\u00e7\u00e3o da simplicidade do uso do jQuery. Agora supomos que vc queira selecionar n\u00e3o todas as divs, mas outro elemento pelo id ou pela classe.<\/p>\n [code language=”javascript”]<\/p>\n \/\/ pela id conteudo \/\/ pela classe link \/\/um link com a classe titulo \/\/selecionando todas as div com a classe menu que est\u00e3o dentro da div conteudo [\/code]<\/p>\n A estrutura segue este padr\u00e3o bem simples. Sem muita complica\u00e7\u00e3o.<\/p>\n Bom agora vejamos como utilizar efeitos no jQuery.<\/p>\n [code language=”javascript”]<\/p>\n \/\/ escondendo um elemento \/\/ mostrando o elemento [\/code]<\/p>\n No exemplo acima temos O jQuery conta tamb\u00e9m com efeitos do tipo fadeIn, fadeOut e fadeTo<\/p>\n [code language=”javascript”] Agora queremos um elemento que ao clicarmos nele dispara um evento em outro elemento.<\/p>\n Estrutura html<\/p>\n [code language=”html”]<\/p>\n <a href="#" class="mostra">mostrar div<\/a><\/p>\n <div id="recebe" style="display:none;">estou mostrando esta div<\/div><\/p>\n [\/code]<\/p>\n Estrutura jQuery<\/p>\n [code language=”javascript”] Exemplo:
\n<script type="text\/javascript" language
\n="javascript" src="javascript\/jquery.js"><\/script><\/p>\nUtilizando<\/h3>\n
\ndocument.getElementsByTagName("div");
\n[\/code]<\/p>\n
\n("div");
\n[\/code]<\/p>\n
\n("#conteudo");<\/p>\n
\n(".link");<\/p>\n
\n("a.titulo");<\/p>\n
\n("#conteudo div.menu");
\n\/\/ou
\n("div.menu", "#conteudo");<\/p>\n
\n("#id_do_elemento").hide()<\/p>\n
\n("#id_do_elemento").show()<\/p>\n
\n(“#id_do_elemento”)<\/strong> = refencia ao elemento
\nhide(“slow”)<\/strong> = efeito<\/p>\n
\n("p").fadeIn("slow");
\n("p").fadeOut("slow");
\n("p").fadeTo("slow");
\n[\/code]<\/p>\nEventos<\/h3>\n
\n$(document).ready(function(){
\n $("a.mostra").click(function(){
\n $("#recebe").show();
\n });
\n});
\n[\/code]<\/p>\n
\nmostrar div<\/a><\/p>\n