JQuery

1.226 visualizações

Publicada em

Apresentação do JQuery

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.226
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
22
Comentários
0
Gostaram
0
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
  • \n
  • JQuery

    1. 1. JQueryLuciano Borgeslucianosantosborges@gmail.com
    2. 2. Agenda
    3. 3. Hora daRevisão
    4. 4. JavaScript OO Construtor NEW só é necessáriofunction Pessoa(){} quando a função nãovar eu = new Pessoa(); retorna o objeto recém- criado.function Pessoa(){ return this }var eu = Pessoa(); THIS refere-se ao próprio objeto.
    5. 5. JavaScript OO Propriedadesfunction Pessoa(){ this.olhos = 2} var eu = new Pessoa(); var ciclope = new Pessoa(); ciclope.olhos = 3; alert(ciclope.olhos); //3
    6. 6. JavaScript OO Propriedadesfunction Pessoa(pNome){ this.nome = pNome} var eu = new Pessoa(“Luciano”);
    7. 7. JavaScript OO Métodosfunction Pessoa(){ this.fala = function(mensagem){ alert(mensagem); }} luciano.fala(“The Book is on the table!”);
    8. 8. JavaScript OO Encapsulamentofunction Pessoa(){ this.publica = “Variável Pública”; var privada = “Variável Privada”; this.metodoPublico = function(){ alert(this.publico); alert(privada); } var metodoPrivado = function(){ var eu = new Pessoa(); alert(privada); alert(eu.publica); } alert(eu.privada); this.chamePrivada = function(){ eu.metodoPublico(); alert(privada); eu.metodoPrivado(); } eu.chamePrivado();}
    9. 9. JavaScript OO Objetos Literaisvar Pessoa = { var Instrutores = { nome : "Luciano", instrutor1 : { nome : "Luciano", idade: 34 idade : 34} }, instrutor2 : { nome : "Marcelo", email : "37" }, instrutor3 : { nome : "Márcio", email : "43" } }
    10. 10. 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
    11. 11. Compatibilidade
    12. 12. simplicidade
    13. 13. Filosofia jQuery Ache Algo Faça AlgoFonte: Richard Worth
    14. 14. Filosofia jQuery $(Ache Algo) .Faça Algo();Fonte: Richard Worth
    15. 15. Vantagens
    16. 16. VantagensAcesso direto aos componentes DOM
    17. 17. Vantagens Acesso direto aos componentes DOMManipulação de conteúdos sem limitações
    18. 18. Vantagens Acesso direto aos componentes DOM Manipulação de conteúdos sem limitaçõesSuporte aos eventos de interação com o usuário
    19. 19. 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
    20. 20. 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
    21. 21. 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
    22. 22. 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
    23. 23. Antes do JQuery Escondendo DIVs divs = document.getElementByTagName(div); for(i = 0; i < divs.length; i++){ divs[i].style.display = none; }Fonte: Marc Grabanski
    24. 24. Depois do JQuery Escondendo DIVs $(“div”).hide();Fonte: Marc Grabanski
    25. 25. Seletores
    26. 26. Seletores$(“elemento”) $(“.classe”) $(“#id”)
    27. 27. Funções & Eventos
    28. 28. Exemplos$(“div”).hide();$(“button”).remove();$(“form”).submit();$(“p”).addClass(“special”);$(“span”).show(“fast”);
    29. 29. Exemplos$("p").addClass("special") .css("color", "red") .append("hello") .show("slow");
    30. 30. 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,9) == “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(); }}
    31. 31. 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,9) == “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(); }}
    32. 32. 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,9) == “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();
    33. 33. 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; } }}
    34. 34. 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; });
    35. 35. 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; });
    36. 36. $.get("test.cgi", { name: "John", time: "2pm" },    function(data){      alert("Data Loaded: " + data);    } );$.ajax({ url: url, data: data, success: success, dataType: dataType}); $.post("test.php", { name: "John", time: "2pm" },    function(data) {      alert("Data Loaded: " + data);    } );
    37. 37. 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.
    38. 38. j Q u e r y U I C S S F ra m e wo rk
    39. 39. Accordion<script> $(function() { $( "#accordion" ).accordion(); });</script>
    40. 40. Autocomplete
    41. 41. Datepicker<script> $(function() { $( "#datepicker" ).datepicker(); });</script><p>Date: <input type="text" id="datepicker"></p>
    42. 42. 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>
    43. 43. Quer mais?
    44. 44. PLUGINS
    45. 45. DataTable PLUGINS
    46. 46. Flot PLUGINS
    47. 47. jsTree PLUGINS
    48. 48. CODING DOJO
    49. 49. Problema

    ×