Introdução a jQuery

5,520 views

Published on

  • Be the first to comment

Introdução a jQuery

  1. 1. <ul>Rodrigo Pletsch Aramburu </ul>
  2. 2. Bacharel em Sistemas de Informação. Docente no curso Técnico em Informática do Senac Uruguaiana, Sócio e desenvolvedor Web na empresa G8 Sistemas de Informação Escrevo para o blog de tecnologia www.botecodigital.info. <ul>Quem sou eu? </ul>
  3. 3. Introdução à biblioteca Selecionando Elementos Modificando o HTML Eventos em páginas Efeitos e animações AJAX com JQuery Plugins <ul>Tópicos </ul>
  4. 4. <ul>O que é jQuery? </ul><ul>jQuery é um biblioteca JavaScript Visa o desenvolvimento rápido Facilita a manipulação elementos, de eventos, <li>animações e AJAX através de métodos simples
  5. 5. Crossbrowser – funciona de maneira igual na
  6. 6. maioria dos navegadores disponíveis </li></ul>
  7. 7. <ul>Incluindo a jQuery </ul><ul>A biblioteca pode ser baixada em <li>http://www.jquery.com </li></ul>
  8. 8. <ul>Incluindo a jQuery </ul><ul>Inserir pelo arquivo baixado <script src=&quot;jquery-1.4.2.min.js” language=&quot;javascript“ <li>type=&quot;text/javascript&quot;></script>
  9. 9. Ou utilizar a biblioteca pelo Google
  10. 10. <script src=&quot; http://www.google.com/jsapi &quot;> </script>
  11. 11. <script type=&quot;text/javascript&quot;>
  12. 12. google.load(&quot;jquery&quot;, &quot;1.4&quot;);
  13. 13. </script> </li></ul>
  14. 14. <ul><li>Encontrando elementos em um
  15. 15. documento </li></ul><ul>A seleção de elementos é feita de maneira bem <li>simples através da função $(“seletor”) seleciona
  16. 16. o(s) elemento(s) do documento e transforma em
  17. 17. um objeto jQuery e o retorna para ser
  18. 18. manipulado. </li></ul>
  19. 19. <ul>Encontrando elementos em um documento </ul><ul>Os elementos podem ser selecionado por: ID: $(“#divID”) Classe: $(“.botao”) Elemento: $(“a”) Multiplos: $(“.link1,.botao1”) Descendentes: $(“div a”) Atributos: $(“input[type|=text]”) </ul>
  20. 20. <ul>Encontrando elementos em um documento </ul><ul>Exemplo: </ul>
  21. 21. <ul>Manipulando o documento </ul><ul>A jQuery nos fornece várias funções para <li>manipular o conteúdo de um documento. </li></ul>
  22. 22. <ul>.html() – .html(string) </ul><ul>Retorna o conteúdo de um elemento selecionado ou <li>insere um conteúdo dentro do elemento. </li></ul>
  23. 23. <ul>.append(string) </ul><ul><li>Adiciona a string ao final do conteúdo do
  24. 24. elemento selecionado. </li></ul>
  25. 25. <ul>.attr(atributo) .attr(atributo,valor) </ul><ul>Retorna um valor de um atributo do elemento <li>selecionado ou atribui um valor para atributo
  26. 26. do elemento. </li></ul>
  27. 27. <ul>.val() .val(valor) </ul><ul>Retorna o valor do atributo value de um <li>elemento selecionado ou atribui um valor para o
  28. 28. elemento.(utilizado para elementos de
  29. 29. formulários) </li></ul>
  30. 30. <ul>.css(propriedade ) .css(propriedade , valor ) </ul><ul>Retorna o valor de uma propriedade CSS do <li>elemento selecionado ou configura um novo
  31. 31. valor para ela.
  32. 32. . </li></ul>
  33. 33. <ul>.offset() .offset({left : valor, top: valor} ) </ul><ul>Retorna a atual coordenada do elemento <li>selecionado ou configura uma nova. </li></ul>
  34. 34. <ul>.addClass(string) .removeClass(string) </ul><ul>Adiciona e remove uma ou mais classes do <li>elemento selecionado. </li></ul>
  35. 35. <ul>.height() - .height( altura) .width() - .width(largura) </ul><ul>Retorna a altura e largura do elemento <li>selecionado ou define uma nova. </li></ul>
  36. 36. <ul>Quando o DOM esta pronto? </ul>
  37. 37. <ul>Eventos </ul><ul>Os métodos de eventos são usados para <li>registrar os comportamentos que serão
  38. 38. executados quando o usuário interage com o
  39. 39. browser. </li></ul>
  40. 40. <ul>.click( ) </ul><ul>.click( manipulador(event) ) O método click adiciona um determinado <li>comportamento quando o elemento
  41. 41. selecionado dispara um evento de clique do
  42. 42. mouse. </li></ul>
  43. 43. <ul>.click( ) </ul><ul>Exemplo </ul>
  44. 44. <ul>.focus( manipulador(event) ) O método focus adiciona um determinado <li>comportamento quando o elemento
  45. 45. selecionado recebe foco. </li></ul><ul>.focus() </ul>
  46. 46. <ul>.focus() </ul>
  47. 47. <ul>.blur( manipulador(event) ) O método blur adiciona um determinado <li>comportamento quando o elemento
  48. 48. selecionado perde o foco. </li></ul><ul>.blur() </ul>
  49. 49. <ul>.blur() </ul>
  50. 50. <ul>.hover() </ul><ul>.hover( manipuladorIn(event), <li>manipuldorOut(event) )
  51. 51. O método hover adiciona dois comportamentos
  52. 52. para um elemento selecionado, quando o
  53. 53. mouse fica sobre o elemento e quando o mouse
  54. 54. sai </li></ul>
  55. 55. <ul>.hover() </ul>
  56. 56. <ul>.change( manipulador(event) ) O método change adiciona um determinado <li>comportamento quando o elemento
  57. 57. selecionado muda seu valor. </li></ul><ul>.change() </ul>
  58. 58. <ul>.change() </ul>
  59. 59. <ul>.keypress( manipulador(event) ) O método KeyPress adiciona um determinado <li>comportamento quando o elemento
  60. 60. selecionado está em foco e é pressionada uma
  61. 61. tecla. </li></ul><ul>.keyPres s() </ul>
  62. 62. <ul>.keyPres s() </ul>
  63. 63. <ul>.submit( manipulador(event) ) O método submit adiciona um determinado <li>comportamento quando o formulário
  64. 64. selecionado é submetido clicando no botão
  65. 65. submit ou apertando a tecla enter. </li></ul><ul>.submit() </ul>
  66. 66. <ul>.submit() </ul>
  67. 67. <ul>Efeitos </ul><ul>A jQuery fornece diversas funções para <li>adicionar efeitos em uma página de forma
  68. 68. bastante simples. </li></ul>
  69. 69. <ul>.hide() - .show() </ul><ul>.hide( duration, [ callback ] ) Oculta o elemento selecionado .show( duration, [ callback ] ) Mostra o elemento selecionado </ul>
  70. 70. <ul>.hide() - .show() </ul>
  71. 71. <ul>.fadeOut() - .fadeIn() </ul><ul>.fadeOut( [ duration ], [ callback ] ) Oculta o elemento selecionado aumentando a <li>transparência.
  72. 72. .fadeIn( [ duration ], [ callback ] )
  73. 73. Mostra o elemento selecionado diminuindo a
  74. 74. transparência. </li></ul>
  75. 75. <ul>.fadeOut() - .fadeIn() </ul>
  76. 76. <ul>.toggle() </ul><ul>.toggle( manipulador1(event), manipulador2(event) ) Alterna entre dois comportamentos informados <li>para cada clique. </li></ul>
  77. 77. <ul>.toggle() </ul>
  78. 78. <ul>.slideUp() - .slideDown() </ul><ul>.slideUp( [ duration ], [ callback ] )) Faz o elemento sumir com o movimento de deslizar. .slideDown( [ duration ], [ callback ] ) Faz o elemento aparecer com o movimento de <li>desliz ar. </li></ul>
  79. 79. <ul>.slideUp() - .slideDown() </ul>
  80. 80. <ul>.animate() </ul><ul>.animate( properties, [ duration ], [ callback ] )) Permite a animação customizada de um <li>conjunto de propriedades CSS. </li></ul>
  81. 81. <ul>.animate() </ul><ul>width: Largura do elemento <li>height: Altura do elemento
  82. 82. opacity: Transparencia do elemento
  83. 83. marginLeft: Margem esquerda
  84. 84. marginTop: Margem superior
  85. 85. marginRight: Margem direita
  86. 86. marginBottom: Margem inferior
  87. 87. top: Posição em relação ao topo(somente funciona se a propriedade positon do CSS
  88. 88. estiver em absolute)
  89. 89. left: Posição em relação a esquerda(somente funciona se a propriedade positon do
  90. 90. CSS estiver em absolute)
  91. 91. fontSize: Tamanho da fonte
  92. 92. borderWidth: Tamanho da Borda </li></ul>
  93. 93. <ul>.animate() </ul>
  94. 94. <ul>AJAX </ul><ul>É um método em que se utiliza Javascript para <li>fazer uma requisição assíncrona ao servidor
  95. 95. buscando apenas uma pequena parte de
  96. 96. conteúdo para inseri-lo dinamicamente na
  97. 97. página já carregada. </li></ul>
  98. 98. <ul>.load() </ul><ul>.load( url, [ parametros ]) Faz uma requisição GET no servidor e o HTML <li>retornado é inserido no elemento selecionado. </li></ul>
  99. 99. <ul>.load() </ul>
  100. 100. <ul>jQuery .get() </ul><ul>jQuery.get( url, [data], [ callback(data)]) Realiza uma requisição GET e chama a função de <li>callback passando o retorno da requisição como
  101. 101. parâmetro data. </li></ul>
  102. 102. <ul>jQuery .get() </ul>
  103. 103. <ul>jQuery.post() </ul><ul>jQuery.post( url, [data], [callback(data)]) Realiza uma requisição GET e chama a função de <li>callback passando o retorno da requisição como
  104. 104. parâmetro data. </li></ul>
  105. 105. <ul>jQuery.post() </ul>
  106. 106. <ul>Plugins </ul><ul>Existem diversos plugins para jQuery, cada um <li>fornecendo efeitos e funcionalidade diversas
  107. 107. desde mascara de input a datagrid que buscam
  108. 108. informações via AJAX, passando por galerias de
  109. 109. fotos até slideshow. </li></ul>
  110. 110. <ul>Plugins </ul><ul>Alguns plugins interessantes: jQuery Cycle (slideshow) </ul><ul>http://jquery.malsup.com/cycle/ </ul><ul>PrettyPhoto (lightbox) </ul><ul>http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox- <li>clone/ </li></ul>
  111. 111. <ul>Plugins </ul><ul><li>Masked Input Plugin
  112. 112. http://digitalbush.com/projects/masked-input-plugin/ </li></ul><ul>jwysiwyg(Editor HTML) http://code.google.com/p/jwysiwyg/ </ul>
  113. 113. <ul>Plugins </ul><ul>jQuery Grid Plugin (data grid) </ul><ul>http://www.trirand.com/blog/ </ul>
  114. 114. <ul>Obrigado </ul><ul>[email_address] <li>SENAC Uruguaiana
  115. 115. G8 Sistemas de Informação - www.g8si.com </li></ul>

×