Your SlideShare is downloading. ×
0
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery Simplificando o JavaScript

2,670

Published on

Palestra ministrada na ULBRA de São Jerônimo em 2009, com pinceladas básicas sobre o jQuery.

Palestra ministrada na ULBRA de São Jerônimo em 2009, com pinceladas básicas sobre o jQuery.

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • eu utilizo o Jquery com ajax no meu site... o conteudo é carregado dentro de uma div e por exemplo dentro dessa div carregada tem um botão que eu quero que ele de um hide() no div todo... então na pagina index no javascript eu crio como? $('#centro #btn1').click.... é isso? Obrigado.... meu email wagner.admin@drachinski.com.br abraço
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,670
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
104
Comments
1
Likes
1
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. jQuerySimplificando o JavaScript Everaldo Wanderlei Uavniczak everaldouav@gmail.com
  • 2. Sobre a apresentaçãoNível:- InicianteIndicada para:- "Profissionais Web" (WebMaster, WebDesigners, WebDevelopers)- Programadores- Profissionais de Marketing DigitalPré-requisitos:- Nenhum, embora HTML, JavaScript e CSS ajudamObjetivo:Habilitar a quem nunca tenha programado em JavaScript o usode jQuery nos seus projetos [de aplicação] Web
  • 3. WTF is jQuery?jQuery é um framework para ajudar os desenvolvedores a seconcentrarem na lógica dos sistemas da web e não nosproblemas de incompatibilidade dos navegadores atuais.Seu lema é escrever menos e fazer mais"O foco principal da biblioteca jQuery é a simplicidade. Porque submeter os desenvolvedores ao martírio de escreverlongos e complexos códigos para criar simples efeitos?"(John Resig - criador do jQuery)
  • 4. CaracterísticasLeve (56kb jquery-1.3.2.min.js)RápidoSimplesExtensível (plugin)Cross-browser
  • 5. Compatibilidade Firefox 1.5+ Internet Explorer 6+ Safari 2.0.2+ Opera 9+Apresenta problemas com: FF 1.0.x IE 1-5. Safari 1. Safari 2.0 Opera 1.0-8.5 Konqueror
  • 6. Quem usa jQuery?Google SalesforceDell NewsgatorDigg The OnionMSNBC FeedburnerAmazon VodafoneIntel Linux.comBBC LogitechNewsweek MozillaAOL WordpressOracle DrupalCisco Systems TracTechnorati JoomlaSourceforge muitos outros...
  • 7. Pra que serve?Adicionar efeitos visuais e animação;Acessar e Manipular o DOM (Document Object Model)AJAX;Prover interatividade;Alterar Conteúdo;Modificar apresentação e estilização;Simplificar tarefas do JavaScript;Muito mais...
  • 8. O que jQuery permiteUtiliza seletores CSS para localizar elementos na estruturada marcação HTML na página;Realizar interação implícita (permite percorrer a estruturados elementos sem usar loop);Utilizar programação encadeada (cada método retorna umobjeto);Etc...
  • 9. Obstrusivo X Não Obstrusivo// OBSTRUSIVO:<p onclick="alert(teste);">bla bla bla</p>// NÃO OBSTRUSIVO:// jquery$(p.teste).onclick(function() { alert(teste);});// html<p class="teste">bla bla bla</p>
  • 10. Como instalar Baixe o arquivo no site em http://jquery.com/ e coloque o seguinte código entre as tags HEAD.<html><head>...<script type="text/javascript" charset="utf-8"src="arquivo_jquery.js"></script>...</head><body>...
  • 11. Workflow sugerido no Desenvolvimento Web Vejam exemplos nos endereços abaixo1) HTML (somente HTML)http://qfdb.net/workshop/jquery_workshop/cap_2/qfdb/index_nocss_nojquery.html2) HTML + CSShttp://qfdb.net/workshop/jquery_workshop/cap_2/qfdb/index_css_nojquery.html3) HTML + CSS + jQueryhttp://qfdb.net/workshop/jquery_workshop/cap_2/qfdb/index_css_jquery.html4) HTML + CSS + jQuery + Firulas + Perfumarias + Etchttp://qfdb.net/workshop/jquery_workshop/cap_2/qfdb/index_css_jquery_firulas.htmlVejam também o "Menu do site do Maujor":http://www.livrojquery.com.br/cap_14/arquivo-14.2a.html
  • 12. Construtor jQuery$()
  • 13. Funcionamento do jQuery Encontre algo e faça alguma coisa$(p).css(color, blue);$(#teste).addClass(classe_para_teste);oujQuery(p).css(color, blue);jQuery(#teste).addClass(classe_para_teste);Métodos encadeados:$(p).children(b).css(color, blue).addClass(classe_bold).fadeOut();
  • 14. O método ready()Executa um código quando a página for carregada Com JavaScriptwindow.onload = function () { ... } Com jQueryModo Descritivo$(document).ready(function() { ... });Modo Resumido$().ready(function() { ... });Modo Simplificado (Abreviado)$(function() { ...}
  • 15. Seletores jQuery$(expressão [, contexto])Sem especificar o contexto$(div).css(color, blue);$(div, $(document) ).css(color, blue);Especificando o contexto$(p, $(#teste)).css(color, blue);
  • 16. Tipos de SeletoresCompreenda eles e compreenderá jQuerySeletores GeraisSeletores SimplesSeletores CompostosSeletores FiltrosSeletores de ConteúdoSeletores de AtributoFiltro para Seletores-FilhoSeletores de Formulário *Filtros para Formulários *
  • 17. Seletores gerais $(html) ou $(text)Adicionam conteúdo HTML ou Texto na página// adiciona conteúdo HTML no documento,// no final da TAG HTML BODY$(<p>teste peste</p>).prependTo(body);$(teste peste).prependTo(body);
  • 18. Seletores Simples Acessam elementos, classes, identificadores ou todos eles combinados Elementos$(p).css(color, blue); Classes (class)$(.classe_teste).css(color, blue); Identificadores (id)$(#teste_peste).css(color, blue); Combinações$(p, li, #teste, li.classe, .xyz).css(color, blue);
  • 19. Seletores Compostos (1) $(ancestral descendente)// acessa o elemento B que tenha como//ancestral um elemento DIV$(div b).css(color, blue);DIV B -> OK I B -> OK/DIV
  • 20. Seletores Compostos (2) $(pai > filho)// Acessa todos elementos P que tenham// um elemento DIV como pai$(div > p).css(color, blue);DIV P -> OK DIV P -> OK P -> OK H2/DIV
  • 21. Seletores Compostos (3) $(anterior + posterior)// Acessa o elemento P que segue// o elemento DIV$(div + p).css(color, blue);DIV P -> OK P P P/DIV
  • 22. Seletores Compostos (4) $(anterior ~ irmãos)// Acessa todos P que são irmãos// e descendentes de H1$(h1 ~ p).css(color, blue);PH1 P -> OK DIV P -> OK P -> OK DIV
  • 23. Seletores Filtros (1) $(seletor:first), $(seletor:last)$(li:first).css(color, blue);$(li:last).css(color, blue);UL LI -> OK (first) LI LI LI -> OK (last)/UL
  • 24. Seletores Filtros (2) $(seletor:not(seletor2))$(li:not(li:first)).css(color, blue);UL LI LI -> OK LI -> OK LI -> OK/UL
  • 25. Seletores Filtros (3) $(seletor:even), $(seletor:odd) Seletores não previsto nas CSS$(tr:even).css(color, blue);$(tr:odd).css(color, lime);TABLE TR -> OK even TR -> OK odd TR -> OK even TR -> OK odd TR -> OK even/TABLE
  • 26. Seletores Filtros (4) $(seletor:eq(índice)) Seletores não previsto nas CSS Contagem inicia em 0 (zero)$(li:eq(1)).css(color, blue);UL LI LI -> OK // elemento de índice 1 LI LI/UL
  • 27. Seletores Filtros (5) $(seletor:gt(índice)), $(seletor:lt(índice)) Seletores não previsto nas CSS Contagem inicia em 0 (zero)$(li:gt(2)).css(color, blue);$(li:gt(2)).css(color, blue);UL LI -> OK lt LI -> OK lt LI LI -> OK gt LI -> OK gt/UL
  • 28. Seletores Filtros (6) $(:header) Seletores não previsto nas CSS$(:header).css(color, blue);H1 -> OK H2 -> OK H3 -> OK H2 -> OK H2 -> OK H3 -> OK H4 -> OK
  • 29. Seletores de Conteúdo (1) $(seletor:contains(texto)) Seletores não previsto nas CSS$(p:contains(teste)).css(color, blue);P (conteúdo do parágrafo) /PDIV (conteúdo de teste) /DIVP (conteúdo de teste 2) /P -> OK
  • 30. Seletores de Conteúdo (2) $(seletor:empty) Seletor previsto na CSS3$(td:empty).css(color, blue);TABLE TR TD () -> OK TD (conteúdo da célula) TD (outro conteúdo) TD () -> OK TD (mais conteúdo) /TR/TABLE
  • 31. Seletores de Conteúdo (3) $(seletor1:has(seletor2)) Seletor não previsto nas CSS$(p:has(b)).css(color, blue);P B /B /P -> OKP /Pp I /I B /B /P -> OKP I U /U /I /P
  • 32. Seletores de Conteúdo (3) $(seletor:parent) Seletor não previsto nas CSS// Acessa elementos que tenham// elementos-filhos, ou text-nodes$(p:parent).css(color, blue);P (texto) /P -> OKP /PP (teste) /P -> OK
  • 33. Seletores de Atributo (1) $(seletor[atributo]) Seletor previsto pela CSS3 // Acessa quem possui um atributo não vazio$(p[title]).css(color, blue);PDIVP title=x -> OKP title=x class=x -> OKPP id=x class=x
  • 34. Seletores de Atributo (2) $(seletor[atributo = "valor"]) Seletor previsto pela CSS3// Acessa quem possui atributo = valor$(p[lang = "en"]).css(color, blue);P lang="pt"P lang="pt-BR"P lang="en" -> OKP lang="pt"
  • 35. Seletores de Atributo (3) $(seletor[atributo != "valor"]) Seletor previsto pela CSS3// Acessa quem tem atributo com o valor// diferente de "valor"$(p[lang != "en"]).css(color, blue);P -> OK // lang="" (vazio)P lang="pt" -> OKP lang="pt-BR" -> OKP lang="en"P lang="pt" -> OK
  • 36. Seletores de Atributo (4) $(seletor[atributo ^= "valor"]) Seletor previsto pela CSS3// Acessa quem tem atributo com o valor// iniciando com "valor"$(p[atributo ^= "pt"]).css(color, blue);PP lang="pt" -> OKP lang="en"P lang="pt" -> OKP lang="pt-br" -> OKP lang="pl"
  • 37. Seletores de Atributo (5) $(seletor[atributo $= "valor"]) Seletor previsto pela CSS3// Acessa quem tem atributo com o valor// iniciando por "valor"$(p[atributo $= "t"]).css(color, blue);PP lang="pt" -> OKP lang="en"P lang="pt" -> OKP lang="pt-br"P lang="xyzt" -> OK
  • 38. Seletores de Atributo (6) $(seletor[atributo *= "valor"]) Seletor previsto pela CSS3// Acessa quem tem atributo com o valor// contendo o "valor"$(p[title *= "teste"]).css(color, blue);P title="teste peste" -> OKP title="o teste" -> OKP title="o teste bla " -> OKP title="bla bla bla "
  • 39. Seletores de Atributo (7) $(seletor[filtro-1][filtro-2]...[filtro-n]) Seletor previsto pela CSS3// Acessa quem contempla todas regras$(p[lang^="pt"][id][class*="teste"]).css(color,blue);P id class="teste"P id class="ab teste ba" lang="pt-BR" -> OKP id class="teste" lang="pt" -> OKP
  • 40. Filtro para seletores-filho (1) $(seletor:first-child), $(seletor:last-child) Seletor previsto pela CSS3$(ol li:first-child).css(color, blue);$(ol li:last-child).css(color, blue);OL LI -> OK first-child LI LI LI -> OK last-child/OL
  • 41. Filtro para seletores-filho (2) $(seletor:only-child) Seletor previsto pela CSS3$(ol li:only-child).css(color, blue);OL LI LI LI/OLOL LI -> OK/OL
  • 42. Filtro para seletores-filho (3)$(seletor:nth-child(índice/even/odd/equação)) Seletor previsto pela CSS3Ih, agora F%#@#!!!!
  • 43. $(function() { $(button).click(function () { $(li:nth-child(3n-2)).css(background, blue); $(li:nth-child(3n-1) ).css(background, white); $(li:nth-child(3n) ).css(background, black); });});<ul id="exercicio" style="background: white;"> <li>Item # 1</li> - azul <li>Item # 2</li> - branco <li>Item # 3</li> - preto <li>Item # 4</li> - azul <li>Item # 5</li> - branco <li>Item # 6</li> - preto <li>Item # 7</li> - azul <li>Item # 8</li> - branco <li>Item # 9</li> - preto</ul>
  • 44. Manipulação de DOMPermite alterar propriedades dos elementosMaiores detalhes acesse: http://www.livrojquery.com.br/download.php http://localhost/work/jquery_workshop
  • 45. Manipulação de atributos $().attr(nome_atributo) - retorna valor de um atributovar classe = $(#teste).attr(class); $().attr({atributo:valor}) - seta valor(es) de atributos do elemento $(#teste).attr({ title:"teste", class:"testepeste", lang:pt-BR}); $().attr(atributo, valor) - seta o valor de um atributo do elemento$(#teste).attr(title, Big Teste Peste); $().removeAttr(atributo) - remove um atributo do elemento$(#teste).removeAttr(title);
  • 46. Manipulando o atributo class $().addClass(valor_classe) - adiciona uma classe $(p.testepeste).addClass(teste_classe); $().hasClass(valor_classe verifica se o elemento possui uma classe var existe = $(#testepeste).hasClass(teste); $().removeClass(valor_classe) - remove a classe$(p.testepeste).removeClass(teste_classe); $().toggleClass(nome_da_classe) Adiciona uma classe se não existir e vice-versa$(#testepeste).toggleClass(teste);
  • 47. EventosPermitem interagir com o usuário.Exemplos de eventos:- blur- change- mouseover- mouseout- keypress- submit- etc...Acessem:http://qfdb.net/workshop/jquery_workshop/cap_5/eventos_auxiliares.html
  • 48. // head$(function() { $(button).click(function () { $(ul li:lt(5)).css(color, green); $(ul li:gt(4)).css(color, red); $(ul li:odd).css(fontStyle, italic); $(ul li:odd).css(fontWeight, bolder); $(ul li:nth-child(3n-2)).css(background, blue); $(ul li:nth-child(3n) ).css(background, black); });});// body<ul id="exercicio" style="background: white;"> <li>Item # 1</li> <li>Item # 2</li> <li>Item # 3</li> <li>Item # 4</li> <li>Item # ...</li> <li>Item # 10</li></ul><button type="button" style="background: yellow;">Testar o script</button>
  • 49. EfeitosPermitem colocar efeito e animações nas páginas, comoocultar, controlando os seguintes aspectos: Visibilidade Efeito de Opacidade Efeito Corrediço Etc...Acessem:http://www.livrojquery.com.br/cap_06/arquivo-6.2a.htmlhttp://www.livrojquery.com.br/cap_06/arquivo-6.4a.htmlhttp://qfdb.net/workshop/jquery_workshop/cap_6/efeitos.html
  • 50. PluginsPermitem adicionar novas funcionalidades ao jQueryComo adicionar um plugin???Para adicionar um plugin basta adicionar o arquivo após oarquivo do jQuery.Por exemplo:<script type="text/javascript" charset="utf-8" src="jquery.js"></script><script type="text/javascript" charset="utf-8" src="jquery.corner.js"></script>
  • 51. Como usar um plugin?Acessem o site do plugin "corner": http://www.malsup.com/jquery/corner/
  • 52. Referênciashttp://www.livrojquery.com.br/
  • 53. ReferênciasPortuguês http://www.livrojquery.com.br/ http://qfdb.net/workshop/jquery_workshop/Inglês http://visualjquery.com/ neilmiddleton.com/presentations/jQuery%20in%20a%20nutshell.pdf jquery.com docs.jquery.com jquery.com/plugins learningjquery.com
  • 54. Perguntas

×