Your SlideShare is downloading. ×
  • Like
Unb   2012.1 - dweb - 10 - j query
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Unb 2012.1 - dweb - 10 - j query

  • 274 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
274
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Curso Superior de Tecnologia em Design GráficoDWEB - Design paraWeb 10 jQuery “Todo aquele que ultrapassa a doutrina de Cristo e nela não permanece não tem Deus; o que permanece na doutrina, esse tem tanto o Pai como o Filho.” 2 João 1:91 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 2. DWEB – Design para Web / Carlos José Contato Carlos José carlosjose.unibratec@gmail.com www.carlosjose.net twitter.com/carlosjoser2n2 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 3. DWEB – Design para Web / Carlos José Objetivo da Aulan Apresentar a versatilidade da biblioteca jQuery.3 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 4. DWEB – Design para Web / Carlos José Agendan O que é jQuery?n Para que serve?n Utilização jQueryn Padrões web e jQueryn Como instalar jQuery?n Seletoresn Exercícios4 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 5. DWEB – Design para Web / Carlos José jQueryn  O que é jQuery? î É uma biblioteca JavaScript criada por John Resig e disponibilizada de forma livre mediante licença GPL (GNU General Public Licence) para uso pessoal e comercial.n  Para que serve? î É destinada a adicionar interatividade e dinamismo aos documentos web melhorando a usabilidade e acessibilidade enriquecendo a experiência do usuário.5 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 6. DWEB – Design para Web / Carlos José jQueryn  Utilize jQuery para: î Adicionar efeitos visuais e animações; î Acessar e manipular o DOM (Document Object Model); î Buscar informações no servidor sem a necessidade de recarregar à página; î Prover interatividade; î Alterar conteúdo; î Modificar a apresentação e estilização; î Simplificar tarefas específicas do JavaScript;6 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 7. DWEB – Design para Web / Carlos José jQueryn  Padrões web e jQuery î Esta biblioteca esta em total conformidade com os padrões web; î Compatível com qualquer sistema operacional; î Compatível com todos os navegadores inclusive o Internet Explorer; î Suporte total as CSS37 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 8. DWEB – Design para Web / Carlos José jQueryn  Características da biblioteca jQuery î Utilizaseletores CSS para localizar elementos componentes da estrutura de marcação HTML; î Possui arquitetura compatível com instalação de plug-ins e extensões em geral; î É indiferente às inconsistências de renderização dos navegadores; î É extensível, pois admite a criação e inserção de novas funcionalidades na biblioteca existente.8 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 9. DWEB – Design para Web / Carlos José jQueryn  Como instalar jQuery? î A biblioteca jQuery é um arquivo texto JavaScript com extensão .js î A biblioteca esta disponível para download em: n  http://jquery.com/9 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 10. DWEB – Design para Web / Carlos José jQueryn  Seletores jQuery î Paraentender bem seletores, é necessário estar familiarizado com a árvore do documento e o relacionamento entre os elementos que a compõem. html header body title ul li li li10 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 11. DWEB – Design para Web / Carlos José jQueryn  Seletores CSS 1 - 3 î  *: qualquer elemento. n  $(p.comment-meta *); // get all elements inside p.comment-meta î  E: pega qualquer elemento com o nome E. n  $(div); // get all div tags î  E:nth-child(n): em um elemento E, pega o elemento n de seu pai. n  $(li:nth-child(2)); // get <li>Item 2</li> î  E:first-child: em um elemento E, pega o primeiro filho de seu pai. n  $(li:first-child); // get <li>Item 1</li> î  E:empty: um elemento E que não possui filhos. n  $(div:empty); // get <div id="empty-div"></div>11 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 12. DWEB – Design para Web / Carlos José jQueryn  Seletores CSS 1 - 3 î  E:enabled: um elemento E que está ativo. n  $(input:enabled); // get <input type="button" value="Click me!" / > î  E:disabled: um elemento E que está inativo. n  $(input:disabled); // get <input type="button" disabled="disabled" value="Disabled button" /> î  E:checked:um elemento E (radio ou checkbox) que está selecionado. n  $(input:checked); // get <input type="checkbox" checked="checked" /> î  E:selected: um elemento E (option) que está selecionado. n  $(option:selected); // get <option value="3">Option 3</option> î  E F: um elemento E que tenha um filho F. n  $(p strong); // get <strong>Sample:</strong>12 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 13. DWEB – Design para Web / Carlos José jQueryn  Seletores CSS 1 - 3 î  E > F: um elemento F dentro de E. n  $(p > em); // get <em>Inside a paragraph</em> but not <span><em>Inside a span</em></span> î  E + F: elemento F imediatamente precedido por um elemento E. n  $(h1 + p); // get <p>This is just a dummy text.</p> î  E ~ F: elementos F precedido por um elemento E. n  $(h1 ~ ul); // get <ul id="list" class="list-class"> î  E,F,G: elementos E, F e G. n  $(h1,ul); // get <h1> and <ul> î  E[attr]: elementos E que possuam o atributo attr. n  $(:checkbox[checked]); // get <input type="checkbox" id="checkbox" />13 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 14. DWEB – Design para Web / Carlos José jQueryn  Seletores CSS 1 - 3 î  E[attr^=value]:elementos E que possuam um atributo attr cujo valor inicie-se por value. n  $([id^=empty]); // get <div id="empty-div"></div> î  E[attr$=value]: elementos E que possuam um atributo attr cujo valor termine com value. n  $([id$=div]); // get <div id="empty-div"></div> î  E[attr*=value]: elementos E que possuam um atributo attr cujo valor contenha value. n  $(dd[class*=o]); // get <dd class="color"> and <dd class="word"> î  E[attr=value]: elementos cujo atributo attr tenham valor igual a value. n  $(dd[class=word]); // get <dd class="word">14 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 15. DWEB – Design para Web / Carlos José jQueryn  Seletores adicionados pelo jQuery î  :even:todos os elementos de índice par. Os índices se iniciam em zero. n  $(option:even); // get <option value="1"> and <option value="3"> î  :odd: todos os elementos de índice ímpar. n  $(option:odd); // get <option value="2"> î  :eq(N) e :nth(N): seleciona o elemento de índice N. n  $(option:eq(0)); // get <option value="1"> n  $(option:nth(1); // get <option value="2"> î  :gt(N): seleciona os elementos cujo índice sejam maior que N. n  $(li:gt(1)); // get <li>Item 3</li> î  :lt(N): seleciona os elementos cujo índice seja menores que N. n  $(li:lt(1)); // get <li>Item 1</li>15 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 16. DWEB – Design para Web / Carlos José jQueryn  Seletores adicionados pelo jQuery î  :first: equivalente a :eq(0). n  $(li:first); // get <li>Item 1</li> î  :last: seleciona o último elemento. n  $(li:last); // get <li>Item 3</li> î  :parent: seleciona os elementos que têm filhos (incluindo textos). n  $(h1:parent); // get <h1>jQuery Selectors</h1> î  :contains(text): seleciona os elementos que têm o texto especificado. n  $(li:contains("Item 1")); // get <li>Item 1</li> î  :visible: seleciona todos os elementos visíveis (não inclui elementos de formulário hidden). n  $(h2:visible); // get <h2>This is a visible H2</h2> î  :hidden: seleciona campos de formulário hidden e elementos não- visíveis. n  $(h2:hidden); // get <h2 style="display: none;">This is a hidden H2</h2>16 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 17. DWEB – Design para Web / Carlos José jQueryn  Formulários î  O jQuery fornece alguns atalhos para se trabalhar com campos de formulário, evitando que você tenha que usar um seletor de atributo input[type=radio], por exemplo. n  Veja como é simples: î  :input: seleciona qualquer tipo de campo de formulário (input, button, textarea, select). î  :text: seleciona campos com type="text". î  :password: seleciona campos com type="password". î  :radio: seleciona campos com type="radio". î  :checkbox: seleciona campos com type="checkbox". î  :file: seleciona campos com type="file". î  :submit: seleciona campos com type="submit". î  :image: seleciona campos com type="image". î  :reset: seleciona campos com type="reset". î  :button: seleciona campos com type="button" ou <button></button>.17 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 18. DWEB – Design para Web / Carlos José jQuery: exe01jq.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br"> <head> <meta charset="utf-8" /> <title>Exe01jq</title> <style type="text/css" media="all"> h1{color:#FC0} </style> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn1").click(function(){ $(".cor").css("color","#ff0000"); }); }); </script> </head> <body> <h1 class="cor">Muda cor</h1> <button type="button" id="btn1">Vermelha</button> </body> </html>18 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 19. DWEB – Design para Web / Carlos José jQuery: exe02jq.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br"> <head> <meta charset="utf-8" /> <title>Exe02jq</title> <style type="text/css" media="all"> div{ width:200px;height:100px;border:1px solid #F00;margin:20px;padding:15px } </style> <script type="text/javascript" src="js/jquery-1.7.1.min.j"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").css("background","#870cdd"); $("#div2").css("background","#984323"); $(".div3").css("background","#adfced"); }); }); </script> </head> <body> <div>DIV 1</div> <div id="div2">DIV 2</div> <div class="div3">DIV 3</ div> <button type="button">Colorir DIVS</button></body> </html>19 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 20. DWEB – Design para Web / Carlos José jQuery: exe03jq.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br"> <head> <meta charset="utf-8" /> <title>exe03jquery</title> <style> div{border:1px solid #F00; width:200px; height:80px; margin:10px; background:#f90; display:none;} p{background:#036; color:#3ff;} </style> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bt1").click(function(){$("div").show();}); $("#bt2").click(function(){$("div").hide();}); $("#bt3").click(function(){$("div").show("slow");}); $("#bt4").click(function(){$("div").hide("slow");}); $("#bt5").click(function(){$("div").show(3000);}); $("#bt6").click(function(){$("div").hide(1500);}); $("#bt7").click(function(){$("div").toggle();}); }); </script> </head>20 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 21. DWEB – Design para Web / Carlos José jQuery: exe03jq.html <body> <h1>exe03jquery - Efeitos</h1> <button id="bt1" type="button">show</button> <button id="bt2" type="button">hide</button> <button id="bt3" type="button">show(slow)</button> <button id="bt4" type="button">hide(slow)</button> <button id="bt5" type="button">show(3000)</button> <button id="bt6" type="button">hide(1500)</button> <button id="bt7" type="button">toggle()</button> <div>Div recebendo os efeitos do jQuery!!!</div> <p>clique seguidamente no bot&atilde;o toggle()</p> </body> </html>21 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 22. DWEB – Design para Web / Carlos José jQuery: exe04jq.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br"> <head> <meta charset="utf-8" /> <title>exe04jquery</title> <style> div{border:1px solid #F00; width:200px; height:80px; margin:10px; background:#f90;} </style> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bt1").click(function(){ $("div").animate({ width:"linear", height:"toggle", },"slow"); }); }); </script> </head> <body> <h1>exe04jquery – Efeitos com animate()</h1> <button id="bt1" type="button">animate</button> <div>Div recebendo os efeitos do jQuery!!!</div> </body> </html>22 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 23. DWEB – Design para Web / Carlos José jQuery: exe05jq.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br"> <head> <meta charset="utf-8" /> <title>exe05jquery</title> <style> div{border:1px solid #F00; width:200px; height:80px; margin:10px;} </style> <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btcor").click(function(){ $("div").css("background","#870ccd"); $("#div2").css("background","#984323"); $(".div3").css("background","#acfced"); }); $(function(){ $("#div2").hover(function(){ $(this).css("background","#ffcc99"); },function(){ $(this).css("background","#984323") } ); }); }); </script> </head> <body> <h1>exe05jquery</h1> <div>div 1</div><div id="div2">div 2</div><div class="div3">div 3</div> <button id="btcor" type="button">Colorir divs</button> </body> </html>23 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 24. DWEB – Design para Web / Carlos José Plugins de terceiros com jQueryn  Exemplos: î  http://www.jfontsize.com/demo/ î  http://www.steamdev.com/imgr/ î  http://www.huddletogether.com/projects/lightbox2/ î  http://fancybox.net/ î  http://snook.ca/technical/jquery-bg/ î  http://maxb.net/scripts/jbgallery/ î  http://www.myjqueryplugins.com/jScrollbar î  http://www.myjqueryplugins.com/BackToTop î  http://nivo.dev7studios.com/ î  http://slidesjs.com/24 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 25. DWEB – Design para Web / Carlos José Perguntas ?25 Capítulo 10 - jQuery Tuesday, 15 de May de 12
  • 26. DWEB – Design para Web / Carlos José Considerações Finais Obrigado!26 Capítulo 10 - jQuery Tuesday, 15 de May de 12