jQuery - Introdu¸˜o
                                                          ca

                                        ...
Sum´rio
    a
  1    Objetivo
  2    DOM
  3    Javascript N˜o-Obstrusivo
                   a
  4    Informa¸˜es
        ...
Objetivo




  Apresentar o framework jQuery com motivos para uso e as facilidades que
  ele tr´s.
        a




Gustavo D...
DOM

  O que ´?
        e
  DOM, Data Object Model, ´ uma s´rie de objetos e m´todos espec´
                          e   ...
Javascript N˜o-Obstrusivo
             a


  <i n p u t type=” t e x t ” name=” i n i t d a t e ”
              onchange=”...
Javascript N˜o-Obstrusivo
             a


  <i n p u t type=” t e x t ” name=” i n i t d a t e ”
              onchange=”...
Javascript N˜o-Obstrusivo
             a


  <i n p u t type=” t e x t ” name=” i n i t d a t e ”
              onchange=”...
Javascript N˜o-Obstrusivo
             a


  <i n p u t type=” t e x t ” name=” i n i t d a t e ”
              onchange=”...
Javascript N˜o-Obstrusivo
             a



  <i n p u t type=” t e x t ” name=” i n i t d a t e ”
              c l a s s...
Javascript N˜o-Obstrusivo
             a



  <i n p u t type=” t e x t ” name=” i n i t d a t e ”
              c l a s s...
Javascript N˜o-Obstrusivo
             a


  window . o n l o a d = f u n c t i o n ( ) {
          i n p u t s = document...
Javascript N˜o-Obstrusivo
             a



          Qualquer input com a classe ”date” ser´ validado
                   ...
Javascript N˜o-Obstrusivo
             a

          Melhores pr´ticas para resolver os t´
                     a          ...
jQuery




                                          jQuery
                                          Write Less, Do More
...
Informa¸oes
        c˜


          Jquery ´ um framework criado por john Resig que facilita a intera¸˜o
                  ...
´
 Areas

              Core Plugins, interoperabilidade, necess´rio para funcionar
                                      ...
Come¸ando do Come¸o
     c            c

  window.onload vs $(document).ready()
          window.onload ´ executando quand...
Come¸ando do Come¸o
     c            c




          Tudo come¸a com um seletor...
                   c




Gustavo Dutra...
Come¸ando do Come¸o
     c            c




          Tudo come¸a com um seletor...
                   c
          Que se ...
Come¸ando do Come¸o
     c            c




          Tudo come¸a com um seletor...
                   c
          Que se ...
Seletores




Gustavo Dutra (http://gustavodutra.com)   jQuery - Introdu¸˜o
                                              ...
Seletores
          $(’div’)




Gustavo Dutra (http://gustavodutra.com)   jQuery - Introdu¸˜o
                           ...
Seletores
          $(’div’)
          $(’#id’)




Gustavo Dutra (http://gustavodutra.com)   jQuery - Introdu¸˜o
        ...
Seletores
          $(’div’)
          $(’#id’)
          $(’.class’)




Gustavo Dutra (http://gustavodutra.com)   jQuery...
Seletores
          $(’div’)
          $(’#id’)
          $(’.class’)
          $(’div#wrapper > div’)




Gustavo Dutra (...
Seletores
          $(’div’)
          $(’#id’)
          $(’.class’)
          $(’div#wrapper > div’)
          $(’ul li’...
Seletores
          $(’div’)
          $(’#id’)
          $(’.class’)
          $(’div#wrapper > div’)
          $(’ul li’...
Seletores
          $(’div’)
          $(’#id’)
          $(’.class’)
          $(’div#wrapper > div’)
          $(’ul li’...
Seletores
          $(’div’)
          $(’#id’)
          $(’.class’)
          $(’div#wrapper > div’)
          $(’ul li’...
Seletores
          $(’div’)
          $(’#id’)
          $(’.class’)
          $(’div#wrapper > div’)
          $(’ul li’...
Seletores
          $(’div’)
          $(’#id’)
          $(’.class’)
          $(’div#wrapper > div’)
          $(’ul li’...
Seletores
          $(’div’)
          $(’#id’)
          $(’.class’)
          $(’div#wrapper > div’)
          $(’ul li’...
Seletores
          $(’div’)
          $(’#id’)
          $(’.class’)
          $(’div#wrapper > div’)
          $(’ul li’...
Atributos

  $(...).addClass(’class’) Adiciona a classe class




Gustavo Dutra (http://gustavodutra.com)   jQuery - Intro...
Atributos

  $(...).addClass(’class’) Adiciona a classe class
  $(...).removeClass(’class’) Remove a classe class




Gust...
Atributos

  $(...).addClass(’class’) Adiciona a classe class
  $(...).removeClass(’class’) Remove a classe class
  $(...)...
Atributos

  $(...).addClass(’class’) Adiciona a classe class
  $(...).removeClass(’class’) Remove a classe class
  $(...)...
Atributos

  $(...).addClass(’class’) Adiciona a classe class
  $(...).removeClass(’class’) Remove a classe class
  $(...)...
Atributos

  $(...).addClass(’class’) Adiciona a classe class
  $(...).removeClass(’class’) Remove a classe class
  $(...)...
Atributos

  $(...).addClass(’class’) Adiciona a classe class
  $(...).removeClass(’class’) Remove a classe class
  $(...)...
Atributos

  $(...).addClass(’class’) Adiciona a classe class
  $(...).removeClass(’class’) Remove a classe class
  $(...)...
Atributos

  $(...).addClass(’class’) Adiciona a classe class
  $(...).removeClass(’class’) Remove a classe class
  $(...)...
Atributos

  $(...).addClass(’class’) Adiciona a classe class
  $(...).removeClass(’class’) Remove a classe class
  $(...)...
Atributos

  $(...).addClass(’class’) Adiciona a classe class
  $(...).removeClass(’class’) Remove a classe class
  $(...)...
Atributos

  $(...).addClass(’class’) Adiciona a classe class
  $(...).removeClass(’class’) Remove a classe class
  $(...)...
Percorrendo




Gustavo Dutra (http://gustavodutra.com)   jQuery - Introdu¸˜o
                                            ...
Percorrendo



   $(...).next() Seleciona o pr´ximo irm˜o do elemento selecionado
                               o        ...
Percorrendo



   $(...).next() Seleciona o pr´ximo irm˜o do elemento selecionado
                               o        ...
Percorrendo



   $(...).next() Seleciona o pr´ximo irm˜o do elemento selecionado
                               o        ...
Percorrendo



   $(...).next() Seleciona o pr´ximo irm˜o do elemento selecionado
                               o        ...
Percorrendo



   $(...).next() Seleciona o pr´ximo irm˜o do elemento selecionado
                               o        ...
Percorrendo



   $(...).next() Seleciona o pr´ximo irm˜o do elemento selecionado
                               o        ...
Percorrendo



   $(...).next() Seleciona o pr´ximo irm˜o do elemento selecionado
                               o        ...
Percorrendo



   $(...).next() Seleciona o pr´ximo irm˜o do elemento selecionado
                               o        ...
Manipula¸˜o
         ca




Gustavo Dutra (http://gustavodutra.com)   jQuery - Introdu¸˜o
                                ...
Manipula¸˜o
         ca
  $(...).append(’content’) Coloca content no final de cada elemento
                selecionado



...
Manipula¸˜o
         ca
  $(...).append(’content’) Coloca content no final de cada elemento
                selecionado
  $...
Manipula¸˜o
         ca
  $(...).append(’content’) Coloca content no final de cada elemento
                selecionado
  $...
Manipula¸˜o
         ca
  $(...).append(’content’) Coloca content no final de cada elemento
                selecionado
  $...
Manipula¸˜o
         ca
  $(...).append(’content’) Coloca content no final de cada elemento
                  selecionado
 ...
Manipula¸˜o
         ca
  $(...).append(’content’) Coloca content no final de cada elemento
                  selecionado
 ...
Manipula¸˜o
         ca
  $(...).append(’content’) Coloca content no final de cada elemento
                  selecionado
 ...
Manipula¸˜o
         ca
  $(...).append(’content’) Coloca content no final de cada elemento
                  selecionado
 ...
Manipula¸˜o
         ca
  $(...).append(’content’) Coloca content no final de cada elemento
                  selecionado
 ...
Manipula¸˜o
         ca
  $(...).append(’content’) Coloca content no final de cada elemento
                  selecionado
 ...
Manipula¸˜o
         ca
  $(...).append(’content’) Coloca content no final de cada elemento
                  selecionado
 ...
Manipula¸˜o
         ca
  $(...).append(’content’) Coloca content no final de cada elemento
                  selecionado
 ...
Eventos




Gustavo Dutra (http://gustavodutra.com)   jQuery - Introdu¸˜o
                                                ...
Eventos



          $(...).click() - $(...).click(function() { })




Gustavo Dutra (http://gustavodutra.com)   jQuery - ...
Eventos



          $(...).click() - $(...).click(function() { })
          $(...).dblclick() - $(...).dblclick(function(...
Eventos



          $(...).click() - $(...).click(function() { })
          $(...).dblclick() - $(...).dblclick(function(...
Eventos



          $(...).click() - $(...).click(function() { })
          $(...).dblclick() - $(...).dblclick(function(...
Eventos



          $(...).click() - $(...).click(function() { })
          $(...).dblclick() - $(...).dblclick(function(...
Eventos



          $(...).click() - $(...).click(function() { })
          $(...).dblclick() - $(...).dblclick(function(...
Eventos



          $(...).click() - $(...).click(function() { })
          $(...).dblclick() - $(...).dblclick(function(...
Eventos


  $(...).bind()
          $(...).bind(’blur’, function() { })
          $(...).bind(’meuEvento’, function() { })...
Eventos


  $(...).bind()
          $(...).bind(’blur’, function() { })
          $(...).bind(’meuEvento’, function() { })...
Eventos


  $(...).bind()
          $(...).bind(’blur’, function() { })
          $(...).bind(’meuEvento’, function() { })...
Efeitos




Gustavo Dutra (http://gustavodutra.com)   jQuery - Introdu¸˜o
                                                ...
Efeitos



          $(...).show()




Gustavo Dutra (http://gustavodutra.com)   jQuery - Introdu¸˜o
                     ...
Efeitos



          $(...).show()
          $(...).hide()




Gustavo Dutra (http://gustavodutra.com)   jQuery - Introdu¸...
Efeitos



          $(...).show()
          $(...).hide()
          $(...).toogle()




Gustavo Dutra (http://gustavodutr...
Efeitos



          $(...).show()
          $(...).hide()
          $(...).toogle()
          $(...).fadeIn()




Gustavo...
Efeitos



          $(...).show()
          $(...).hide()
          $(...).toogle()
          $(...).fadeIn()
          $...
Efeitos



          $(...).show()
          $(...).hide()
          $(...).toogle()
          $(...).fadeIn()
          $...
Efeitos



          $(...).show()
          $(...).hide()
          $(...).toogle()
          $(...).fadeIn()
          $...
D´vidas
  u




                                          D´vidas?
                                           u
          ...
Upcoming SlideShare
Loading in …5
×

Jquery - Introdução v0.1

2,857 views
2,741 views

Published on

Uma introdução ao framework javascript jquery.

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
2,857
On SlideShare
0
From Embeds
0
Number of Embeds
57
Actions
Shares
0
Downloads
121
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Jquery - Introdução v0.1

  1. 1. jQuery - Introdu¸˜o ca Gustavo Dutra http://gustavodutra.com November 14, 2009 Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 1 / 22
  2. 2. Sum´rio a 1 Objetivo 2 DOM 3 Javascript N˜o-Obstrusivo a 4 Informa¸˜es co 5 ´ Areas 6 Come¸ando do Come¸o c c 7 Seletores 8 Atributos 9 Percorrendo 10 Manipula¸˜o ca 11 Eventos 12 Efeitos 13 D´vidas u Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 2 / 22
  3. 3. Objetivo Apresentar o framework jQuery com motivos para uso e as facilidades que ele tr´s. a Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 3 / 22
  4. 4. DOM O que ´? e DOM, Data Object Model, ´ uma s´rie de objetos e m´todos espec´ e e e ıficos para HTML. Figure: DOM Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 4 / 22
  5. 5. Javascript N˜o-Obstrusivo a <i n p u t type=” t e x t ” name=” i n i t d a t e ” onchange=” v a l i d a t e D a t e ( t h i s ) ; ” /> <i n p u t type=” t e x t ” name=” e n d d a t e ” onchange=” v a l i d a t e D a t e ( t h i s ) ; ” /> Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 5 / 22
  6. 6. Javascript N˜o-Obstrusivo a <i n p u t type=” t e x t ” name=” i n i t d a t e ” onchange=” v a l i d a t e D a t e ( t h i s ) ; ” /> <i n p u t type=” t e x t ” name=” e n d d a t e ” onchange=” v a l i d a t e D a t e ( t h i s ) ; ” /> E se n˜o estiver com javascript habilitado? a Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 5 / 22
  7. 7. Javascript N˜o-Obstrusivo a <i n p u t type=” t e x t ” name=” i n i t d a t e ” onchange=” v a l i d a t e D a t e ( t h i s ) ; ” /> <i n p u t type=” t e x t ” name=” e n d d a t e ” onchange=” v a l i d a t e D a t e ( t h i s ) ; ” /> E se n˜o estiver com javascript habilitado? a E se o nome da fun¸˜o javascript mudar? ca Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 5 / 22
  8. 8. Javascript N˜o-Obstrusivo a <i n p u t type=” t e x t ” name=” i n i t d a t e ” onchange=” v a l i d a t e D a t e ( t h i s ) ; ” /> <i n p u t type=” t e x t ” name=” e n d d a t e ” onchange=” v a l i d a t e D a t e ( t h i s ) ; ” /> E se n˜o estiver com javascript habilitado? a E se o nome da fun¸˜o javascript mudar? ca E se for necess´rio adicionar um novo parˆmetro? a a Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 5 / 22
  9. 9. Javascript N˜o-Obstrusivo a <i n p u t type=” t e x t ” name=” i n i t d a t e ” c l a s s=” d a t e ” /> <i n p u t type=” t e x t ” name=” e n d d a t e ” c l a s s=” d a t e ” /> Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 6 / 22
  10. 10. Javascript N˜o-Obstrusivo a <i n p u t type=” t e x t ” name=” i n i t d a t e ” c l a s s=” d a t e ” /> <i n p u t type=” t e x t ” name=” e n d d a t e ” c l a s s=” d a t e ” /> E se o HTML apenas avisar ”este campo cont´m uma data” ? e Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 6 / 22
  11. 11. Javascript N˜o-Obstrusivo a window . o n l o a d = f u n c t i o n ( ) { i n p u t s = document . getElementsByTagName ( ’ i n p u t ’ ) ; f o r ( v a r i =0, l=i n p u t s . l e n g t h ; i <l ; i ++){ i f ( i n p u t s [ i ] . className && i n p u t s [ i ] . c l a s s N a m e==’ d a t e ’ i n p u t . onchange = f u n c t i o n ( ) { validateDate ( this ); } } } }; f u n c t i o n validateDate ( element ) { } Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 7 / 22
  12. 12. Javascript N˜o-Obstrusivo a Qualquer input com a classe ”date” ser´ validado a F´cil manuten¸˜o com c´digos mais limpos a ca o Separa¸˜o das camadas (apresenta¸˜o, conte´do e intera¸˜o) ca ca u ca Com javascript desabilitado, n˜o h´ valida¸˜o, mas tamb´m n˜o h´ a a ca e a a erros HTML Respons´vel somente pelo conte´do a u CSS Respons´vel pela apresenta¸˜o a ca Javascript Respons´vel pela intera¸˜o com o usu´rio a ca a Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 8 / 22
  13. 13. Javascript N˜o-Obstrusivo a Melhores pr´ticas para resolver os t´ a ıpicos problemas cross-browsers como progressive enhancement/graceful degradation N˜o suponha que o JavaScript estar´ habilitado, otimize seu c´digo a a o para n˜o ficar dependente dele; a N˜o suponha que os browsers interpretar˜o corretamente a a determinados m´todos e propriedades, teste individualmente em cada e browser antes de publicar; N˜o suponha que o c´digo HTML estar´ correto, verifique-o e n˜o a o a a fa¸a nada at´ que ele esteja devidamente estruturado; c e Mantenha a funcionalidade independente do dispositivo do qual seu site ´ acessado; e Suponha que outros scripts tentar˜o interferir com o seu e mantenha a o seu script o mais seguro poss´ ıvel. Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 9 / 22
  14. 14. jQuery jQuery Write Less, Do More Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 10 / 22
  15. 15. Informa¸oes c˜ Jquery ´ um framework criado por john Resig que facilita a intera¸˜o e ca entre javascript e html Tem foco na simplicidade. Por que desenvolver longos e complexos c´digos para simples efeitos? o Primeira vers˜o, 1.0a, foi lan¸ada em junho de 2006 a c Primeira vers˜o est´vel, 1.0, lan¸ada em agosto de 2006 a a c ´ Ultima vers˜o ´ a 1.3.2, lan¸ada em fevereiro de 2009 a e c Vers˜o 1.4 programada para at´ o fim de 2009 a e Todo framework tem 19KB minificado e com gzip Compat´ com IE6+, FF2.0+, Safari 3.0+, Opera 9.0+, Chrome ıvel Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 11 / 22
  16. 16. ´ Areas Core Plugins, interoperabilidade, necess´rio para funcionar a Selectors Seletores de elementos do DOM Atributos Manipula¸˜o de atributos do DOM ca Traversing Percorrer os elementos DOM Manipulation Manipula¸˜o dos elementos DOM ca CSS Manipula¸˜o de propriedades CSS dos elementos do DOM ca Events Eventos do DOM Effects Efeitos Ajax Requisi¸˜es s´ co ıncronas e ass´ ıncronas Utilities Fun¸˜es para utiliza¸˜o geral, que facilitam o co ca desenvolvimento UI Integra¸˜o para User Interface (pacote de ´ ca ıcones, bot˜es, o estilos, elementos, ...) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 12 / 22
  17. 17. Come¸ando do Come¸o c c window.onload vs $(document).ready() window.onload ´ executando quando alguns elementos ainda n˜o e a foram criados window.onload somente pode ser usado uma vez $(document).ready() ´ executando quando toda p´gina foi carregada e a $(document).ready() vai agregando fun¸˜es co Logo... $(document).ready(function() { // c´digo o }); ou $(function() { // c´digo o }); Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 13 / 22
  18. 18. Come¸ando do Come¸o c c Tudo come¸a com um seletor... c Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 14 / 22
  19. 19. Come¸ando do Come¸o c c Tudo come¸a com um seletor... c Que se torna um Array de elementos que casam com este seletor Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 14 / 22
  20. 20. Come¸ando do Come¸o c c Tudo come¸a com um seletor... c Que se torna um Array de elementos que casam com este seletor Cada m´todo ´ executado para todos os elementos selecionados e e Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 14 / 22
  21. 21. Seletores Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 15 / 22
  22. 22. Seletores $(’div’) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 15 / 22
  23. 23. Seletores $(’div’) $(’#id’) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 15 / 22
  24. 24. Seletores $(’div’) $(’#id’) $(’.class’) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 15 / 22
  25. 25. Seletores $(’div’) $(’#id’) $(’.class’) $(’div#wrapper > div’) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 15 / 22
  26. 26. Seletores $(’div’) $(’#id’) $(’.class’) $(’div#wrapper > div’) $(’ul li’) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 15 / 22
  27. 27. Seletores $(’div’) $(’#id’) $(’.class’) $(’div#wrapper > div’) $(’ul li’) $(’li.active ˜ li’) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 15 / 22
  28. 28. Seletores $(’div’) $(’#id’) $(’.class’) $(’div#wrapper > div’) $(’ul li’) $(’li.active ˜ li’) $(’ul li:first,ul li:last’) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 15 / 22
  29. 29. Seletores $(’div’) $(’#id’) $(’.class’) $(’div#wrapper > div’) $(’ul li’) $(’li.active ˜ li’) $(’ul li:first,ul li:last’) $(’ul li:not(li.active)’) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 15 / 22
  30. 30. Seletores $(’div’) $(’#id’) $(’.class’) $(’div#wrapper > div’) $(’ul li’) $(’li.active ˜ li’) $(’ul li:first,ul li:last’) $(’ul li:not(li.active)’) $(’li:contains(Home)’) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 15 / 22
  31. 31. Seletores $(’div’) $(’#id’) $(’.class’) $(’div#wrapper > div’) $(’ul li’) $(’li.active ˜ li’) $(’ul li:first,ul li:last’) $(’ul li:not(li.active)’) $(’li:contains(Home)’) $(’input:checked’) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 15 / 22
  32. 32. Seletores $(’div’) $(’#id’) $(’.class’) $(’div#wrapper > div’) $(’ul li’) $(’li.active ˜ li’) $(’ul li:first,ul li:last’) $(’ul li:not(li.active)’) $(’li:contains(Home)’) $(’input:checked’) $(’input[name=search]’, $(’div#menu’) ) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 15 / 22
  33. 33. Seletores $(’div’) $(’#id’) $(’.class’) $(’div#wrapper > div’) $(’ul li’) $(’li.active ˜ li’) $(’ul li:first,ul li:last’) $(’ul li:not(li.active)’) $(’li:contains(Home)’) $(’input:checked’) $(’input[name=search]’, $(’div#menu’) ) = igual a != diferente de ˆ= inicia com $= termina com *= cont´m e Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 15 / 22
  34. 34. Atributos $(...).addClass(’class’) Adiciona a classe class Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 16 / 22
  35. 35. Atributos $(...).addClass(’class’) Adiciona a classe class $(...).removeClass(’class’) Remove a classe class Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 16 / 22
  36. 36. Atributos $(...).addClass(’class’) Adiciona a classe class $(...).removeClass(’class’) Remove a classe class $(...).toggleClass(’class’) Se tiver a classe class remove, caso contr´rio a adiciona Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 16 / 22
  37. 37. Atributos $(...).addClass(’class’) Adiciona a classe class $(...).removeClass(’class’) Remove a classe class $(...).toggleClass(’class’) Se tiver a classe class remove, caso contr´rio a adiciona $(...).attr(’id’) Retorna o valor do atributo id Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 16 / 22
  38. 38. Atributos $(...).addClass(’class’) Adiciona a classe class $(...).removeClass(’class’) Remove a classe class $(...).toggleClass(’class’) Se tiver a classe class remove, caso contr´rio a adiciona $(...).attr(’id’) Retorna o valor do atributo id $(...).attr(’id’,’novo-id’) Muda o valor do atributo id Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 16 / 22
  39. 39. Atributos $(...).addClass(’class’) Adiciona a classe class $(...).removeClass(’class’) Remove a classe class $(...).toggleClass(’class’) Se tiver a classe class remove, caso contr´rio a adiciona $(...).attr(’id’) Retorna o valor do atributo id $(...).attr(’id’,’novo-id’) Muda o valor do atributo id $(...).removeAttr(’id’) Remove o atributo id do elemento Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 16 / 22
  40. 40. Atributos $(...).addClass(’class’) Adiciona a classe class $(...).removeClass(’class’) Remove a classe class $(...).toggleClass(’class’) Se tiver a classe class remove, caso contr´rio a adiciona $(...).attr(’id’) Retorna o valor do atributo id $(...).attr(’id’,’novo-id’) Muda o valor do atributo id $(...).removeAttr(’id’) Remove o atributo id do elemento $(...).html() Retorna o .innerHTML Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 16 / 22
  41. 41. Atributos $(...).addClass(’class’) Adiciona a classe class $(...).removeClass(’class’) Remove a classe class $(...).toggleClass(’class’) Se tiver a classe class remove, caso contr´rio a adiciona $(...).attr(’id’) Retorna o valor do atributo id $(...).attr(’id’,’novo-id’) Muda o valor do atributo id $(...).removeAttr(’id’) Remove o atributo id do elemento $(...).html() Retorna o .innerHTML $(...).html(’hi’) Muda o .innerHTML para “hi” Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 16 / 22
  42. 42. Atributos $(...).addClass(’class’) Adiciona a classe class $(...).removeClass(’class’) Remove a classe class $(...).toggleClass(’class’) Se tiver a classe class remove, caso contr´rio a adiciona $(...).attr(’id’) Retorna o valor do atributo id $(...).attr(’id’,’novo-id’) Muda o valor do atributo id $(...).removeAttr(’id’) Remove o atributo id do elemento $(...).html() Retorna o .innerHTML $(...).html(’hi’) Muda o .innerHTML para “hi” $(...).val() Retorna o valor do atributo value Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 16 / 22
  43. 43. Atributos $(...).addClass(’class’) Adiciona a classe class $(...).removeClass(’class’) Remove a classe class $(...).toggleClass(’class’) Se tiver a classe class remove, caso contr´rio a adiciona $(...).attr(’id’) Retorna o valor do atributo id $(...).attr(’id’,’novo-id’) Muda o valor do atributo id $(...).removeAttr(’id’) Remove o atributo id do elemento $(...).html() Retorna o .innerHTML $(...).html(’hi’) Muda o .innerHTML para “hi” $(...).val() Retorna o valor do atributo value $(...).val(’hi’) Muda o valor do atributo value Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 16 / 22
  44. 44. Atributos $(...).addClass(’class’) Adiciona a classe class $(...).removeClass(’class’) Remove a classe class $(...).toggleClass(’class’) Se tiver a classe class remove, caso contr´rio a adiciona $(...).attr(’id’) Retorna o valor do atributo id $(...).attr(’id’,’novo-id’) Muda o valor do atributo id $(...).removeAttr(’id’) Remove o atributo id do elemento $(...).html() Retorna o .innerHTML $(...).html(’hi’) Muda o .innerHTML para “hi” $(...).val() Retorna o valor do atributo value $(...).val(’hi’) Muda o valor do atributo value $(...).text() Retorna o texto de um elemento (TextNode) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 16 / 22
  45. 45. Atributos $(...).addClass(’class’) Adiciona a classe class $(...).removeClass(’class’) Remove a classe class $(...).toggleClass(’class’) Se tiver a classe class remove, caso contr´rio a adiciona $(...).attr(’id’) Retorna o valor do atributo id $(...).attr(’id’,’novo-id’) Muda o valor do atributo id $(...).removeAttr(’id’) Remove o atributo id do elemento $(...).html() Retorna o .innerHTML $(...).html(’hi’) Muda o .innerHTML para “hi” $(...).val() Retorna o valor do atributo value $(...).val(’hi’) Muda o valor do atributo value $(...).text() Retorna o texto de um elemento (TextNode) $(...).text(’hi’) Muda o texto de um elemento (TextNode) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 16 / 22
  46. 46. Percorrendo Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 17 / 22
  47. 47. Percorrendo $(...).next() Seleciona o pr´ximo irm˜o do elemento selecionado o a Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 17 / 22
  48. 48. Percorrendo $(...).next() Seleciona o pr´ximo irm˜o do elemento selecionado o a $(...).prev() Seleciona o irm˜o anterior ao elemento selecionado a Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 17 / 22
  49. 49. Percorrendo $(...).next() Seleciona o pr´ximo irm˜o do elemento selecionado o a $(...).prev() Seleciona o irm˜o anterior ao elemento selecionado a $(...).parent() Seleciona o elemento pai Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 17 / 22
  50. 50. Percorrendo $(...).next() Seleciona o pr´ximo irm˜o do elemento selecionado o a $(...).prev() Seleciona o irm˜o anterior ao elemento selecionado a $(...).parent() Seleciona o elemento pai $(...).children() Seleciona o(s) elemento(s) filho(s) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 17 / 22
  51. 51. Percorrendo $(...).next() Seleciona o pr´ximo irm˜o do elemento selecionado o a $(...).prev() Seleciona o irm˜o anterior ao elemento selecionado a $(...).parent() Seleciona o elemento pai $(...).children() Seleciona o(s) elemento(s) filho(s) $(...).add(...) Adiciona mais elementos ao array de sele¸˜o ca Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 17 / 22
  52. 52. Percorrendo $(...).next() Seleciona o pr´ximo irm˜o do elemento selecionado o a $(...).prev() Seleciona o irm˜o anterior ao elemento selecionado a $(...).parent() Seleciona o elemento pai $(...).children() Seleciona o(s) elemento(s) filho(s) $(...).add(...) Adiciona mais elementos ao array de sele¸˜o ca $(...).filter(...) Mant´m somente os que casarem com o seletor e Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 17 / 22
  53. 53. Percorrendo $(...).next() Seleciona o pr´ximo irm˜o do elemento selecionado o a $(...).prev() Seleciona o irm˜o anterior ao elemento selecionado a $(...).parent() Seleciona o elemento pai $(...).children() Seleciona o(s) elemento(s) filho(s) $(...).add(...) Adiciona mais elementos ao array de sele¸˜o ca $(...).filter(...) Mant´m somente os que casarem com o seletor e $(...).not(...) Remove os que casarem com o seletor Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 17 / 22
  54. 54. Percorrendo $(...).next() Seleciona o pr´ximo irm˜o do elemento selecionado o a $(...).prev() Seleciona o irm˜o anterior ao elemento selecionado a $(...).parent() Seleciona o elemento pai $(...).children() Seleciona o(s) elemento(s) filho(s) $(...).add(...) Adiciona mais elementos ao array de sele¸˜o ca $(...).filter(...) Mant´m somente os que casarem com o seletor e $(...).not(...) Remove os que casarem com o seletor $(...).eq(...) Vai para um offset espec´ ıfico do array de sele¸˜o ca Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 17 / 22
  55. 55. Manipula¸˜o ca Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 18 / 22
  56. 56. Manipula¸˜o ca $(...).append(’content’) Coloca content no final de cada elemento selecionado Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 18 / 22
  57. 57. Manipula¸˜o ca $(...).append(’content’) Coloca content no final de cada elemento selecionado $(...).prepend(’content’) Coloca content no in´ de cada elemento ıcio selecionado Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 18 / 22
  58. 58. Manipula¸˜o ca $(...).append(’content’) Coloca content no final de cada elemento selecionado $(...).prepend(’content’) Coloca content no in´ de cada elemento ıcio selecionado $(...).appendTo(element) Coloca o elemento selecionado no final de element Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 18 / 22
  59. 59. Manipula¸˜o ca $(...).append(’content’) Coloca content no final de cada elemento selecionado $(...).prepend(’content’) Coloca content no in´ de cada elemento ıcio selecionado $(...).appendTo(element) Coloca o elemento selecionado no final de element $(...).prependTo(element) Coloca o elemento selecionado no in´ de ıcio element Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 18 / 22
  60. 60. Manipula¸˜o ca $(...).append(’content’) Coloca content no final de cada elemento selecionado $(...).prepend(’content’) Coloca content no in´ de cada elemento ıcio selecionado $(...).appendTo(element) Coloca o elemento selecionado no final de element $(...).prependTo(element) Coloca o elemento selecionado no in´ deıcio element $(...).after(’content’) Insere content depois do elemento selecionado Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 18 / 22
  61. 61. Manipula¸˜o ca $(...).append(’content’) Coloca content no final de cada elemento selecionado $(...).prepend(’content’) Coloca content no in´ de cada elemento ıcio selecionado $(...).appendTo(element) Coloca o elemento selecionado no final de element $(...).prependTo(element) Coloca o elemento selecionado no in´ deıcio element $(...).after(’content’) Insere content depois do elemento selecionado $(...).before(’content’) Insere content antes do elemento selecionado Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 18 / 22
  62. 62. Manipula¸˜o ca $(...).append(’content’) Coloca content no final de cada elemento selecionado $(...).prepend(’content’) Coloca content no in´ de cada elemento ıcio selecionado $(...).appendTo(element) Coloca o elemento selecionado no final de element $(...).prependTo(element) Coloca o elemento selecionado no in´ deıcio element $(...).after(’content’) Insere content depois do elemento selecionado $(...).before(’content’) Insere content antes do elemento selecionado $(...).insertAfter(element) Insere o elemento selecionado depois de element Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 18 / 22
  63. 63. Manipula¸˜o ca $(...).append(’content’) Coloca content no final de cada elemento selecionado $(...).prepend(’content’) Coloca content no in´ de cada elemento ıcio selecionado $(...).appendTo(element) Coloca o elemento selecionado no final de element $(...).prependTo(element) Coloca o elemento selecionado no in´ deıcio element $(...).after(’content’) Insere content depois do elemento selecionado $(...).before(’content’) Insere content antes do elemento selecionado $(...).insertAfter(element) Insere o elemento selecionado depois de element $(...).insertBefore(element) Insere o elemento selcionado antes de element Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 18 / 22
  64. 64. Manipula¸˜o ca $(...).append(’content’) Coloca content no final de cada elemento selecionado $(...).prepend(’content’) Coloca content no in´ de cada elemento ıcio selecionado $(...).appendTo(element) Coloca o elemento selecionado no final de element $(...).prependTo(element) Coloca o elemento selecionado no in´ deıcio element $(...).after(’content’) Insere content depois do elemento selecionado $(...).before(’content’) Insere content antes do elemento selecionado $(...).insertAfter(element) Insere o elemento selecionado depois de element $(...).insertBefore(element) Insere o elemento selcionado antes de element $(...).clone() Retorna uma c´pia do elemento selecionado o Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 18 / 22
  65. 65. Manipula¸˜o ca $(...).append(’content’) Coloca content no final de cada elemento selecionado $(...).prepend(’content’) Coloca content no in´ de cada elemento ıcio selecionado $(...).appendTo(element) Coloca o elemento selecionado no final de element $(...).prependTo(element) Coloca o elemento selecionado no in´ deıcio element $(...).after(’content’) Insere content depois do elemento selecionado $(...).before(’content’) Insere content antes do elemento selecionado $(...).insertAfter(element) Insere o elemento selecionado depois de element $(...).insertBefore(element) Insere o elemento selcionado antes de element $(...).clone() Retorna uma c´pia do elemento selecionado o $(...).wrap(’<tag><tag>’) Coloca a tag em volta do elemento selecionado Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 18 / 22
  66. 66. Manipula¸˜o ca $(...).append(’content’) Coloca content no final de cada elemento selecionado $(...).prepend(’content’) Coloca content no in´ de cada elemento ıcio selecionado $(...).appendTo(element) Coloca o elemento selecionado no final de element $(...).prependTo(element) Coloca o elemento selecionado no in´ deıcio element $(...).after(’content’) Insere content depois do elemento selecionado $(...).before(’content’) Insere content antes do elemento selecionado $(...).insertAfter(element) Insere o elemento selecionado depois de element $(...).insertBefore(element) Insere o elemento selcionado antes de element $(...).clone() Retorna uma c´pia do elemento selecionado o $(...).wrap(’<tag><tag>’) Coloca a tag em volta do elemento selecionado $(...).empty() Remove todos os filhos do elemento selecionado Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 18 / 22
  67. 67. Manipula¸˜o ca $(...).append(’content’) Coloca content no final de cada elemento selecionado $(...).prepend(’content’) Coloca content no in´ de cada elemento ıcio selecionado $(...).appendTo(element) Coloca o elemento selecionado no final de element $(...).prependTo(element) Coloca o elemento selecionado no in´ deıcio element $(...).after(’content’) Insere content depois do elemento selecionado $(...).before(’content’) Insere content antes do elemento selecionado $(...).insertAfter(element) Insere o elemento selecionado depois de element $(...).insertBefore(element) Insere o elemento selcionado antes de element $(...).clone() Retorna uma c´pia do elemento selecionado o $(...).wrap(’<tag><tag>’) Coloca a tag em volta do elemento selecionado $(...).empty() Remove todos os filhos do elemento selecionado Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 18 / 22
  68. 68. Eventos Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 19 / 22
  69. 69. Eventos $(...).click() - $(...).click(function() { }) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 19 / 22
  70. 70. Eventos $(...).click() - $(...).click(function() { }) $(...).dblclick() - $(...).dblclick(function() { }) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 19 / 22
  71. 71. Eventos $(...).click() - $(...).click(function() { }) $(...).dblclick() - $(...).dblclick(function() { }) $(...).blur() - $(...).blur(function() { }) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 19 / 22
  72. 72. Eventos $(...).click() - $(...).click(function() { }) $(...).dblclick() - $(...).dblclick(function() { }) $(...).blur() - $(...).blur(function() { }) $(...).change() - $(...).change(function() { }) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 19 / 22
  73. 73. Eventos $(...).click() - $(...).click(function() { }) $(...).dblclick() - $(...).dblclick(function() { }) $(...).blur() - $(...).blur(function() { }) $(...).change() - $(...).change(function() { }) $(...).keypress() - $(...).keypress(function() { }) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 19 / 22
  74. 74. Eventos $(...).click() - $(...).click(function() { }) $(...).dblclick() - $(...).dblclick(function() { }) $(...).blur() - $(...).blur(function() { }) $(...).change() - $(...).change(function() { }) $(...).keypress() - $(...).keypress(function() { }) $(...).keyup() - $(...).keyup(function() { }) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 19 / 22
  75. 75. Eventos $(...).click() - $(...).click(function() { }) $(...).dblclick() - $(...).dblclick(function() { }) $(...).blur() - $(...).blur(function() { }) $(...).change() - $(...).change(function() { }) $(...).keypress() - $(...).keypress(function() { }) $(...).keyup() - $(...).keyup(function() { }) $(...).hover(function() { },function() { }) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 19 / 22
  76. 76. Eventos $(...).bind() $(...).bind(’blur’, function() { }) $(...).bind(’meuEvento’, function() { }) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 20 / 22
  77. 77. Eventos $(...).bind() $(...).bind(’blur’, function() { }) $(...).bind(’meuEvento’, function() { }) $(...).trigger() $(...).trigger(’blur’) $(...).trigger(’meuEvento’) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 20 / 22
  78. 78. Eventos $(...).bind() $(...).bind(’blur’, function() { }) $(...).bind(’meuEvento’, function() { }) $(...).trigger() $(...).trigger(’blur’) $(...).trigger(’meuEvento’) $(...).triggerHandler() $(...).triggerHandler(’blur’) $(...).triggerHandler(’change’) Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 20 / 22
  79. 79. Efeitos Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 21 / 22
  80. 80. Efeitos $(...).show() Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 21 / 22
  81. 81. Efeitos $(...).show() $(...).hide() Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 21 / 22
  82. 82. Efeitos $(...).show() $(...).hide() $(...).toogle() Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 21 / 22
  83. 83. Efeitos $(...).show() $(...).hide() $(...).toogle() $(...).fadeIn() Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 21 / 22
  84. 84. Efeitos $(...).show() $(...).hide() $(...).toogle() $(...).fadeIn() $(...).fadeOut() Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 21 / 22
  85. 85. Efeitos $(...).show() $(...).hide() $(...).toogle() $(...).fadeIn() $(...).fadeOut() $(...).slideDown() Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 21 / 22
  86. 86. Efeitos $(...).show() $(...).hide() $(...).toogle() $(...).fadeIn() $(...).fadeOut() $(...).slideDown() $(...).slideUp() Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 21 / 22
  87. 87. D´vidas u D´vidas? u Agradecimento especial Luan Garcia Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o ca November 14, 2009 22 / 22

×