JQuery Alagoinhas Dev Day - UNEB

674 views
562 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
674
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for 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!

    ×