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.
3. Introduo biblioteca Selecionando Elementos Modificando o HTML
Eventos em pginas Efeitos e animaes AJAX com JQuery Plugins
4.
- 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.
- A biblioteca pode ser baixada em
- http://www.jquery.com
8.
- 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
21.
- A jQuery nos fornece vrias funes para
- manipular o contedo de um documento.
22.
- Retorna o contedo de um elemento selecionado ou
- insere um contedo dentro do elemento.
23.
- 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.
- 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.
- Os mtodos de eventos so usados para
- registrar os comportamentosque sero
38. executados quando o usurio interage com o 39. browser.
40.
- .click( manipulador(event) ) O mtodoclickadiciona um
determinado
- comportamento quando o elemento
41. selecionado dispara um evento de clique do 42. mouse.
43.
44.
- .focus( manipulador(event) ) O mtodofocusadiciona um
determinado
- comportamento quando o elemento
45. selecionado recebefoco.
46.
47.
- .blur( manipulador(event) ) O mtodobluradiciona um
determinado
- comportamento quando o elemento
48. selecionado perde o foco.
49.
50.
- .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.
56.
- .change( manipulador(event) ) O mtodochangeadiciona um
determinado
- comportamento quando o elemento
57. selecionadomuda seu valor.
58.
59.
- .keypress( manipulador(event) ) O mtodoKeyPressadiciona um
determinado
- comportamento quando o elemento
60. selecionadoest em foco e pressionada uma 61. tecla.
62.
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.
66.
67.
- A jQuery fornece diversas funes para
- adicionar efeitos em uma pgina de forma
68. bastante simples. 69.
- .hide( duration, [ callback ] ) Oculta o elemento selecionado
.show( duration, [ callback ] ) Mostra o elemento selecionado
70.
71.
- .fadeOut( [ duration ], [ callback ] ) Oculta o elemento
selecionado aumentando a
- transparncia.
72. .fadeIn( [ duration ], [ callback ]) 73. Mostra o elemento
selecionado diminuindo a 74. transparncia. 75.
76.
- .toggle(manipulador1(event),manipulador2(event) ) Alterna entre
dois comportamentosinformados
- para cada clique.
77.
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( properties, [ duration ], [ callback ] )) Permite a
animao customizada de um
- conjunto de propriedades CSS.
81.
- 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.
94.
- 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( url, [ parametros ]) Faz uma requisio GET no servidor e
o HTML
- retornado inserido no elemento selecionado.
99.
100.
- 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.
103.
- 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.
106.
- 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.
- Alguns plugins interessantes: jQuery Cycle (slideshow)
- http://jquery.malsup.com/cycle/
-
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-
- clone/
111.
112. http://digitalbush.com/projects/masked-input-plugin/
- jwysiwyg(Editor HTML) http://code.google.com/p/jwysiwyg/
113.
- jQuery Grid Plugin (data grid)
- http://www.trirand.com/blog/
114.
- [email_address]
- SENAC Uruguaiana
115. G8 Sistemas de Informao - www.g8si.com