Your SlideShare is downloading. ×
0
 
O que é jQuery? <ul><li>     jQuery é uma biblioteca javascript rápida e concisa que simplifica a manipulação de um documen...
O que é jQuery? <ul><li>•  percorrer o DOM </li></ul><ul><li>•  manipulação de evento </li></ul><ul><li>•  animações </li>...
jQuery é JavaScript <ul><li>     jQuery é apenas um conjunto de métodos prontos em </li></ul><ul><li>JavaScript, não há ne...
Como inserir o jQuery na página <ul><li>     <script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;></script> ...
Como inserir o jQuery na página <ul><li>     <script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;></script> ...
Como inserir o jQuery na página <ul><li><script  </li></ul><ul><li>    type=&quot;text/javascript&quot;    src=&quot;http:...
Vamos colocar o jQuery pra funcionar <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>   window.onload ...
Vamos colocar o jQuery pra funcionar <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>   jQuery(documen...
jQuery é mais simples! <ul><li>var elemento = document.getElementById </li></ul><ul><li>(‘nomeElemento’); </li></ul><ul><l...
jQuery é mais simples! <ul><li>var elemento = document.getElementById </li></ul><ul><li>(‘nomeElemento’); </li></ul><ul><l...
jQuery é muito mais simples! <ul><li>$(‘#nomeElemento’).hide(‘fast’); </li></ul><ul><li>$(‘#nomeElemento’).show(‘slow’); <...
jQuery é ainda mais simples! <ul><li>$(‘#nomeElemento’) </li></ul><ul><li>   .hide(‘fast’) </li></ul><ul><li>   .show(‘slo...
jQuery: Conceitos Básicos <ul><li><a id=”ancoraEspecial” href=”#”>Pode clicar</a> </li></ul><ul><li><script type=”text/jav...
Seletores do jQuery <ul><li>Seletores CSS </li></ul><ul><li>tag                                div </li></ul><ul><li>.clas...
Seletores do jQuery <ul><li><div class=”caixa”> </li></ul><ul><li>   <a id=”link” href=”#”>Clique aqui</a> </li></ul><ul><...
Seletores do jQuery <ul><li><div class=”caixa”> </li></ul><ul><li>   <a id=”link” href=”#”>Clique aqui</a> </li></ul><ul><...
Seletores do jQuery <ul><li><div class=”caixa”> </li></ul><ul><li>   <a id=”link” href=”#”>Clique aqui</a> </li></ul><ul><...
Seletores do jQuery <ul><li><div class=”caixa”> </li></ul><ul><li>   <a id=”link” href=”#”>Clique aqui</a> </li></ul><ul><...
Seletores do jQuery <ul><li><div class=”caixa”> </li></ul><ul><li>   <a id=”link” href=”#”>Clique aqui</a> </li></ul><ul><...
Hierarquia dos Seletores <ul><li>< div id=”elemento”> </li></ul><ul><li>   <a href=”#”>Link selecionado</a> </li></ul><ul>...
Hierarquia dos Seletores <ul><li>$(‘#elemento a’)  </li></ul><ul><li>$(‘#elemento’).find(‘a’) </li></ul>
Hierarquia dos Seletores <ul><li><div id=”elemento”> </li></ul><ul><li>   <a href=”#”>Link selecionado</a> </li></ul><ul><...
Hierarquia dos Seletores <ul><li>$(‘div > a’)  </li></ul><ul><li>$(‘div’).children(‘a’) </li></ul>
Hierarquia dos Seletores <ul><li><ul> </li></ul><ul><li>   <li><a href=”#”>link 1</a></li> </li></ul><ul><li>   <li><a hre...
Hierarquia dos Seletores <ul><li>  </li></ul><ul><li>$(‘a.marca’).parent() </li></ul>
Hierarquia dos Seletores <ul><li><ul> </li></ul><ul><li>   <li><a href=”#”>link 1</a></li> </li></ul><ul><li>   <li><a hre...
Hierarquia dos Seletores <ul><li>  </li></ul><ul><li>$(‘#item’).next() </li></ul>
Hierarquia dos Seletores <ul><li><ul> </li></ul><ul><li>   <li><a href=”#”>link 1</a></li> </li></ul><ul><li>   <li><a hre...
Hierarquia dos Seletores <ul><li>  </li></ul><ul><li>$(‘#item’).prev() </li></ul>
Hierarquia dos Seletores <ul><li><ul> </li></ul><ul><li>    <li><a href=”#”>link 1</a></li> </li></ul><ul><li>   <li><a hr...
Hierarquia dos Seletores <ul><li>  </li></ul><ul><li>$(‘#item’).siblings() </li></ul>
Adicionar e Remover Classes <ul><li>  </li></ul><ul><li>$(‘#menu > li’).addClass(‘menuItem’); </li></ul><ul><li>$(‘#menu >...
Manipulação direta <ul><li>$(‘#menu > li’).css(‘color’, ‘red’); </li></ul>
Largura e Altura <ul><li>alert( $(‘#caixa’).width() ); </li></ul><ul><li>alert( $(‘#caixa’).height() ); </li></ul>
Largura e Altura <ul><li>$(‘#caixa’).width(‘300px’); </li></ul><ul><li>$(‘#caixa’).height(200); </li></ul>
Atributos <ul><li><a href=”#” rel=”nofollow”>Link externo</a> </li></ul><ul><li><script type=”text/javascript”> </li></ul>...
Modificando elementos <ul><li><a href=”#”>Link externo</a> </li></ul><ul><li><script type=”text/javascript”> </li></ul><ul>...
Modificando elementos <ul><li><p id=”mudar”> </li></ul><ul><li>   <a href=”#”>Link</a> </li></ul><ul><li></p> </li></ul><ul...
Adicionando elementos <ul><li><div id=”adicionar”> </li></ul><ul><li>   <p>Algum parágrafo</p> </li></ul><ul><li></div> </...
Removendo elementos <ul><li><div id=”adicionar”> </li></ul><ul><li>   <p>um antes</p> </li></ul><ul><li>   <p class=”remov...
Trabalhando com eventos <ul><li>click  // um clique do mouse no elemento </li></ul><ul><li>hover  // ponteiro do mouse por...
Referência $(this) <ul><li>$(‘.caixa’).click( function() { </li></ul><ul><li>   $(this).hide(); </li></ul><ul><li>}); </li...
Upcoming SlideShare
Loading in...5
×

J query aula01

1,854

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,854
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
46
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "J query aula01"

  1. 2. O que é jQuery? <ul><li>     jQuery é uma biblioteca javascript rápida e concisa que simplifica a manipulação de um documento HTML, trabalho com eventos, animações e interações AJAX para um rápido desenvolvimento web. </li></ul><ul><li>http://jquery.com/ </li></ul>
  2. 3. O que é jQuery? <ul><li>• percorrer o DOM </li></ul><ul><li>• manipulação de evento </li></ul><ul><li>• animações </li></ul><ul><li>• interações AJAX </li></ul>
  3. 4. jQuery é JavaScript <ul><li>     jQuery é apenas um conjunto de métodos prontos em </li></ul><ul><li>JavaScript, não há nenhuma mágica! </li></ul>
  4. 5. Como inserir o jQuery na página <ul><li>     <script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;></script> </li></ul><ul><li>     <script type=&quot;text/javascript&quot;> </li></ul><ul><li>       // javaScript por aqui </li></ul><ul><li>     </script> </li></ul>
  5. 6. Como inserir o jQuery na página <ul><li>     <script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;></script> </li></ul><ul><li>     <script type=&quot;text/javascript&quot;> </li></ul><ul><li>       // javaScript por aqui </li></ul><ul><li>     </script> </li></ul>
  6. 7. Como inserir o jQuery na página <ul><li><script  </li></ul><ul><li>   type=&quot;text/javascript&quot;    src=&quot;http://ajax.googleapis.com/ajax/ </li></ul><ul><li>libs/jquery/1.4.2/jquery.min.js&quot;> </li></ul><ul><li></script> </li></ul>
  7. 8. Vamos colocar o jQuery pra funcionar <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>   window.onload = function() { </li></ul><ul><li>     // muita coisa rolando aqui </li></ul><ul><li>   }  </li></ul><ul><li></script> </li></ul>
  8. 9. Vamos colocar o jQuery pra funcionar <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>   jQuery(document).ready( function() { </li></ul><ul><li>     // aqui é melhor!!! </li></ul><ul><li>   });  </li></ul><ul><li></script> </li></ul>
  9. 10. jQuery é mais simples! <ul><li>var elemento = document.getElementById </li></ul><ul><li>(‘nomeElemento’); </li></ul><ul><li>elemento.style = “display: none;” </li></ul><ul><li>$(‘#nomeElemento’).hide(); </li></ul>
  10. 11. jQuery é mais simples! <ul><li>var elemento = document.getElementById </li></ul><ul><li>(‘nomeElemento’); </li></ul><ul><li>elemento.style = “display: block;” </li></ul><ul><li>$(‘#nomeElemento’).show(); </li></ul>
  11. 12. jQuery é muito mais simples! <ul><li>$(‘#nomeElemento’).hide(‘fast’); </li></ul><ul><li>$(‘#nomeElemento’).show(‘slow’); </li></ul><ul><li>$(‘#nomeElemento’).toggle(1000); </li></ul>
  12. 13. jQuery é ainda mais simples! <ul><li>$(‘#nomeElemento’) </li></ul><ul><li>   .hide(‘fast’) </li></ul><ul><li>   .show(‘slow’); </li></ul><ul><li>Corrente de métodos </li></ul>
  13. 14. jQuery: Conceitos Básicos <ul><li><a id=”ancoraEspecial” href=”#”>Pode clicar</a> </li></ul><ul><li><script type=”text/javascript”> </li></ul><ul><li>   $(‘#ancoraEspecial’).click( function(evento) {  </li></ul><ul><li>     alert( ‘Oi!’ ); </li></ul><ul><li>     evento.preventDefault(); </li></ul><ul><li>   }); </li></ul><ul><li></script> </li></ul>
  14. 15. Seletores do jQuery <ul><li>Seletores CSS </li></ul><ul><li>tag                                div </li></ul><ul><li>.classe                         .varios </li></ul><ul><li>tag[atributo=valor]        input[type=text] </li></ul><ul><li>#id                                #elemento </li></ul>
  15. 16. Seletores do jQuery <ul><li><div class=”caixa”> </li></ul><ul><li>   <a id=”link” href=”#”>Clique aqui</a> </li></ul><ul><li></div> </li></ul><ul><li><input type=”text” value=”” /> </li></ul><ul><li><ul> </li></ul><ul><li>   <li class=”marcado”>Futebol</li> </li></ul><ul><li>   <li>Vôlei</li> </li></ul><ul><li>   <li class=”marcado”>Basquete</li> </li></ul><ul><li></ul> </li></ul>
  16. 17. Seletores do jQuery <ul><li><div class=”caixa”> </li></ul><ul><li>   <a id=”link” href=”#”>Clique aqui</a> </li></ul><ul><li></div> </li></ul><ul><li><input type=”text” value=”” /> </li></ul><ul><li><ul> </li></ul><ul><li>   <li class=”marcado”>Futebol</li> </li></ul><ul><li>   <li>Vôlei</li> </li></ul><ul><li>   <li class=”marcado”>Basquete</li> </li></ul><ul><li></ul> </li></ul><ul><li>$(‘#link’) </li></ul>
  17. 18. Seletores do jQuery <ul><li><div class=”caixa”> </li></ul><ul><li>   <a id=”link” href=”#”>Clique aqui</a> </li></ul><ul><li></div> </li></ul><ul><li><input type=”text” value=”” /> </li></ul><ul><li><ul> </li></ul><ul><li>    <li class=”marcado”>Futebol</li> </li></ul><ul><li>   <li>Vôlei</li> </li></ul><ul><li>   <li class=”marcado”>Basquete</li> </li></ul><ul><li></ul> </li></ul><ul><li>$(‘li’) </li></ul>
  18. 19. Seletores do jQuery <ul><li><div class=”caixa”> </li></ul><ul><li>   <a id=”link” href=”#”>Clique aqui</a> </li></ul><ul><li></div> </li></ul><ul><li><input type=”text” value=”” /> </li></ul><ul><li><ul> </li></ul><ul><li>    <li class=”marcado”>Futebol</li> </li></ul><ul><li>   <li>Vôlei</li> </li></ul><ul><li>   <li class=”marcado”>Basquete</li> </li></ul><ul><li></ul> </li></ul><ul><li>$(‘.marcado’) </li></ul>
  19. 20. Seletores do jQuery <ul><li><div class=”caixa”> </li></ul><ul><li>   <a id=”link” href=”#”>Clique aqui</a> </li></ul><ul><li></div> </li></ul><ul><li><input type=”text” value=”” /> </li></ul><ul><li><ul> </li></ul><ul><li>   <li class=”marcado”>Futebol</li> </li></ul><ul><li>   <li>Vôlei</li> </li></ul><ul><li>   <li class=”marcado”>Basquete</li> </li></ul><ul><li></ul> </li></ul><ul><li>$(‘input[type=text]’) </li></ul>
  20. 21. Hierarquia dos Seletores <ul><li>< div id=”elemento”> </li></ul><ul><li>   <a href=”#”>Link selecionado</a> </li></ul><ul><li>   <p>Um parágrafo qualquer</p> </li></ul><ul><li>   <p> </li></ul><ul><li>     Outro <a href=”#”>link</a> selecionado </li></ul><ul><li>   </p> </li></ul><ul><li></div> </li></ul><ul><li><a href=”#”>Link não selecionado</a> </li></ul><ul><li><div> </li></ul><ul><li>   Esse <a href=”#”>aqui</a> não entra </li></ul><ul><li></div> </li></ul>
  21. 22. Hierarquia dos Seletores <ul><li>$(‘#elemento a’)  </li></ul><ul><li>$(‘#elemento’).find(‘a’) </li></ul>
  22. 23. Hierarquia dos Seletores <ul><li><div id=”elemento”> </li></ul><ul><li>   <a href=”#”>Link selecionado</a> </li></ul><ul><li>   <p> </li></ul><ul><li>     Outro <a href=”#”>link</a> não selecionado </li></ul><ul><li>   </p> </li></ul><ul><li></div> </li></ul><ul><li><a href=”#”>Link não selecionado</a> </li></ul><ul><li><div> </li></ul><ul><li>   Esse <a href=”#”>aqui</a> agora entra </li></ul><ul><li></div> </li></ul>
  23. 24. Hierarquia dos Seletores <ul><li>$(‘div > a’)  </li></ul><ul><li>$(‘div’).children(‘a’) </li></ul>
  24. 25. Hierarquia dos Seletores <ul><li><ul> </li></ul><ul><li>   <li><a href=”#”>link 1</a></li> </li></ul><ul><li>   <li><a href=”#” class=‘marca’>link 2</a></li> </li></ul><ul><li>   <li><a href=”#”>link 3</a></li> </li></ul><ul><li>   <li> <p><a href=”#” class=‘marca’>link 4</a></p> </li> </li></ul><ul><li>   <li><a href=”#”>link 5</a></li> </li></ul><ul><li></ul> </li></ul>
  25. 26. Hierarquia dos Seletores <ul><li>  </li></ul><ul><li>$(‘a.marca’).parent() </li></ul>
  26. 27. Hierarquia dos Seletores <ul><li><ul> </li></ul><ul><li>   <li><a href=”#”>link 1</a></li> </li></ul><ul><li>   <li><a href=”#” id=‘item’>link 2</a></li> </li></ul><ul><li>   <li><a href=”#”>link 3</a></li> </li></ul><ul><li>   <li><a href=”#”>link 4</a></li> </li></ul><ul><li>   <li><a href=”#”>link 5</a></li> </li></ul><ul><li></ul> </li></ul>
  27. 28. Hierarquia dos Seletores <ul><li>  </li></ul><ul><li>$(‘#item’).next() </li></ul>
  28. 29. Hierarquia dos Seletores <ul><li><ul> </li></ul><ul><li>   <li><a href=”#”>link 1</a></li> </li></ul><ul><li>   <li><a href=”#” id=‘item’>link 2</a></li> </li></ul><ul><li>   <li><a href=”#”>link 3</a></li> </li></ul><ul><li>   <li><a href=”#”>link 4</a></li> </li></ul><ul><li>   <li><a href=”#”>link 5</a></li> </li></ul><ul><li></ul> </li></ul>
  29. 30. Hierarquia dos Seletores <ul><li>  </li></ul><ul><li>$(‘#item’).prev() </li></ul>
  30. 31. Hierarquia dos Seletores <ul><li><ul> </li></ul><ul><li>    <li><a href=”#”>link 1</a></li> </li></ul><ul><li>   <li><a href=”#” id=‘item’>link 2</a></li> </li></ul><ul><li>   <li><a href=”#”>link 3</a></li> </li></ul><ul><li>   <li><a href=”#”>link 4</a></li> </li></ul><ul><li>   <li><a href=”#”>link 5</a></li> </li></ul><ul><li></ul> </li></ul>
  31. 32. Hierarquia dos Seletores <ul><li>  </li></ul><ul><li>$(‘#item’).siblings() </li></ul>
  32. 33. Adicionar e Remover Classes <ul><li>  </li></ul><ul><li>$(‘#menu > li’).addClass(‘menuItem’); </li></ul><ul><li>$(‘#menu > li’).removeClass(‘menuItem’); </li></ul><ul><li>$(‘#menu > li’).toggleClass(‘alternado’); </li></ul>
  33. 34. Manipulação direta <ul><li>$(‘#menu > li’).css(‘color’, ‘red’); </li></ul>
  34. 35. Largura e Altura <ul><li>alert( $(‘#caixa’).width() ); </li></ul><ul><li>alert( $(‘#caixa’).height() ); </li></ul>
  35. 36. Largura e Altura <ul><li>$(‘#caixa’).width(‘300px’); </li></ul><ul><li>$(‘#caixa’).height(200); </li></ul>
  36. 37. Atributos <ul><li><a href=”#” rel=”nofollow”>Link externo</a> </li></ul><ul><li><script type=”text/javascript”> </li></ul><ul><li>   jQuery(‘a’).attr(‘rel’, ‘’); </li></ul><ul><li></script> </li></ul>
  37. 38. Modificando elementos <ul><li><a href=”#”>Link externo</a> </li></ul><ul><li><script type=”text/javascript”> </li></ul><ul><li>   alert( $(‘a’).text() ); </li></ul><ul><li>   $(‘a’).text(‘Clique aqui!’); </li></ul><ul><li></script> </li></ul>
  38. 39. Modificando elementos <ul><li><p id=”mudar”> </li></ul><ul><li>   <a href=”#”>Link</a> </li></ul><ul><li></p> </li></ul><ul><li><script type=”text/javascript”> </li></ul><ul><li>   alert( $(‘#mudar’).html() ); </li></ul><ul><li>   $(‘#mudar’).html(‘<span>sem  </li></ul><ul><li>link!</span>’); </li></ul><ul><li></script> </li></ul>
  39. 40. Adicionando elementos <ul><li><div id=”adicionar”> </li></ul><ul><li>   <p>Algum parágrafo</p> </li></ul><ul><li></div> </li></ul><ul><li><script type=”text/javascript”> </li></ul><ul><li>   jQuery(‘#adicionar’).append(‘<p>um depois</p>’); </li></ul><ul><li>   jQuery(‘#adicionar’).prepend(‘<p>um antes</p>’); </li></ul><ul><li></script> </li></ul>
  40. 41. Removendo elementos <ul><li><div id=”adicionar”> </li></ul><ul><li>   <p>um antes</p> </li></ul><ul><li>   <p class=”remover”>Algum parágrafo</p> </li></ul><ul><li>   <p>um depois</p> </li></ul><ul><li></div> </li></ul><ul><li><script type=”text/javascript”> </li></ul><ul><li>   jQuery(‘.remover’).remove(); </li></ul><ul><li></script> </li></ul>
  41. 42. Trabalhando com eventos <ul><li>click // um clique do mouse no elemento </li></ul><ul><li>hover // ponteiro do mouse por cima do elemento </li></ul><ul><li>focus // elemento ganha foco </li></ul><ul><li>blur // elemento perde o foco </li></ul><ul><li>submit // um form é submetido </li></ul><ul><li>keyup // uma tecla acaba de ser pressionada </li></ul>
  42. 43. Referência $(this) <ul><li>$(‘.caixa’).click( function() { </li></ul><ul><li>   $(this).hide(); </li></ul><ul><li>}); </li></ul><ul><li>     No exemplo acima, somente o elemento </li></ul><ul><li>clicado é selecionado em $(this). Os demais </li></ul><ul><li>elementos com class = ‘caixa’ são </li></ul><ul><li>ignorados. </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×