O documento apresenta uma introdução ao jQuery, biblioteca JavaScript que simplifica a manipulação de elementos HTML e eventos. São descritas as principais funcionalidades como seleção de elementos, manipulação do DOM, estilização, animações, Ajax e criação de plugins. O documento fornece exemplos de código para demonstrar o uso dessas funcionalidades.

1. jQuery Faça muito mais. Escreva muito menos!

2. Quem está falando? 5 anos de experiência com Web Desenvolvedor Java na IT7 Sistemas Analista de Sistemas pela Unibrasil Evangelizador do jQuery (mentira) Administrador do grupo jquery-br (googlegroups) @ruanltbg ruanltbg@gmail.com ruancarlos.com.br ruan.carlos@live.com

3. O que é jQuery? jQuery === JavaScript :)

4. O que eu ganho com isso? Muito, muito mesmo !!! Veja as demos

5. Opa, “pera lá”, como assim? Ahhh, sabia que você iria gostar. Mãos a obra então!

7. Localização:

8. Local

9. CDN: Google, Microsoft, jQuery

10. Formas

11. Full

13. Encontrando as coisas //Selecionando elemento por id <div id=“algumacoisa”></div> <div></div> <p></p> $(“#algumacoisa”); <div id=“algumacoisa”></div> <div>...</div> <p>...</p>

14. Encontrando as coisas //Selecionando elementos por class <div class=“algumacoisa”></div> <div class=“outracoisaalgumacoisa”></div> <p></p> $(“.algumacoisa”); <div class=“algumacoisa”></div> <div class=“outracoisaalgumacoisa”></div> <p></p>

15. Encontrando as coisas //Selecionando elementos por tags <ul><li>jQuery</li> <li>Brasil</li><ul> $(“li”); <ul><li>jQuery</li> <li>Brasil</li><ul>

16. Encontrando as coisas //Selecionando por contexto $(‘seletor’,<context>); $(‘contexto’).find(‘seletor’); $(‘p’).click(function(){ $(‘span’,this); })

17. Fazendo algo!

18. Fazendo algo! <p>Hum</p> <p>Dois</p> <p>Três</p> //encontrando $(‘p’); //fazendo $(‘p’).hide(‘slow’); //sintaxe $(‘seletor’).<nome do metodo>([PARAMETROS]);

19. Fazendo algo! //Mostrando e escondendo <p>Hum</p> <p>Dois</p> <p>Três</p> //mostrando $(‘p’).show(‘slow’); //escondendo $(‘p’).hide(‘slow’);

20. Fazendo algo! //Mostrando e escondendo <p>Hum</p> <p>Dois</p> <p>Três</p> //mostrando $(‘p’).show(‘slow’); //escondendo $(‘p’).hide(‘slow’);

21. Fazendo algo! //Iterações <p>Hum</p> <p>Dois</p> <p>Três</p> $(‘p’).each(function(){ //this será cada p })

22. Fazendo algo! //Iterações <p>Hum</p> <p>Dois</p> <p>Três</p> $(‘p’).each(function(){ //this será cada p })

23. Fazendo algo! //Iterações <p>Hum</p> <p>Dois</p> <p>Três</p> $(‘p’).each(function(){ //this será cada p })

24. Fazendo algo! //Estilizando <p>Hum</p> <p class=“bvermelho”>Dois</p> <p>Três</p> $(‘p’).addClass(‘verde’); $(‘p’).removeClass(‘bvermelho’); $(‘p’).toggleClass(‘bvermelho’);

25. Fazendo algo! //Estilizando <p class=“verde”>Hum</p> <p class=“verdebvermelho”>Dois</p> <p class=“verde”>Três</p> $(‘p’).addClass(‘verde’); $(‘p’).removeClass(‘bvermelho’); $(‘p’).toggleClass(‘bvermelho’);

26. Fazendo algo! //Estilizando <p class=“verde”>Hum</p> <p class=“verde”>Dois</p> <p class=“verde”>Três</p> $(‘p’).addClass(‘verde’); $(‘p’).removeClass(‘bvermelho’); $(‘p’).toggleClass(‘bvermelho’);

27. Fazendo algo! //Estilizando <p class=“verde bvermelho”>Hum</p> <p class=“verde bvermelho”>Dois</p> <p class=“verde bvermelho”>Três</p> $(‘p’).addClass(‘verde’); $(‘p’).removeClass(‘bvermelho’); $(‘p’).toggleClass(‘bvermelho’);

28. Chaining

29. Chaining //Chamadas aninhadas <p>Hum <span>aqui</span></p> <p class=“verde”>Dois</p> <p>Três</p> $(‘p’).addClass(‘bvermelho’).find(“span”).addClass(“verde”);

30. Manipulação da DOM

31. Manipulação da DOM //Criando elementos var minhaDiv = $(“<div></div>”); // jQuery 1.4 $(“<div>”, { class: “minhaclasse”, click: function(){ $(this).toggleClass(“minhaclasse”); } });

32. Manipulação da DOM //Inserindo elementos <p>Maça. Heyapple!</p> <p>Macbook</p> $(‘p’).after(‘<imgsrc=“euquerum.jpg” />’); <p>Maça. Heyapple!</p> <imgsrc=“euquerum.jpg” /> <p>Macbook</p> <imgsrc=“euquerum.jpg” />

33. Ações e Eventos

34. Ações e Eventos $(‘p’).click(function(evento){//fazalgo}) $(‘input’).click(function(evento){//fazalgo}) $(‘p’).hover( function(evento){//fazalogin}, function(evento){//fazalgoout} ) $(‘p’).bind(‘clickhover’, function(evento) { //fazalgo })

35. Ajax

36. Ajax //Fazendo uma requisição $.get(‘pagina.php’, function(resposta){ $(resposta).appendTo(‘body’); //$(‘body’).append(resposta); }) //postando var dados = {nome:’Ruan Carlos’}; $.post(‘pagina.php’,dados,function(resposta){ $(resposta).appendTo(‘body’); //$(‘body’).append(resposta); })

37. Plugin for dummies

38. Plugin for dummies //1º plugin $.fn.nomePlugin = function() { alert(‘quantidade: ‘ + this.length); }; $(‘p’).nomePlugin();

39. Plugin for dummies //Iteração nos elementos $.fn.nomePlugin = function() { //this é um elemento jQuery this.each(function(i){ //this é o DOM $(this).html($(this).html() + i); }); }; $(‘p’).nomePlugin();

40. Plugin for dummies //Retornando um elemento jQuery $.fn.nomePlugin = function() { //this é um elemento jQuery returnthis.each(function(i){ //this é o DOM $(this).html($(this).html() + i); }); }; $(‘p’).nomePlugin().addClass(‘ativa’);

41. Perguntas

42. Agradecimentos Daniel Pereira Camargo (@pererinha) pelo layout + imagens Nelson Maia (@nellson_maia) pelo convite VII SEMINFO (@seminfo7utfpr) pela oportunidade Vocês pela paciência ! 

43. Imagens Obrigado às imagens: http://www.flickr.com/photos/life-is-a-photo/3453339893/ http://www.flickr.com/photos/daviddmuir/2125697998/ http://www.flickr.com/photos/susyna/3643831785/ http://www.flickr.com/photos/paurian/3550755709/ http://www.flickr.com/photos/markstos/3802117476/ http://www.flickr.com/photos/fornal/385054886/ http://www.flickr.com/photos/cverdier/4321365261/ http://www.flickr.com/photos/davidkingham/3661515844/ http://www.flickr.com/photos/daveynin/1672745911/ http://www.flickr.com/photos/baboon/162579094/ http://www.flickr.com/photos/balakov/4503616864/

44. Obrigado Ruan Carlos ruanltbg@gmail.com ruan.carlos@live.com ruancarlos.com.br