Este documento fornece uma introdução à biblioteca jQuery: 1) jQuery é uma biblioteca JavaScript que facilita a manipulação de elementos, eventos e animações em páginas web. 2) A biblioteca pode ser incluída através de arquivos locais ou do Google. 3) jQuery permite selecionar elementos de várias formas e modificá-los facilmente.

1. Rodrigo Pletsch Aramburu

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. Quem sou eu?

3. Introdução à biblioteca Selecionando Elementos Modificando o HTML Eventos em páginas Efeitos e animações AJAX com JQuery Plugins Tópicos

4. O que é jQuery? jQuery é um biblioteca JavaScript Visa o desenvolvimento rápido Facilita a manipulação elementos, de eventos, animações e AJAX através de métodos simples

5. Crossbrowser – funciona de maneira igual na

6. maioria dos navegadores disponíveis

7. Incluindo a jQuery A biblioteca pode ser baixada em http://www.jquery.com

8. Incluindo a jQuery Inserir pelo arquivo baixado <script src=&quot;jquery-1.4.2.min.js” language=&quot;javascript“ type=&quot;text/javascript&quot;></script>

9. Ou utilizar a biblioteca pelo Google

10. <script src=&quot; http://www.google.com/jsapi &quot;> </script>

11. <script type=&quot;text/javascript&quot;>

12. google.load(&quot;jquery&quot;, &quot;1.4&quot;);

13. </script>

14. Encontrando elementos em um

15. documento A seleção de elementos é feita de maneira bem simples através da função $(“seletor”) seleciona

16. o(s) elemento(s) do documento e transforma em

17. um objeto jQuery e o retorna para ser

18. manipulado.

19. Encontrando elementos em um documento Os elementos podem ser selecionado por: ID: $(“#divID”) Classe: $(“.botao”) Elemento: $(“a”) Multiplos: $(“.link1,.botao1”) Descendentes: $(“div a”) Atributos: $(“input[type|=text]”)

20. Encontrando elementos em um documento Exemplo:

21. Manipulando o documento A jQuery nos fornece várias funções para manipular o conteúdo de um documento.

22. .html() – .html(string) Retorna o conteúdo de um elemento selecionado ou insere um conteúdo dentro do elemento.

23. .append(string) Adiciona a string ao final do conteúdo do

24. elemento selecionado.

25. .attr(atributo) .attr(atributo,valor) Retorna um valor de um atributo do elemento selecionado ou atribui um valor para atributo

26. do elemento.

27. .val() .val(valor) Retorna o valor do atributo value de um elemento selecionado ou atribui um valor para o

28. elemento.(utilizado para elementos de

29. formulários)

30. .css(propriedade ) .css(propriedade , valor ) Retorna o valor de uma propriedade CSS do elemento selecionado ou configura um novo

31. valor para ela.

32. .

33. .offset() .offset({left : valor, top: valor} ) Retorna a atual coordenada do elemento selecionado ou configura uma nova.

34. .addClass(string) .removeClass(string) Adiciona e remove uma ou mais classes do elemento selecionado.

35. .height() - .height( altura) .width() - .width(largura) Retorna a altura e largura do elemento selecionado ou define uma nova.

36. Quando o DOM esta pronto?

37. Eventos Os métodos de eventos são usados para registrar os comportamentos que serão

38. executados quando o usuário interage com o

39. browser.

40. .click( ) .click( manipulador(event) ) O método click adiciona um determinado comportamento quando o elemento

41. selecionado dispara um evento de clique do

42. mouse.

43. .click( ) Exemplo

44. .focus( manipulador(event) ) O método focus adiciona um determinado comportamento quando o elemento

45. selecionado recebe foco. .focus()

46. .focus()

47. .blur( manipulador(event) ) O método blur adiciona um determinado comportamento quando o elemento

48. selecionado perde o foco. .blur()

49. .blur()

50. .hover() .hover( manipuladorIn(event), manipuldorOut(event) )

51. O método hover adiciona dois comportamentos

52. para um elemento selecionado, quando o

53. mouse fica sobre o elemento e quando o mouse

54. sai

55. .hover()

56. .change( manipulador(event) ) O método change adiciona um determinado comportamento quando o elemento

57. selecionado muda seu valor. .change()

58. .change()

59. .keypress( manipulador(event) ) O método KeyPress adiciona um determinado comportamento quando o elemento

60. selecionado está em foco e é pressionada uma

61. tecla. .keyPres s()

62. .keyPres s()

63. .submit( manipulador(event) ) O método submit adiciona um determinado comportamento quando o formulário

64. selecionado é submetido clicando no botão

65. submit ou apertando a tecla enter. .submit()

66. .submit()

67. Efeitos A jQuery fornece diversas funções para adicionar efeitos em uma página de forma

68. bastante simples.

69. .hide() - .show() .hide( duration, [ callback ] ) Oculta o elemento selecionado .show( duration, [ callback ] ) Mostra o elemento selecionado

70. .hide() - .show()

71. .fadeOut() - .fadeIn() .fadeOut( [ duration ], [ callback ] ) Oculta o elemento selecionado aumentando a transparência.

72. .fadeIn( [ duration ], [ callback ] )

73. Mostra o elemento selecionado diminuindo a

74. transparência.

75. .fadeOut() - .fadeIn()

76. .toggle() .toggle( manipulador1(event), manipulador2(event) ) Alterna entre dois comportamentos informados para cada clique.

77. .toggle()

78. .slideUp() - .slideDown() .slideUp( [ duration ], [ callback ] )) Faz o elemento sumir com o movimento de deslizar. .slideDown( [ duration ], [ callback ] ) Faz o elemento aparecer com o movimento de desliz ar.

79. .slideUp() - .slideDown()

80. .animate() .animate( properties, [ duration ], [ callback ] )) Permite a animação customizada de um conjunto de propriedades CSS.

81. .animate() width: Largura do elemento height: Altura do elemento

82. opacity: Transparencia do elemento

83. marginLeft: Margem esquerda

84. marginTop: Margem superior

85. marginRight: Margem direita

86. marginBottom: Margem inferior

87. top: Posição em relação ao topo(somente funciona se a propriedade positon do CSS

88. estiver em absolute)

89. left: Posição em relação a esquerda(somente funciona se a propriedade positon do

90. CSS estiver em absolute)

91. fontSize: Tamanho da fonte

92. borderWidth: Tamanho da Borda

93. .animate()

94. AJAX É um método em que se utiliza Javascript para fazer uma requisição assíncrona ao servidor

95. buscando apenas uma pequena parte de

96. conteúdo para inseri-lo dinamicamente na

97. página já carregada.

98. .load() .load( url, [ parametros ]) Faz uma requisição GET no servidor e o HTML retornado é inserido no elemento selecionado.

99. .load()

100. jQuery .get() jQuery.get( url, [data], [ callback(data)]) Realiza uma requisição GET e chama a função de callback passando o retorno da requisição como

101. parâmetro data.

102. jQuery .get()

103. jQuery.post() jQuery.post( url, [data], [callback(data)]) Realiza uma requisição GET e chama a função de callback passando o retorno da requisição como

104. parâmetro data.

105. jQuery.post()

106. Plugins Existem diversos plugins para jQuery, cada um fornecendo efeitos e funcionalidade diversas

107. desde mascara de input a datagrid que buscam

108. informações via AJAX, passando por galerias de

109. fotos até slideshow.

110. Plugins Alguns plugins interessantes: jQuery Cycle (slideshow) http://jquery.malsup.com/cycle/ PrettyPhoto (lightbox) http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox- clone/

111. Plugins Masked Input Plugin

112. http://digitalbush.com/projects/masked-input-plugin/ jwysiwyg(Editor HTML) http://code.google.com/p/jwysiwyg/

113. Plugins jQuery Grid Plugin (data grid) http://www.trirand.com/blog/

114. Obrigado [email_address] SENAC Uruguaiana

115. G8 Sistemas de Informação - www.g8si.com