![Ocultar divs apenas com JS
divs = document.getElementByTagName(‘div’);
for (i = 0; i < divs.length; i++) {
divs[i].style.display = ‘none’;
}
Ocultar divs com jQuery
jQuery(‘div’).hide();](https://image.slidesharecdn.com/jquery-130129191756-phpapp01/85/Jquery-Framework-11-320.jpg)
![var tables = document.getElementsByTagName('table');
for (var t = 0; t < tables.length; t++) {
! var rows = tables[t].getElementsByTagName('tr');
! for (var i = 1; i < rows.length; i += 2) {
if (!/(^|s)odd(s|$)/.test(rows[i].className)) {
rows[i].className += ' odd';
}
}
}
jQuery('table tr:nth-child(odd)').addClass('odd');](https://image.slidesharecdn.com/jquery-130129191756-phpapp01/85/Jquery-Framework-13-320.jpg)
![Find something
$( ) recebe um Seletor
$("*") $("input[value=‘hot’]")
$("#primeiro") $("p a")
$(".odd") $("p:first")
$("tr") $("div:contains(‘John’) ")
$("tr,td,table") $("p:visible")
$("ul>li") $("input:checked")](https://image.slidesharecdn.com/jquery-130129191756-phpapp01/85/Jquery-Framework-19-320.jpg)
Jquery Framework
- 3. Por que usar o jQuery?
- 5. Qual é a dominância? http://trends.builtwith.com/javascript
- 6. O que o pessoal está procurando? http://www.google.com/trends/explore#q=dojo+javascript,jquery+javascript,yui+javas cript,prototype+javascript,mootools+javascript
- 7. O que é jQuery?
- 8. Definição Jquey é um framework JavaScript: • Selector engine • Manipulação do DOM • Eventos JS • Animação • Ajax
- 9. Características • Testado em 50 browser e 11 plataformas; • Simplifica e acelera o desenvolvimento Web; • Leve! 33 KB na versão simplificada; • Suporte a Plug-in com inúmeras implementações; • Comunidade grande e ativa; • Open source
- 10. É mais fácil desenvolver com jQuery!
- 11. Ocultar divs apenas com JS divs = document.getElementByTagName(‘div’); for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’; } Ocultar divs com jQuery jQuery(‘div’).hide();
- 12. Função jQuery Método de jQuery jQuery(‘div’).hide(); Argumento
- 13. var tables = document.getElementsByTagName('table'); for (var t = 0; t < tables.length; t++) { ! var rows = tables[t].getElementsByTagName('tr'); ! for (var i = 1; i < rows.length; i += 2) { if (!/(^|s)odd(s|$)/.test(rows[i].className)) { rows[i].className += ' odd'; } } } jQuery('table tr:nth-child(odd)').addClass('odd');
- 14. Isso é realmente write less, do more
- 15. $ == jQuery $ é um alias para jQuery
- 16. Adicionar classe odd na tabela jQuery('table tr:nth-child(odd)').addClass('odd'); Ocultar divs com jQuery jQuery(‘div’).hide();
- 17. Adicionar classe odd na tabela $('table tr:nth-child(odd)').addClass('odd'); Ocultar divs com jQuery $(‘div’).hide();
- 18. Find something, do something
- 19. Find something $( ) recebe um Seletor $("*") $("input[value=‘hot’]") $("#primeiro") $("p a") $(".odd") $("p:first") $("tr") $("div:contains(‘John’) ") $("tr,td,table") $("p:visible") $("ul>li") $("input:checked")
- 20. Find something $( ‘p’) Seleciona todos os parágrafos
- 21. Do something $( ‘p’).hide() Seleciona todos os parágrafos e os ocultam
- 22. Create something, do something
- 23. $( ‘<li>home</li>’) .appendTo(“ul#nav”) Cria um elemento <li> com texto “home” e Insere na lista com id “nav”
- 24. Encadeamento & coloção
- 25. Encadeamento $('p') .hide(); $('p') .fadeIn(3000);
- 26. Encadeamento $('p') .hide() .fadeIn(3000);
- 27. Coleção $('p') .each( function(index){ $(this).html( index+' - '+$(this).text() ); } );
- 28. Tipos de parâmetros do jQuery
- 29. • CSS Selector normais e personalizadas jQuery(‘div’) e jQuery(‘:first’) • HTML jQuery(‘<li><a href=”#”>link</a></li>’) • Elemento DOM jQuery(document) ou jQuery(document.createElement(‘a’)) • Função jQuery(function(){})
- 30. Um método, vários usos
- 31. Variações do método .html() • .html() $(‘p’).html(); • .html(stringHTML) $(‘p’).html(‘Lorem Ipsum’); • .html(function(index, oldhtml)) $(‘p’).html(function(i){ return “<p>hello “ + i + “</p>”; });
- 32. O jQuery no <head> não está funcionando!
- 33. <script> $(document).ready(function(){ $('p').hide().fadeIn(3000); }); </script>
- 34. <script> $(function(){ $('p').hide().fadeIn(3000); }); </script>
- 35. jQuery API
- 37. Eventos .click() $(function(){ $("div#teste").click(function(){ $(this) .hide(); }); });
- 38. Atributo/CSS Obter Alterar $attr(“href") $attr(“href", “link") $val() $val(“novo valor") $html() $html("<p>Novo</p>") $css("border") $css("border", "none") $width() $width("30")
- 39. Atributo/CSS Manipulação de Atributo $('a.nav').attr('href', 'http://flickr.com/'); $('a.nav').attr({ 'href': 'http://flickr.com/', 'id': 'flickr' }); $('#intro').removeAttr('id');
- 40. Atributo/CSS Manipulação de CSS $('p').css('font-size', '20px'); $('p').css( {'font-size': '20px', color: 'red'} ); $('#intro').addClass('highlighted'); $('#intro').removeClass('highlighted'); $('#intro').toggleClass('highlighted');
- 42. Manipulação DOM $('#foo') <html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body> </html>
- 43. Manipulação DOM $('#foo').append('<p>test</p>') <html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body> </html>
- 44. Manipulação DOM $('#foo').append('<p>test</p>') <html> <body> <div>jQuery</div> <div id=”foo”>example<p>test</p></div> </body> </html>
- 45. Manipulação DOM $('p') <html> <body> <div>jQuery <p>moving</p> <p>paragraphs</p> </div> <div id=”foo”>example</div> </body> </html>
- 46. Manipulação DOM $('p').appendTo('#foo') <html> <body> <div>jQuery <p>moving</p> <p>paragraphs</p> </div> <div id=”foo”>example</div> </body> </html>
- 47. Manipulação DOM $('p').appendTo('#foo') <html> <body> <div>jQuery</div> <div id=”foo”>example <p>moving</p> <p>paragraphs</p> </div> </body> </html>
- 49. Navegação no DOM $('table') <html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body> </html>
- 50. Navegação no DOM $('table').next() <html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body> </html>
- 51. Navegação no DOM $('table').next() <html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body> </html>
- 52. Navegação no DOM $('table').next().find('p'); <html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body> </html>
- 53. Navegação no DOM $('table').next().find('p'); <html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body> </html>
- 55. Efeitos .fadeOut() .fadeIn() $(function(){ $("div#teste").click(function(){ $(this) .fadeOut() .fadeIn(); }); });
- 56. Efeitos .slideUp() .slideDown() $(function(){ $("div#teste").click(function(){ $(this) .slideUp() .slideDown(); }); });
- 58. Ajax .load(‘url’) $(‘div’) .load(‘pagina.html div’)
- 59. Ajax $.getJSON(url, sucess) $.getJSON( "http://api.flickr.com/services/feeds/photos_public.gne? tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>") .attr("src", item.media.m) .appendTo("#images"); }); } );
- 60. Plug-in: Quando o do something não existe
- 61. WooThemes FlexSlider http://www.woothemes.com/flexslider/ http://flexslider.woothemes.com/index.html
- 62. WooThemes FlexSlider Arquivos necessários <link rel="stylesheet" href="flexslider.css" type="text/css"> <script src="jquery.js"></script> <script src="jquery.flexslider.js"></script>
- 63. WooThemes FlexSlider Estrutura no HTML <div class="flexslider"> <ul class="slides"> <li><img src="slide1.jpg" /></li> <li><img src="slide2.jpg" /></li> <li><img src="slide3.jpg" /></li> </ul> </div>
- 64. WooThemes FlexSlider Estrutura JavaScript <script type="text/javascript" charset="utf-8"> $(function() { $('.flexslider').flexslider(); }); </script>
- 65. WooThemes FlexSlider Configurando o FlexSlider <script type="text/javascript" charset="utf-8"> $(function() { $('.flexslider').flexslider( {animation: "slide", animationLoop: true, itemWidth: 400} ); }); </script>
- 67. jQuery Masked Input Arquivos necessários <script src="jquery.js"></script> <script src="jquery.maskedinput.js"></script>
- 68. jQuery Masked Input Estrutura no HTML <input type="text" name="cpf" id="cpf"><br> <input type="text" name="cep" id="cep"><br> <input type="text" name="date" id="date"><br> <input type="text" name="telefone" id="telefone">
- 69. jQuery Masked Input Estrutura JavaScript <script type="text/javascript" charset="utf-8"> $(function() { $("#cpf").mask("999.999.999-99"); $("#cep").mask("99.999-999"); $("#date").mask("99/99/9999"); $("#telefone").mask("(99)9999-9999"); }); </script>
- 70. jQuery UI http://jqueryui.com/
- 71. jQuery UI Arquivos necessários <link rel="stylesheet" href="jquery-ui.css" /> <script src="jquery.js"></script> <script src="jquery-ui.js"></script>
- 72. jQuery UI Estrutura no HTML <div id="accordion"> <h3>Section 1</h3> <div> <p>...</p> </div> ... <h3>Section 4</h3> <div> <p>...</p> </div> </div>
- 73. jQuery UI Estrutura JavaScript <script type="text/javascript" charset="utf-8"> $(function() { $( "#accordion" ).accordion(); }); </script>
- 74. Outros jQuery Lightbox http://leandrovieira.com/projects/jquery/lightbox/ Validation http://bassistance.de/jquery-plugins/jquery-plugin-validation/ jQuery File Upload http://blueimp.github.com/jQuery-File-Upload/ ...