Luiz Carlos Chavesluiz.chaves@ifpb.edu.br
Por que usar o   jQuery?
Quem usa? http://trends.builtwith.com/javascript/jQuery
Qual é a dominância?       http://trends.builtwith.com/javascript
O que o pessoal está procurando?http://www.google.com/trends/explore#q=dojo+javascript,jquery+javascript,yui+javas        ...
O que é jQuery?
Definição    Jquey é um framework JavaScript:•   Selector engine•   Manipulação do DOM•   Eventos JS•   Animação•   Ajax
Características• Testado em 50 browser e 11 plataformas;• Simplifica e acelera o desenvolvimento  Web;• Leve! 33 KB na ver...
É mais fácil desenvolver     com jQuery!
Ocultar divs apenas com JSdivs = document.getElementByTagName(‘div’);for (i = 0; i < divs.length; i++) {        divs[i].st...
Função jQuery               Método de jQueryjQuery(‘div’).hide();                Argumento
var tables = document.getElementsByTagName(table);for (var t = 0; t < tables.length; t++) {   ! var rows = tables[t].getEl...
Isso é realmentewrite less, do more
$ == jQuery$ é um alias para jQuery
Adicionar classe odd na tabelajQuery(table tr:nth-child(odd)).addClass(odd);Ocultar divs com jQueryjQuery(‘div’).hide();
Adicionar classe odd na tabela$(table tr:nth-child(odd)).addClass(odd);Ocultar divs com jQuery$(‘div’).hide();
Find something, do something
Find something   $( ) recebe um Seletor$("*")             $("input[value=‘hot’]")$("#primeiro")     $("p a")$(".odd")     ...
Find something$( ‘p’) Seleciona todos os parágrafos
Do something$( ‘p’).hide() Seleciona todos os parágrafos e         os ocultam
Create something,  do something
$( ‘<li>home</li>’).appendTo(“ul#nav”)Cria um elemento <li> com texto “home” e       Insere na lista com id “nav”
Encadeamento &    coloção
Encadeamento$(p)   .hide();$(p)   .fadeIn(3000);
Encadeamento$(p)   .hide()   .fadeIn(3000);
Coleção$(p)  .each(     function(index){       $(this).html(          index+ - +$(this).text()       );     }  );
Tipos de parâmetros do        jQuery
• CSS Selector normais e personalizadas         jQuery(‘div’) e jQuery(‘:first’)• HTML   jQuery(‘<li><a href=”#”>link</a><...
Um método, vários usos
Variações do método .html()• .html()     $(‘p’).html();• .html(stringHTML)     $(‘p’).html(‘Lorem Ipsum’);• .html(function...
O jQuery no <head> não   está funcionando!
<script>     $(document).ready(function(){          $(p).hide().fadeIn(3000);     });</script>
<script>     $(function(){          $(p).hide().fadeIn(3000);     });</script>
jQuery API
Eventos$(input).focus()$(input).change()$(input).blur()$(input).keyup()$(.button).click()$(.content).hover()$(div).delegat...
Eventos.click()$(function(){     $("div#teste").click(function(){          $(this)               .hide();     });});
Atributo/CSS Obter              Alterar$attr(“href")    $attr(“href", “link")$val()           $val(“novo valor")$html()   ...
Atributo/CSS           Manipulação de Atributo$(a.nav).attr(href, http://flickr.com/);$(a.nav).attr({href: http://flickr.c...
Atributo/CSS               Manipulação de CSS$(p).css(font-size, 20px);$(p).css(       {font-size: 20px,       color: red}...
Manipulação DOM$(div.section).append($(h1))$(div.section).appendTo($(body))$(div.section).html($(h1))$(div.section).prepen...
Manipulação DOM$(#foo)<html>   <body>      <div>jQuery</div>      <div id=”foo”>example</div>   </body></html>
Manipulação DOM$(#foo).append(<p>test</p>)<html>   <body>      <div>jQuery</div>      <div id=”foo”>example</div>   </body...
Manipulação DOM$(#foo).append(<p>test</p>)<html>   <body>      <div>jQuery</div>      <div id=”foo”>example<p>test</p></di...
Manipulação DOM$(p)<html>   <body>      <div>jQuery         <p>moving</p>         <p>paragraphs</p>      </div>      <div ...
Manipulação DOM$(p).appendTo(#foo)<html>   <body>      <div>jQuery         <p>moving</p>         <p>paragraphs</p>      </...
Manipulação DOM$(p).appendTo(#foo)<html>   <body>      <div>jQuery</div>      <div id=”foo”>example             <p>moving<...
Navegação DOM$(div.section).parent()$(div.section).next()$(div.section).prev()$(div.section).nextAll(div)$(div.section).si...
Navegação no DOM$(table)<html>   <body>      <table></table>      <div>         <p>foo</p>         <span>bar</span>      <...
Navegação no DOM$(table).next()<html>   <body>      <table></table>      <div>         <p>foo</p>         <span>bar</span>...
Navegação no DOM$(table).next()<html>   <body>      <table></table>      <div>         <p>foo</p>         <span>bar</span>...
Navegação no DOM$(table).next().find(p);<html>   <body>      <table></table>      <div>         <p>foo</p>         <span>b...
Navegação no DOM$(table).next().find(p);<html>   <body>      <table></table>      <div>         <p>foo</p>         <span>b...
Efeitos$(div.section).show()$(div.section).hide()$(div.section).toggle()$(div.section).fadeIn()$(div.section).fadeOut()$(d...
Efeitos.fadeOut().fadeIn()$(function(){     $("div#teste").click(function(){          $(this)               .fadeOut()    ...
Efeitos.slideUp().slideDown()$(function(){     $("div#teste").click(function(){          $(this)               .slideUp() ...
Ajax$.getJSON()$.get()$.post()$.getScript(div)$(div.section).load(page.html)$.ajax()$.ajaxSetup()
Ajax.load(‘url’)$(‘div’)   .load(‘pagina.html div’)
Ajax$.getJSON(url, sucess)$.getJSON(       "http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&fo...
Plug-in:Quando o do something     não existe
WooThemes FlexSliderhttp://www.woothemes.com/flexslider/   http://flexslider.woothemes.com/index.html
WooThemes FlexSliderArquivos necessários<link rel="stylesheet" href="flexslider.css"type="text/css"><script src="jquery.js...
WooThemes FlexSliderEstrutura no HTML<div class="flexslider">       <ul class="slides">              <li><img src="slide1....
WooThemes FlexSliderEstrutura JavaScript<script type="text/javascript" charset="utf-8">      $(function() {             $(...
WooThemes FlexSliderConfigurando o FlexSlider<script type="text/javascript" charset="utf-8">      $(function() {          ...
jQuery Masked Inputhttp://digitalbush.com/projects/masked-input-plugin/
jQuery Masked InputArquivos necessários<script src="jquery.js"></script><script src="jquery.maskedinput.js"></script>
jQuery Masked InputEstrutura no HTML<input type="text" name="cpf" id="cpf"><br><input type="text" name="cep" id="cep"><br>...
jQuery Masked InputEstrutura JavaScript<script type="text/javascript" charset="utf-8">      $(function() {              $(...
jQuery UI      http://jqueryui.com/
jQuery UIArquivos necessários<link rel="stylesheet" href="jquery-ui.css" /><script src="jquery.js"></script><script src="j...
jQuery UIEstrutura no HTML<div id="accordion"> <h3>Section 1</h3> <div>   <p>...</p> </div> ... <h3>Section 4</h3> <div>  ...
jQuery UIEstrutura JavaScript<script type="text/javascript" charset="utf-8">      $(function() {             $( "#accordio...
OutrosjQuery Lightbox      http://leandrovieira.com/projects/jquery/lightbox/Validation      http://bassistance.de/jquery-...
$(‘DÚVIDAS’).tirar()
Referênciashttp://jquery.com/http://oscarotero.com/jquery/http://www.slideshare.net/1Marc/jquery-essentialshttp://www.slid...
Jquery Framework
Upcoming SlideShare
Loading in …5
×

Jquery Framework

668 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
668
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Jquery Framework

  1. 1. Luiz Carlos Chavesluiz.chaves@ifpb.edu.br
  2. 2. Por que usar o jQuery?
  3. 3. Quem usa? http://trends.builtwith.com/javascript/jQuery
  4. 4. Qual é a dominância? http://trends.builtwith.com/javascript
  5. 5. O que o pessoal está procurando?http://www.google.com/trends/explore#q=dojo+javascript,jquery+javascript,yui+javas cript,prototype+javascript,mootools+javascript
  6. 6. O que é jQuery?
  7. 7. Definição Jquey é um framework JavaScript:• Selector engine• Manipulação do DOM• Eventos JS• Animação• Ajax
  8. 8. 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
  9. 9. É mais fácil desenvolver com jQuery!
  10. 10. Ocultar divs apenas com JSdivs = document.getElementByTagName(‘div’);for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’;}Ocultar divs com jQueryjQuery(‘div’).hide();
  11. 11. Função jQuery Método de jQueryjQuery(‘div’).hide(); Argumento
  12. 12. 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);
  13. 13. Isso é realmentewrite less, do more
  14. 14. $ == jQuery$ é um alias para jQuery
  15. 15. Adicionar classe odd na tabelajQuery(table tr:nth-child(odd)).addClass(odd);Ocultar divs com jQueryjQuery(‘div’).hide();
  16. 16. Adicionar classe odd na tabela$(table tr:nth-child(odd)).addClass(odd);Ocultar divs com jQuery$(‘div’).hide();
  17. 17. Find something, do something
  18. 18. 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")
  19. 19. Find something$( ‘p’) Seleciona todos os parágrafos
  20. 20. Do something$( ‘p’).hide() Seleciona todos os parágrafos e os ocultam
  21. 21. Create something, do something
  22. 22. $( ‘<li>home</li>’).appendTo(“ul#nav”)Cria um elemento <li> com texto “home” e Insere na lista com id “nav”
  23. 23. Encadeamento & coloção
  24. 24. Encadeamento$(p) .hide();$(p) .fadeIn(3000);
  25. 25. Encadeamento$(p) .hide() .fadeIn(3000);
  26. 26. Coleção$(p) .each( function(index){ $(this).html( index+ - +$(this).text() ); } );
  27. 27. Tipos de parâmetros do jQuery
  28. 28. • 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(){})
  29. 29. Um método, vários usos
  30. 30. 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>”; });
  31. 31. O jQuery no <head> não está funcionando!
  32. 32. <script> $(document).ready(function(){ $(p).hide().fadeIn(3000); });</script>
  33. 33. <script> $(function(){ $(p).hide().fadeIn(3000); });</script>
  34. 34. jQuery API
  35. 35. Eventos$(input).focus()$(input).change()$(input).blur()$(input).keyup()$(.button).click()$(.content).hover()$(div).delegate()$(div).bind()
  36. 36. Eventos.click()$(function(){ $("div#teste").click(function(){ $(this) .hide(); });});
  37. 37. 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")
  38. 38. 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);
  39. 39. 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);
  40. 40. Manipulação DOM$(div.section).append($(h1))$(div.section).appendTo($(body))$(div.section).html($(h1))$(div.section).prepend($(h1))$(div.section).text(<p>teste</p>)$(div.section).after($(h1))$(div.section).remove()
  41. 41. Manipulação DOM$(#foo)<html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body></html>
  42. 42. Manipulação DOM$(#foo).append(<p>test</p>)<html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body></html>
  43. 43. Manipulação DOM$(#foo).append(<p>test</p>)<html> <body> <div>jQuery</div> <div id=”foo”>example<p>test</p></div> </body></html>
  44. 44. Manipulação DOM$(p)<html> <body> <div>jQuery <p>moving</p> <p>paragraphs</p> </div> <div id=”foo”>example</div> </body></html>
  45. 45. Manipulação DOM$(p).appendTo(#foo)<html> <body> <div>jQuery <p>moving</p> <p>paragraphs</p> </div> <div id=”foo”>example</div> </body></html>
  46. 46. Manipulação DOM$(p).appendTo(#foo)<html> <body> <div>jQuery</div> <div id=”foo”>example <p>moving</p> <p>paragraphs</p> </div> </body></html>
  47. 47. Navegação DOM$(div.section).parent()$(div.section).next()$(div.section).prev()$(div.section).nextAll(div)$(div.section).siblings()$(h1:first).parents()$(div).children()$(div).children().eq(2)$(div).find(a)
  48. 48. Navegação no DOM$(table)<html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body></html>
  49. 49. Navegação no DOM$(table).next()<html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body></html>
  50. 50. Navegação no DOM$(table).next()<html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body></html>
  51. 51. Navegação no DOM$(table).next().find(p);<html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body></html>
  52. 52. Navegação no DOM$(table).next().find(p);<html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body></html>
  53. 53. Efeitos$(div.section).show()$(div.section).hide()$(div.section).toggle()$(div.section).fadeIn()$(div.section).fadeOut()$(div.section).slideUp()$(div.section).slideDown()
  54. 54. Efeitos.fadeOut().fadeIn()$(function(){ $("div#teste").click(function(){ $(this) .fadeOut() .fadeIn(); });});
  55. 55. Efeitos.slideUp().slideDown()$(function(){ $("div#teste").click(function(){ $(this) .slideUp() .slideDown(); });});
  56. 56. Ajax$.getJSON()$.get()$.post()$.getScript(div)$(div.section).load(page.html)$.ajax()$.ajaxSetup()
  57. 57. Ajax.load(‘url’)$(‘div’) .load(‘pagina.html div’)
  58. 58. 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"); }); });
  59. 59. Plug-in:Quando o do something não existe
  60. 60. WooThemes FlexSliderhttp://www.woothemes.com/flexslider/ http://flexslider.woothemes.com/index.html
  61. 61. WooThemes FlexSliderArquivos necessários<link rel="stylesheet" href="flexslider.css"type="text/css"><script src="jquery.js"></script><script src="jquery.flexslider.js"></script>
  62. 62. WooThemes FlexSliderEstrutura 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>
  63. 63. WooThemes FlexSliderEstrutura JavaScript<script type="text/javascript" charset="utf-8"> $(function() { $(.flexslider).flexslider(); });</script>
  64. 64. WooThemes FlexSliderConfigurando o FlexSlider<script type="text/javascript" charset="utf-8"> $(function() { $(.flexslider).flexslider( {animation: "slide", animationLoop: true, itemWidth: 400} ); });</script>
  65. 65. jQuery Masked Inputhttp://digitalbush.com/projects/masked-input-plugin/
  66. 66. jQuery Masked InputArquivos necessários<script src="jquery.js"></script><script src="jquery.maskedinput.js"></script>
  67. 67. jQuery Masked InputEstrutura 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">
  68. 68. jQuery Masked InputEstrutura 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>
  69. 69. jQuery UI http://jqueryui.com/
  70. 70. jQuery UIArquivos necessários<link rel="stylesheet" href="jquery-ui.css" /><script src="jquery.js"></script><script src="jquery-ui.js"></script>
  71. 71. jQuery UIEstrutura no HTML<div id="accordion"> <h3>Section 1</h3> <div> <p>...</p> </div> ... <h3>Section 4</h3> <div> <p>...</p> </div></div>
  72. 72. jQuery UIEstrutura JavaScript<script type="text/javascript" charset="utf-8"> $(function() { $( "#accordion" ).accordion(); });</script>
  73. 73. OutrosjQuery 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/...
  74. 74. $(‘DÚVIDAS’).tirar()
  75. 75. Referênciashttp://jquery.com/http://oscarotero.com/jquery/http://www.slideshare.net/1Marc/jquery-essentialshttp://www.slideshare.net/remy.sharp/write-less-do-morehttp://medleyweb.com/web-dev/40-best-jquery-plugins-every-web-developer/http://designshack.net/articles/javascript/40-awesome-jquery-plugins-you-need-to-check-out/http://webdesignledger.com/resources/best-jquery-plugins-of-2012

×