Visão GeralKaio Valente  Cobra Tecnologia
Vantagens•   Acesso direto a qualquer componente do DOM•   Simplicidade, poucas linhas de código•   Cross-browser•   Efeit...
JavaScript x jQuery
Vantagens•   Mais fácil escrever jQuery do que em JavaScript puro.Esconder todas as divs com JavaScript puro:divs = docume...
Filosofia jQuery#1. Procurar algum elemento HTML#2. Fazer algo com ele
Filosofia jQuery Procurar   Ação$(“div”)  .hide();
Seletores $("#foo")      $("li:first")     $(".foo")              $("tr:odd")$(“table")            $("a[target=_blank]")$(...
Seletores                   $(input:disabled);$(div:empty);      $(input:checked);            $(option:selected);$(option:...
Criando Funções<script type="text/javascript"      src=“/projeto/js/jquery-1.7.2.min.js"></script>$(document).ready(functi...
Métodos jQuery• Elementos de Movimentação:  append(), before(), after()• Atributos:  css(), attr(), html(), val(), addClas...
Métodos jQuery          Chain Methods$("div").addClass(".foo").fadeIn();
Movimentação Inserir um conteúdo HTML na div foo$(“#foo”).append("<p>teste</p>");<html>    <body>        <div>jQuery</div>...
Atributos  Get                     Set.attr(id)        .attr(„id‟,‟foo‟).html()            .html(„<p>Cobra</p>‟).val()    ...
AtributosSetando várias propriedades css$(#foo).css({    "background": "yellow",    "height": "400px"});Alterando links$(a...
EventosQuando um botão for clicado, faça alguma coisa... $(button).click(function(){     alert(onclick); });Criando um eve...
EventosCriando elementos em tempo de execução...$(button).live(click,function(){    alert(„click);});
EfeitosTipos de Efeito        #1. Hide e Show         #2. FadeIn e FadeOut        #3. SlideUp e SlideDown
EfeitosSlideUp/SlideDown a cada click na div foo $(#foo).click(function(){     $(this).slideToggle(); });Aumenta largura d...
BuscaPegar todas as colunas da tabela anteriores a #minhaColuna $(#minhaColuna).prevAll() .andSelf();  <html>      <body> ...
BuscaPegar o parágrafo da div... $(„table).next().find(„p‟);  <html>      <body>          <table></table>             <div...
AjaxRequisição ajax usando get $(button#Buscar).get(/projetos/buscar,                       {id:1,nome:catuai});Requisição...
PluginsPlugins Famosos •   jQuery UI •   jQuery Form •   jQuery Validate •   jQuery Tipsy •   jQuery jCarousel •   jQuery ...
Concluindo...http://www.google.com/trends/?q=dojo+javascript,+jquery+javascript,+yui+javascript,+prototype+              j...
Concluindo...•   Produtividade•   Comunidade forte•   Muito material, livros, internet•   Licença aberta e free
Concluindo...•   Forum oficial:    http://forum.jquery.com/•   Comunidade brasileira:    jquery-br@googlegroups.com•   jQu...
ReferênciajQuery Essentials by Marc Grabanski  http://www.slideshare.net/1Marc/jquery-essentials
Visão GeralKaio Valente  Cobra Tecnologia
Upcoming SlideShare
Loading in …5
×

jQuery - Visão Geral

1,065 views

Published on

Slides apresentados à equipe de desenvolvimento da Cobra tecnologia.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,065
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

jQuery - Visão Geral

  1. 1. Visão GeralKaio Valente Cobra Tecnologia
  2. 2. Vantagens• Acesso direto a qualquer componente do DOM• Simplicidade, poucas linhas de código• Cross-browser• Efeitos e animações• Ajax
  3. 3. JavaScript x jQuery
  4. 4. Vantagens• Mais fácil escrever jQuery do que em JavaScript puro.Esconder todas as divs com JavaScript puro:divs = document.getElementByTagName(div);for (i=0; i<divs.length; i++) { div[i].style.display = none;}Esconder todas as divs com jQuery:$("div").hide();
  5. 5. Filosofia jQuery#1. Procurar algum elemento HTML#2. Fazer algo com ele
  6. 6. Filosofia jQuery Procurar Ação$(“div”) .hide();
  7. 7. Seletores $("#foo") $("li:first") $(".foo") $("tr:odd")$(“table") $("a[target=_blank]")$("form[id^=step]")
  8. 8. Seletores $(input:disabled);$(div:empty); $(input:checked); $(option:selected);$(option:even); $(„tr[class=word]); $(li:last);
  9. 9. Criando Funções<script type="text/javascript" src=“/projeto/js/jquery-1.7.2.min.js"></script>$(document).ready(function(){ console.log(“Pronto!");});$(function(){ console.log(“Pronto!");});jQuery(function(){ console.log(“Pronto!");});
  10. 10. Métodos jQuery• Elementos de Movimentação: append(), before(), after()• Atributos: css(), attr(), html(), val(), addClass()• Eventos: bind(), trigger(), unbind(), live(), click()• Efeitos: show(), fafeOut(), toggle(), animate()• Elementos de busca: find(), is(), prevAll(), next(), hasClass()• Ajax get(), getJSON(), post(), ajax(), load()
  11. 11. Métodos jQuery Chain Methods$("div").addClass(".foo").fadeIn();
  12. 12. Movimentação Inserir um conteúdo HTML na div foo$(“#foo”).append("<p>teste</p>");<html> <body> <div>jQuery</div> <div id="foo">exemplo<p>teste</p></div> id="foo">exemplo</div> </body></html>
  13. 13. Atributos Get Set.attr(id) .attr(„id‟,‟foo‟).html() .html(„<p>Cobra</p>‟).val() .val(„valor‟).css(„top‟) .css(„top‟,‟80px‟).width() .width(60)
  14. 14. AtributosSetando várias propriedades css$(#foo).css({ "background": "yellow", "height": "400px"});Alterando links$(a).attr(href,http://google.com.br);Marcando todos os checkbox$(:checkbox).attr(checked, checked);
  15. 15. EventosQuando um botão for clicado, faça alguma coisa... $(button).click(function(){ alert(onclick); });Criando um evento customizado... $(button).bind(expandir,function(){ alert(expandir); });$(button:first).trigger(expandir);Desfazendo evento customizado...$(button).unbind(expandir);
  16. 16. EventosCriando elementos em tempo de execução...$(button).live(click,function(){ alert(„click);});
  17. 17. EfeitosTipos de Efeito #1. Hide e Show #2. FadeIn e FadeOut #3. SlideUp e SlideDown
  18. 18. EfeitosSlideUp/SlideDown a cada click na div foo $(#foo).click(function(){ $(this).slideToggle(); });Aumenta largura da div foo para 300px em 5 segundos $(#foo).animate({width:300px},500);Diminui 30% da opacidade em 2 segundos ao perder o foco$(#foo).fadeTo(200,0.3);
  19. 19. BuscaPegar todas as colunas da tabela anteriores a #minhaColuna $(#minhaColuna).prevAll() .andSelf(); <html> <body> <table><tr> <td></td> <td></td> <td id="minhaColuna"></td> </tr></table> </body> </html>
  20. 20. BuscaPegar o parágrafo da div... $(„table).next().find(„p‟); <html> <body> <table></table> <div> <div> <p>foo</p> <p>foo</p> <span>teste</span> <span>teste</span> </div> </div> </body> </html>
  21. 21. AjaxRequisição ajax usando get $(button#Buscar).get(/projetos/buscar, {id:1,nome:catuai});Requisição ajax usando post e exibindo a resposta $(button#Salvar).post(/projetos/salvar,{id:1,}, function(response){ alert(response); });Carregar resposta em uma divfunction carregar(elemento,url) { $(#+elemento).load(url);}
  22. 22. PluginsPlugins Famosos • jQuery UI • jQuery Form • jQuery Validate • jQuery Tipsy • jQuery jCarousel • jQuery maskFinancial • http://plugins.jquery.com
  23. 23. Concluindo...http://www.google.com/trends/?q=dojo+javascript,+jquery+javascript,+yui+javascript,+prototype+ javascript,+mootools+javascript&ctab=0&geo=all&date=all&sort=1
  24. 24. Concluindo...• Produtividade• Comunidade forte• Muito material, livros, internet• Licença aberta e free
  25. 25. Concluindo...• Forum oficial: http://forum.jquery.com/• Comunidade brasileira: jquery-br@googlegroups.com• jQuery API: http://api.jquery.com/
  26. 26. ReferênciajQuery Essentials by Marc Grabanski http://www.slideshare.net/1Marc/jquery-essentials
  27. 27. Visão GeralKaio Valente Cobra Tecnologia

×