MiniCurso Jquery - IV SimSis

1.616 visualizações

Publicada em

Apresentação sobre o Framework Jquery para IV Simpósio de Sistemas de Informação da FTC - Campus Vitória da Conquista

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

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

Nenhuma nota no slide

MiniCurso Jquery - IV SimSis

  1. 1. JQUERY EM AÇÃO Thiago Miranda dos Santos Bacharel em Sistemas de Informação Pós Graduado em Engenharia de Sistemas
  2. 2. O que é Jquery?
  3. 3. O que é Jquery?É um Framework JavascriptCriado em 2006, e já bem robustoVeio para simplificar a interatividade e acriação de efeitos visuais em Websites
  4. 4. Quem usa Jquery E muitos Mais...
  5. 5. Características do JqueryÉ Leve (Menos de 100 kb)É Cross-BrowserÉ Simples e RápidoÉ extensivel com PluginsTem uma comunidade enorme deDesenvolvedoresFilosofia: Escreva menos, Faça mais!
  6. 6. Escrever menos, fazer mais"O foco principal da biblioteca jQuery é a simplicidade. Por que submeter osdesenvolvedores ao martírio de escrever longos e complexos códigos para criar simples efeitos?" (John Resig - criador do jQuery)
  7. 7. Escrever menos, fazer mais Esconder todas as Divs de uma página em Javascriptdivs = document.getElementByTagName(„div‟);for (i = 0; i < divs.length; i++) {divs[i].style.display = „none‟;} Esconder todas as Divs de uma página utilizando Jquery $(“div”).hide();
  8. 8. Para desenvolver bem Código Não Obstrusivo WTF?????? ? Separar Programação, Marcação e EstiloProgramação BackEnd (PHP, ASP, JSP, Ruby,Python...)Marcação (Html)Estilo (Css)Programação Front End (Javascript)
  9. 9. Como não fazer Código Obstrusivo<p style="padding-left:10;Color:#000"onClick=“alert(„Teste‟);“ />Clique aqui</p>
  10. 10. Como Fazer No HTML<p class=“teste” >Clique aqui</p> No CSS.teste{ padding-letf:10px; color:#000; } No Javascript (Com Jquery) $(„.teste‟).onclick(function( ){ alert(„teste‟); });
  11. 11. Vamos Começar Sites Importantesjquery.com - Downloadapi.jquery.com - Documentaçãoforum.jquery.com - Comunidadeplugins.jquery.com - Extensão
  12. 12. Vamos Começar DownloadProduction – Código Compactado, tamanho do arquivo menor,são retirados os comentários, os espaçamentos e as quebrasde linha. Ideal para ser utilizado na sua produção.Development – Código Legível, identado, tamanho do arquivomaior. Ideal para quem vai desenvolver Plugins ou conhecer afundo a biblioteca.
  13. 13. Vamos Começar Instalação<html><head><title>A instalação</title><script type=text/javascript src=jquery-1.6.4.min.js></script></head>...
  14. 14. Construtor Tudo começa por aqui $( )Função de seleção, substitui Jquery( )
  15. 15. Como Funciona 1- Encontre algo no HTML2- Faça alguma coisa com ele. Encontre Faça alguma coisa com ele$( “.teste”) .css(“color:”,”blue”);
  16. 16. Vamos Começar Hello World$(document).ready(function(){alert(“Hello World”);}); Não se esqueça do $(document).ready Vamos utilizá-lo muito!!!!
  17. 17. Método Ready $(document).ready• Equivalente ao window.onload do Javascript• Aguarda o carregamento da árvore dodocumento para executar os scripts• Serve de Container para os Scripts• Diferente do onload ele não espera tudoestar carregado e sim só a árvore dodocumento.
  18. 18. Árvore do Documento
  19. 19. Seletores• Seletores Simples• Seletores Compostos• Seletores de Filtros• Seletores de Conteúdo• Seletores de Atributos• Seletores de Formulários
  20. 20. Para a Prática Método CSS $(„seletor‟).css(„atributo‟,‟valor‟); background color $(„seletor‟).css(„background‟,‟red‟); $(„seletor‟).css(„color‟,‟green‟);$(„seletor‟).css(„color‟,‟#FF00EE‟);
  21. 21. Seletores Simples•Você acessa diretamente os elementos como Ids, Classes e tipos especificados. $(„#teste‟) acessa <div id=“teste”></div>
  22. 22. Seletores Simples•Você acessa diretamente os elementos como Ids, Classes e tipos especificados. $(„.teste‟) acessa <div class=“teste”></div>
  23. 23. Seletores Simples•Você acessa diretamente os elementos como Ids, Classes e tipos especificados. $(„div‟) Acessa todas as divs do documento <div></div> <div></div>
  24. 24. Seletores Compostos•É a combinação de dois ou mais seletoressimples $(„div p‟) Acessa o parágrafo apenas dentro da div <div><p>Teste</p></div> <p></p>
  25. 25. Seletores Compostos $(„pai > filho‟) $(„div > p‟)Acessa os parágrafo que tenham um elemento div como pai<div><p>Teste</p><p>Teste</p></div>
  26. 26. Seletores Compostos $(anterior + posterior) $(„div + p‟) Acessa o parágrafo posterior a div<div><p>Teste</p></div><p>Teste</p> - Acessa apenas este
  27. 27. Seletores Compostos $(anterior ~ irmãos) $(„h2 ~ p‟)Acessa os parágrafos irmãos posteriores a h2 <h2>Teste</h2> <p>Teste</p> - Acessa este <p>Teste</p> - Acessa este <div><p>teste</p></div> - Não Acessa este
  28. 28. Seletores Filtros $(seletor:first) $(seletor:last) $(„li:first‟) Acessa o primeiro item de uma lista<ul><li>Teste</li> - Acessa este<li>Teste</li><li>Teste</li></ul>
  29. 29. Seletores Filtros $(seletor:first) $(seletor:last) $(„li:last‟) Acessa o último item de uma lista<ul><li>Teste</li><li>Teste</li><li>Teste</li> - Acessa este</ul>
  30. 30. Seletores Filtros $(seletor:not(seletor2)) $(„li:not(li:first)‟) Apenas não acessa o primeiro item de uma lista<ul><li>Teste</li> - Não acessa este<li>Teste</li> - Acessa este<li>Teste</li> - Acessa este</ul>
  31. 31. Seletores Filtros $(seletor:eq(índice)) $(„li:eq(1)‟)Acessa o índice 1 de uma lista, começando de 0 <ul> <li>Teste</li> <li>Teste</li> - Acessa este <li>Teste</li> </ul>
  32. 32. Seletores Filtros $(seletor:even) $(„li:even‟) Acessa os índices pares<ul><li>Teste</li> - Acessa este<li>Teste</li><li>Teste</li> - Acessa este</ul>
  33. 33. Seletores Filtros $(seletor:odd) $(„li:odd‟) Acessa os índices ímpares<ul><li>Teste</li><li>Teste</li> - Acessa este<li>Teste</li></ul>
  34. 34. Seletores Filtros $(seletor:gt(índice)) $(„li:gt(1)‟) Acessa os índices maiores que o indicado<ul><li>Teste</li><li>Teste</li><li>Teste</li> - Acessa este</ul>
  35. 35. Seletores Filtros $(seletor:lt(índice)) $(„li:lt(1)‟)Acessa os índices menores que o indicado<ul><li>Teste</li> - Acessa este<li>Teste</li><li>Teste</li></ul>
  36. 36. Seletores Filtros $(seletor:lt(índice)) $(„li:lt(1)‟)Acessa os índices menores que o indicado<ul><li>Teste</li> - Acessa este<li>Teste</li><li>Teste</li></ul>
  37. 37. Seletores de Conteúdo $(seletor:contains(‘texto’)) $(„p:contains(„dentro‟)‟)Acessa um parágrafo que contém a palavra dentro <p>Teste dentro</p> - Acessa este <p>Teste</p> <p>Teste</p>
  38. 38. Seletores de Conteúdo $(seletor:has(seletor2)) $(„div:has(p)‟)Acessa uma div que contenha um parágrafo<div><p>Teste dentro</p></div> - Acessa este<div>Teste</div><div></div>
  39. 39. Seletores de Conteúdo Outros $(„div:parent‟) Acessa uma div que contenham elementos. $(„div:hidden‟)Acessa uma div que esteja em modo de visibilidade oculto. $(„div:visible‟) Acessa uma div que esteja visível.
  40. 40. Seletores de Atributos $(seletor[atributo]) ou $(seletor[atributo=valor]) $(„div[id=teste]‟)Acessa uma div que tenha o id igual a teste<div><p>Teste dentro</p></div><div id=“teste”>Teste</div> - Acessa este<div></div>
  41. 41. Seletores de Atributos $(seletor[atributo!=valor]) $(„div[id!=teste]‟)Acessa uma div que tenha o id diferente a teste <div><p>Teste dentro</p></div> - Acessa este <div id=“teste”>Teste</div> <div></div> - Acessa este
  42. 42. Seletores de Atributos $(seletor[atributo^=valor]) $(„div[id^=teste]‟)Acessa uma div que tenha o id iniciado por teste <div><p>Teste dentro</p></div> <div id=“teste”>Teste</div> - Acessa este <div id=“teste2”></div> - Acessa este
  43. 43. Seletores de Atributos Outros $(„div[id $= este]‟) Acessa uma div que o valor do id termina com este. $(„div[id *= teste]‟)Acessa uma div que tenha teste dentro do valor do atributo $(„div[id = teste][class = bola]‟) Acessa uma div que satisfaz os atributos selecionados, pode se adicionar quantos atributos forem necessários.
  44. 44. Seletores de Formulários $(:seletor) $(„:text‟)Acessa os inputs do tipo texto em um formulário <label><input type=“text”></label> - Acessa este <label><input type=“password”></label>
  45. 45. Seletores de Formulários $(„:text‟)$(„:password‟) $(„:radio‟)$(„:checkbox‟) $(„:enabled‟) $(„:disabled‟) $(„:checked‟) $(„:select‟)
  46. 46. Prática5 Minutos
  47. 47. Prática-Colorir o Background de verde da 1º e do3º Itens de uma lista no documento comapenas uma linha.- Selecionar uma div que vem após a divcom id teste2 e pintá-la de azul.- Selecionar os campos select noformulário e pintá-los de vermelho.- Selecionar todas as divs que contenhamo nome teste e pintá-las de preto.
  48. 48. Eventos• Evento = Gatilho• Uma ação realizada pelo usuário quefaz com que o Script seja rodado.• Sem Eventos não teria motivo daexistência do javascript, muito menos doJquery.
  49. 49. Eventos .click( )Executa uma ação no momento em que o seletor é clicado $(„#botao1‟).click(function( ) { Ações });
  50. 50. Eventos .dblclick( )Executa uma ação no momento em que o seletor é clicado duas vezes seguidas (duplo clique) $(„#botao1‟).dblclick(function( ) { Ações });
  51. 51. Eventos .blur( )Quando o seletor não está mais com o foco sobre ele, muito utilizado em formulários. $(„:text‟).blur(function( ) { Ações });
  52. 52. Eventos .change( )Quando o valor do seletor for alterado ele realiza uma ação. $(„:checkbox‟).change(function( ) { Ações });
  53. 53. Eventos .focus( )Quando o seletor entrar em foco uma ação é executada. Muito utilizada também em formulários $(„:text‟).focus(function( ) { Ações });
  54. 54. Eventos .keydown( )Quando uma tecla é digitada no seletor uma ação é executada.$(„:text‟).keydown(function( ){Ações});
  55. 55. Eventos .keyup( ) e .keypress( ) Keyup é quando uma tecla pressionada é solta no seletorKeyup é quando uma tecla é pressionada e solta no seletor $(„:text‟).keyup(function( ) { Ações });
  56. 56. Eventos .mousedown( )Quando o ponteiro do mouse é clicado sobre o seletor $(„h1‟).mousedown(function( ) { Ações });
  57. 57. Eventos .mouseup( )Quando o clique no mouse é solto sobre o seletor$(„h1‟).mouseup(function( ){Ações});
  58. 58. Eventos .mouseover( )Quando o ponteiro do mouse passa sobre o seletor$(„h1‟).mouseover(function( ){Ações});
  59. 59. EventosMuitos Outros .load .submit .unload .select .scroll .resize .error
  60. 60. Prática10 Minutos
  61. 61. Prática- Faça com que o botão 1 ao ser clicadapinte todas as Divs de Azul- Faça com que o botão 2 ao ser ClicadoDuplamente pinte apenas a 1ª Div de azul- Faça com que o campo texto ao sair defoco pinte os pinte a última div de verde- Ao mudar o valor do select pinte os itenspares da lista presente no arquivo
  62. 62. EventosMuitos Outros .load .submit .unload .select .scroll .resize .error
  63. 63. Métodos Estilização .css( )Utiliza as regras do css para estilizar os seletores. Ex.: Background, Color, width, height, border, display ...
  64. 64. Prática5 Minutos
  65. 65. Prática- Teste novamente o método de estilizaçãoutilizando os outros atributos do css, comocor da letra, largura, altura, visibilidade.- Faça este teste utilizando os eventos nosbotões 1, 2 e 3.
  66. 66. Métodos Manipulação .attr( )Manipula os atributos dos elementos selecionados $(„:text‟).attr(„value‟,‟10‟);Os atributos podem ser tanto acessados quanto manipulados, e vários atributos podem ser trabalhados
  67. 67. Métodos Manipulação .html( )Manipula conteúdo html dentro de um seletor.$(„.teste1‟).html(„teste<br>teste2‟);
  68. 68. Métodos Manipulação .text( )Manipula conteúdo textual dentro de um seletor. $(„.teste1‟).text(„teste‟);
  69. 69. Métodos Manipulação .val( )Manipula o atributo value de um seletor. $(„:text‟).val(„teste‟);
  70. 70. Prática10 Minutos
  71. 71. Prática- Ao clicar em um botão recupere o textodo parágrafo abaixo da div com id teste 2 eadicione em forma de html na div de classeteste 1.- Faça com que ao ser digitado um valornum campo texto o mesmo sejaadicionado na div com id vazia.
  72. 72. Twitter: @mirandathiago84Email: mirandathiago@gmail.comSite: www.thiagomiranda.net

×