![Fazendo algo!<p>Hum</p><p>Dois</p><p>Três</p>//encontrando$(‘p’);//fazendo$(‘p’).hide(‘slow’);//sintaxe$(‘seletor’).<nome do metodo>([PARAMETROS]);](https://image.slidesharecdn.com/jquery-100515144750-phpapp02/85/J-query-18-320.jpg)
J query
- 1. jQueryFaça muito mais. Escreva muito menos!
- 2. Quem está falando?5 anos de experiência com WebDesenvolvedor Java na IT7 SistemasAnalista de Sistemas pela UnibrasilEvangelizador do jQuery (mentira)Administrador do grupo jquery-br (googlegroups)@ruanltbgruanltbg@gmail.comruancarlos.com.brruan.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!
- 6. Adicionar o jQuery em uma páginaDownload: jquery.com
- 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})
- 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”);
- 31. Manipulação da DOM//Criando elementosvar 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);})//postandovar dados = {nome:’Ruan Carlos’};$.post(‘pagina.php’,dados,function(resposta){ $(resposta).appendTo(‘body’); //$(‘body’).append(resposta);})
- 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 jQuerythis.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 jQueryreturnthis.each(function(i){ //this é o DOM$(this).html($(this).html() + i); });};$(‘p’).nomePlugin().addClass(‘ativa’);
- 41. Perguntas
- 42. AgradecimentosDaniel Pereira Camargo (@pererinha) pelo layout + imagensNelson Maia (@nellson_maia) pelo conviteVII SEMINFO (@seminfo7utfpr) pela oportunidadeVocês pela paciência !