Your SlideShare is downloading. ×
0
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
J query aula01
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

J query aula01

1,849

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  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>
  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>
  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>
  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>
  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>
  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>
  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>
  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>
  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>
  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>
  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>
  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>
  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>
  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>
  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>
  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>
  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>
  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>
  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>
  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>
  22. Hierarquia dos Seletores <ul><li>$(‘#elemento a’)  </li></ul><ul><li>$(‘#elemento’).find(‘a’) </li></ul>
  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>
  24. Hierarquia dos Seletores <ul><li>$(‘div > a’)  </li></ul><ul><li>$(‘div’).children(‘a’) </li></ul>
  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>
  26. Hierarquia dos Seletores <ul><li>  </li></ul><ul><li>$(‘a.marca’).parent() </li></ul>
  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>
  28. Hierarquia dos Seletores <ul><li>  </li></ul><ul><li>$(‘#item’).next() </li></ul>
  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>
  30. Hierarquia dos Seletores <ul><li>  </li></ul><ul><li>$(‘#item’).prev() </li></ul>
  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>
  32. Hierarquia dos Seletores <ul><li>  </li></ul><ul><li>$(‘#item’).siblings() </li></ul>
  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>
  34. Manipulação direta <ul><li>$(‘#menu > li’).css(‘color’, ‘red’); </li></ul>
  35. Largura e Altura <ul><li>alert( $(‘#caixa’).width() ); </li></ul><ul><li>alert( $(‘#caixa’).height() ); </li></ul>
  36. Largura e Altura <ul><li>$(‘#caixa’).width(‘300px’); </li></ul><ul><li>$(‘#caixa’).height(200); </li></ul>
  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>
  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>
  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>
  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>
  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>
  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>
  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>

×