2. O que é jQuery? 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. http://jquery.com/

3. O que é jQuery? • percorrer o DOM • manipulação de evento • animações • interações AJAX

4. jQuery é JavaScript jQuery é apenas um conjunto de métodos prontos em JavaScript, não há nenhuma mágica!

5. Como inserir o jQuery na página <script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;></script> <script type=&quot;text/javascript&quot;> // javaScript por aqui </script>

6. Como inserir o jQuery na página <script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;></script> <script type=&quot;text/javascript&quot;> // javaScript por aqui </script>

7. Como inserir o jQuery na página <script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/ libs/jquery/1.4.2/jquery.min.js&quot;> </script>

8. Vamos colocar o jQuery pra funcionar <script type=&quot;text/javascript&quot;> window.onload = function() { // muita coisa rolando aqui } </script>

9. Vamos colocar o jQuery pra funcionar <script type=&quot;text/javascript&quot;> jQuery(document).ready( function() { // aqui é melhor!!! }); </script>

10. jQuery é mais simples! var elemento = document.getElementById (‘nomeElemento’); elemento.style = “display: none;” $(‘#nomeElemento’).hide();

11. jQuery é mais simples! var elemento = document.getElementById (‘nomeElemento’); elemento.style = “display: block;” $(‘#nomeElemento’).show();

12. jQuery é muito mais simples! $(‘#nomeElemento’).hide(‘fast’); $(‘#nomeElemento’).show(‘slow’); $(‘#nomeElemento’).toggle(1000);

13. jQuery é ainda mais simples! $(‘#nomeElemento’) .hide(‘fast’) .show(‘slow’); Corrente de métodos

14. jQuery: Conceitos Básicos <a id=”ancoraEspecial” href=”#”>Pode clicar</a> <script type=”text/javascript”> $(‘#ancoraEspecial’).click( function(evento) { alert( ‘Oi!’ ); evento.preventDefault(); }); </script>

15. Seletores do jQuery Seletores CSS tag div .classe .varios tag[atributo=valor] input[type=text] #id #elemento

16. Seletores do jQuery <div class=”caixa”> <a id=”link” href=”#”>Clique aqui</a> </div> <input type=”text” value=”” /> <ul> <li class=”marcado”>Futebol</li> <li>Vôlei</li> <li class=”marcado”>Basquete</li> </ul>

17. Seletores do jQuery <div class=”caixa”> <a id=”link” href=”#”>Clique aqui</a> </div> <input type=”text” value=”” /> <ul> <li class=”marcado”>Futebol</li> <li>Vôlei</li> <li class=”marcado”>Basquete</li> </ul> $(‘#link’)

18. Seletores do jQuery <div class=”caixa”> <a id=”link” href=”#”>Clique aqui</a> </div> <input type=”text” value=”” /> <ul> <li class=”marcado”>Futebol</li> <li>Vôlei</li> <li class=”marcado”>Basquete</li> </ul> $(‘li’)

19. Seletores do jQuery <div class=”caixa”> <a id=”link” href=”#”>Clique aqui</a> </div> <input type=”text” value=”” /> <ul> <li class=”marcado”>Futebol</li> <li>Vôlei</li> <li class=”marcado”>Basquete</li> </ul> $(‘.marcado’)

20. Seletores do jQuery <div class=”caixa”> <a id=”link” href=”#”>Clique aqui</a> </div> <input type=”text” value=”” /> <ul> <li class=”marcado”>Futebol</li> <li>Vôlei</li> <li class=”marcado”>Basquete</li> </ul> $(‘input[type=text]’)

21. Hierarquia dos Seletores < div id=”elemento”> <a href=”#”>Link selecionado</a> <p>Um parágrafo qualquer</p> <p> Outro <a href=”#”>link</a> selecionado </p> </div> <a href=”#”>Link não selecionado</a> <div> Esse <a href=”#”>aqui</a> não entra </div>

22. Hierarquia dos Seletores $(‘#elemento a’) $(‘#elemento’).find(‘a’)

23. Hierarquia dos Seletores <div id=”elemento”> <a href=”#”>Link selecionado</a> <p> Outro <a href=”#”>link</a> não selecionado </p> </div> <a href=”#”>Link não selecionado</a> <div> Esse <a href=”#”>aqui</a> agora entra </div>

24. Hierarquia dos Seletores $(‘div > a’) $(‘div’).children(‘a’)

25. Hierarquia dos Seletores <ul> <li><a href=”#”>link 1</a></li> <li><a href=”#” class=‘marca’>link 2</a></li> <li><a href=”#”>link 3</a></li> <li> <p><a href=”#” class=‘marca’>link 4</a></p> </li> <li><a href=”#”>link 5</a></li> </ul>

26. Hierarquia dos Seletores $(‘a.marca’).parent()

27. Hierarquia dos Seletores <ul> <li><a href=”#”>link 1</a></li> <li><a href=”#” id=‘item’>link 2</a></li> <li><a href=”#”>link 3</a></li> <li><a href=”#”>link 4</a></li> <li><a href=”#”>link 5</a></li> </ul>

28. Hierarquia dos Seletores $(‘#item’).next()

29. Hierarquia dos Seletores <ul> <li><a href=”#”>link 1</a></li> <li><a href=”#” id=‘item’>link 2</a></li> <li><a href=”#”>link 3</a></li> <li><a href=”#”>link 4</a></li> <li><a href=”#”>link 5</a></li> </ul>

30. Hierarquia dos Seletores $(‘#item’).prev()

31. Hierarquia dos Seletores <ul> <li><a href=”#”>link 1</a></li> <li><a href=”#” id=‘item’>link 2</a></li> <li><a href=”#”>link 3</a></li> <li><a href=”#”>link 4</a></li> <li><a href=”#”>link 5</a></li> </ul>

32. Hierarquia dos Seletores $(‘#item’).siblings()

33. Adicionar e Remover Classes $(‘#menu > li’).addClass(‘menuItem’); $(‘#menu > li’).removeClass(‘menuItem’); $(‘#menu > li’).toggleClass(‘alternado’);

34. Manipulação direta $(‘#menu > li’).css(‘color’, ‘red’);

35. Largura e Altura alert( $(‘#caixa’).width() ); alert( $(‘#caixa’).height() );

36. Largura e Altura $(‘#caixa’).width(‘300px’); $(‘#caixa’).height(200);

37. Atributos <a href=”#” rel=”nofollow”>Link externo</a> <script type=”text/javascript”> jQuery(‘a’).attr(‘rel’, ‘’); </script>

38. Modificando elementos <a href=”#”>Link externo</a> <script type=”text/javascript”> alert( $(‘a’).text() ); $(‘a’).text(‘Clique aqui!’); </script>

39. Modificando elementos <p id=”mudar”> <a href=”#”>Link</a> </p> <script type=”text/javascript”> alert( $(‘#mudar’).html() ); $(‘#mudar’).html(‘<span>sem link!</span>’); </script>

40. Adicionando elementos <div id=”adicionar”> <p>Algum parágrafo</p> </div> <script type=”text/javascript”> jQuery(‘#adicionar’).append(‘<p>um depois</p>’); jQuery(‘#adicionar’).prepend(‘<p>um antes</p>’); </script>

41. Removendo elementos <div id=”adicionar”> <p>um antes</p> <p class=”remover”>Algum parágrafo</p> <p>um depois</p> </div> <script type=”text/javascript”> jQuery(‘.remover’).remove(); </script>

42. Trabalhando com eventos click // um clique do mouse no elemento hover // ponteiro do mouse por cima do elemento focus // elemento ganha foco blur // elemento perde o foco submit // um form é submetido keyup // uma tecla acaba de ser pressionada

43. Referência $(this) $(‘.caixa’).click( function() { $(this).hide(); }); No exemplo acima, somente o elemento clicado é selecionado em $(this). Os demais elementos com class = ‘caixa’ são ignorados.