introdução a jquery
TRANSCRIPT
- 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