1.

• Rodrigo Pletsch Aramburu

2. Bacharel em Sistemas de Informao. Docente no curso Tcnico em Informtica do Senac Uruguaiana, Scio e desenvolvedor Web na empresa G8 Sistemas de Informao Escrevo para o blog de tecnologia www.botecodigital.info.

Quem sou eu?

3. Introduo biblioteca Selecionando Elementos Modificando o HTML Eventos em pginas Efeitos e animaes AJAX com JQuery Plugins

Tpicos

4.

O que jQuery?

jQuery um biblioteca JavaScriptVisa o desenvolvimento rpido Facilita a manipulao elementos, de eventos,

animaes e AJAX atravs de mtodos simples

5. Crossbrowser funciona de maneira igual na 6. maioria dos navegadoresdisponveis 7.

Incluindo a jQuery

A biblioteca pode ser baixada em

http://www.jquery.com

8.

Incluindo a jQuery

Inserir pelo arquivo baixado

9. Ou utilizar a biblioteca pelo Google 10. 11. 14.

Encontrando elementos em um

15. documento

A seleo de elementos feita de maneira bem

simples atravs da funo$(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 vrias funes para

manipular o contedo de um documento.

22.

.html() .html(string)

Retorna o contedo de um elemento selecionado ou

insere um contedo dentro do elemento.

23.

.append(string)

Adiciona a string ao final do contedo do

24. elemento selecionado. 25.

.attr(atributo).attr(atributo,valor)

Retorna um valor de um atributo do elemento

selecionado ou atribui um valor paraatributo

26. do elemento. 27.

.val() .val(valor)

Retorna o valor do atributovaluede um

elemento selecionado ou atribui um valor para o

28. elemento.(utilizado para elementos de 29. formulrios) 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 largurado elemento

selecionado ou define uma nova.

36.

Quando o DOM esta pronto?

37.

Eventos

Os mtodos de eventos so usados para

registrar os comportamentosque sero

38. executados quando o usurio interage com o 39. browser. 40.

.click( )

.click( manipulador(event) ) O mtodoclickadiciona um determinado

comportamento quando o elemento

41. selecionado dispara um evento de clique do 42. mouse. 43.

.click( )

Exemplo

44.

.focus( manipulador(event) ) O mtodofocusadiciona um determinado

comportamento quando o elemento

45. selecionado recebefoco.

.focus()

46.

.focus()

47.

.blur( manipulador(event) ) O mtodobluradiciona um determinado

comportamento quando o elemento

48. selecionado perde o foco.

.blur()

49.

.blur()

50.

.hover()

.hover( manipuladorIn(event),

manipuldorOut(event) )

51. O mtodohoveradiciona dois comportamentos 52. para um elemento selecionado, quando o 53. mouse ficasobreo elemento e quando o mouse 54. sai 55.

.hover()

56.

.change( manipulador(event) ) O mtodochangeadiciona um determinado

comportamento quando o elemento

57. selecionadomuda seu valor.

.change()

58.

.change()

59.

.keypress( manipulador(event) ) O mtodoKeyPressadiciona um determinado

comportamento quando o elemento

60. selecionadoest em foco e pressionada uma 61. tecla.

.keyPres s()

62.

.keyPres s()

63.

.submit( manipulador(event) ) O mtodosubmitadiciona um determinado

comportamento quando o formulrio

64. selecionado submetido clicando no boto 65. submit ou apertando a tecla enter.

.submit()

66.

.submit()

67.

Efeitos

A jQuery fornece diversas funes para

adicionar efeitos em uma pgina 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

transparncia.

72. .fadeIn( [ duration ], [ callback ]) 73. Mostra o elemento selecionado diminuindo a 74. transparncia. 75.

.fadeOut() - .fadeIn()

76.

.toggle()

.toggle(manipulador1(event),manipulador2(event) ) Alterna entre dois comportamentosinformados

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 animao 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:Posio em relao ao topo(somente funciona se a propriedade positon do CSS 88. estiver em absolute) 89. left:Posio em relao 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 mtodo em que se utiliza Javascript para

fazer uma requisio assncrona ao servidor

95. buscando apenas uma pequena parte de 96. contedo para inseri-lo dinamicamente na 97. pgina j carregada. 98.

.load()

.load( url, [ parametros ]) Faz uma requisio GET no servidor e o HTML

retornado inserido no elemento selecionado.

99.

.load()

100.

jQuery .get()

jQuery.get( url, [data], [ callback(data)]) Realiza uma requisio GET e chama a funo de

callback passando o retorno da requisio como

101. parmetro data. 102.

jQuery .get()

103.

jQuery.post()

jQuery.post( url, [data], [callback(data)]) Realiza uma requisio GET e chama a funo de

callback passando o retorno da requisio como

104. parmetro data. 105.

jQuery.post()

106.

Plugins

Existem diversos plugins para jQuery, cada um

fornecendo efeitos e funcionalidadediversas

107. desde mascara de input a datagridque buscam 108. informaes 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 Informao - www.g8si.com