JQuery Alagoinhas Dev Day - UNEB

691 visualizações

Publicada em

Apresentação sobre JQuery no Alagoinhas Dev Day - UNEB

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
691
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
17
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • JQuery Alagoinhas Dev Day - UNEB

    1. 1. JQueryAlagoinhas Dev Day UNEB
    2. 2. Luciano Borges lucianosantosborges@gmail.com @lusabo slideshare.net/lusabo http://lusabo.blogspot.com.brhttp://meucaminho2012.blogspot.com.br http://www.diretodocaminho.com.br
    3. 3. Agenda
    4. 4. http://w3techs.com/technologies/cross/javascript_library/ranking
    5. 5. Compatibilidade
    6. 6. simplicidade
    7. 7. Filosofia jQuery Ache Algo Faça AlgoFonte: Richard Worth
    8. 8. Filosofia jQuery $(Ache Algo) .Faça Algo();Fonte: Richard Worth
    9. 9. Vantagens
    10. 10. VantagensAcesso direto aos componentes DOM
    11. 11. Vantagens Acesso direto aos componentes DOMManipulação de conteúdos sem limitações
    12. 12. Vantagens Acesso direto aos componentes DOM Manipulação de conteúdos sem limitaçõesSuporte aos eventos de interação com o usuário
    13. 13. Vantagens Acesso direto aos componentes DOM Manipulação de conteúdos sem limitaçõesSuporte aos eventos de interação com o usuário Grande variedade de efeitos de animação
    14. 14. Vantagens Acesso direto aos componentes DOM Manipulação de conteúdos sem limitaçõesSuporte aos eventos de interação com o usuário Grande variedade de efeitos de animação Uso simplificado e sem restrições com AJAX
    15. 15. Vantagens Acesso direto aos componentes DOM Manipulação de conteúdos sem limitaçõesSuporte aos eventos de interação com o usuário Grande variedade de efeitos de animação Uso simplificado e sem restrições com AJAX Simplificação na criação de scripts
    16. 16. Vantagens Acesso direto aos componentes DOM Manipulação de conteúdos sem limitaçõesSuporte aos eventos de interação com o usuário Grande variedade de efeitos de animação Uso simplificado e sem restrições com AJAX Simplificação na criação de scripts Emprego cross-browser
    17. 17. Antes do JQuery Escondendo DIVs divs = document.getElementByTagName(div); for(i = 0; i < divs.length; i++){ divs[i].style.display = none; }Fonte: Marc Grabanski
    18. 18. Depois do JQuery Escondendo DIVs $(“div”).hide();Fonte: Marc Grabanski
    19. 19. Seletores
    20. 20. Seletores$(“elemento”) $(“.classe”) $(“#id”)
    21. 21. Funções & Eventos
    22. 22. Exemplos$(“div”).hide();$(“button”).remove();$(“form”).submit();$(“p”).addClass(“special”);$(“span”).show(“fast”);
    23. 23. Exemplos$("p").addClass("special") .css("color", "red") .append("hello") .show("slow");
    24. 24. Exemplos Reaisfunction validacaoRespostas(){ var selecionado = null; var i; for(i = 0; i < document.frm.elements.length; i++){ if(document.frm.elements[i].name.substr(0,4) == “resp”){ if(document.frm.elements[i].checked){ selecionado = document.frm.elements[i].value; break; } } } if(selecionado == null){ alert(“É necessário escolher pelo menos um quesito.”); } else { document.frm.submit(); }}
    25. 25. Exemplos Reaisfunction validacaoRespostas(){ var selecionado = null; var i; for(i = 0; i < document.frm.elements.length; i++){ if(document.frm.elements[i].name.substr(0,4) == “resp”){ if(document.frm.elements[i].checked){ selecionado = document.frm.elements[i].value; break; } } } if(selecionado == null){ alert(“É necessário escolher pelo menos um quesito.”); } else { document.frm.submit(); }}
    26. 26. Exemplos Reais function validacaoRespostas(){ var selecionado = null; var i; for(i = 0; i < document.frm.elements.length; i++){ if(document.frm.elements[i].name.substr(0,4) == “resp”){ if(document.frm.elements[i].checked){ selecionado = document.frm.elements[i].value; break; } } } if(selecionado == null){ alert(“É necessário escolher pelo menos um quesito.”); } else { document.frm.submit(); } }($(“input:checked”).length == 0) ? alert (“msg”) : $(“form:first”).submit();
    27. 27. Exemplos Reaisfunction Limpar(){ var v_input = document.getElementsByTagName(‘input’); for(var i = 0; i<v_input.length; i++){ switch(v_input[i].type){ case ‘radio’: v_input[i].checked = ‘’; break; case ‘checkbox’: v_input[i].checked = ‘’; break; } }}
    28. 28. Exemplos Reaisfunction Limpar(){ var v_input = document.getElementsByTagName(‘input’); for(var i = 0; i<v_input.length; i++){ switch(v_input[i].type){ case ‘radio’: v_input[i].checked = ‘’; break; case ‘checkbox’: v_input[i].checked = ‘’; break; } }} $(“input:checked”).each(function(){ this.checked = false; });
    29. 29. Exemplos Reaisfunction Limpar(){ var v_input = document.getElementsByTagName(‘input’); for(var i = 0; i<v_input.length; i++){ switch(v_input[i].type){ case ‘radio’: v_input[i].checked = ‘’; break; case ‘checkbox’: v_input[i].checked = ‘’; break; } }} $(“input:checked”).each(function(){ this.checked = false; });
    30. 30. $.ajax({ type: POST, url: url, data: data, success: success, dataType: dataType});
    31. 31. Formato de troca de dados leve em relação ao XML Uma coleção de pares nome/valor Um objeto JSON inicia com { e termina com } Cada nome é seguido por : (dois pontos) Os pares nome/valor são separados por , (vírgula) É um subconjunto dos objetos literais do JavaScript
    32. 32. Um conjunto completo de componentes cross- browser de interface de usuário. Drag, Drop, Sort, Select, Resize.Accordion, Autocomplete, Button, Datepicker, Dialog, Progressbar, Slider, Tabs.
    33. 33. j Q u e r y U I C S S F ra m e wo rk
    34. 34. Accordion<script> $(function() { $( "#accordion" ).accordion(); });</script>
    35. 35. Autocomplete
    36. 36. Datepicker<script> $(function() { $( "#datepicker" ).datepicker(); });</script><p>Date: <input type="text" id="datepicker"></p>
    37. 37. Tabs<script> $(function() { $( "#tabs" ).tabs(); });</script><div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu ...</p> </div></div>
    38. 38. Quer mais?
    39. 39. PLUGINS
    40. 40. DataTable PLUGINS
    41. 41. Flot PLUGINS
    42. 42. jsTree PLUGINS
    43. 43. JQuery Corner
    44. 44. r y u e a JQU s
    45. 45. E pra celular?
    46. 46. Template Básico<html> <head> ... <meta name="viewport" content="width=device-width,initial-scale=1"> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> </body></html>
    47. 47. Lista Básica<ul data-role="listview" data-theme="g"> <li><a href="acura.html">Acura</a></li> <li><a href="audi.html">Audi</a></li> <li><a href="bmw.html">BMW</a></li></ul>
    48. 48. Forms<div data-role="fieldcontain"> <label for="name">Text Input:</label> <input type="text" name="name" id="name" value="" /></div>
    49. 49. Obrigado!

    ×