jQuerySimplificando o JavaScript   Everaldo Wanderlei Uavniczak     everaldouav@gmail.com
Sobre a apresentaçãoNível:- InicianteIndicada para:- "Profissionais Web" (WebMaster, WebDesigners, WebDevelopers)- Program...
WTF is jQuery?jQuery é um framework para ajudar os desenvolvedores a seconcentrarem na lógica dos sistemas da web e não no...
CaracterísticasLeve (56kb jquery-1.3.2.min.js)RápidoSimplesExtensível (plugin)Cross-browser
Compatibilidade  Firefox 1.5+  Internet Explorer 6+  Safari 2.0.2+  Opera 9+Apresenta problemas com:  FF 1.0.x  IE 1-5.  S...
Quem usa jQuery?Google              SalesforceDell                NewsgatorDigg                The OnionMSNBC             ...
Pra que serve?Adicionar efeitos visuais e animação;Acessar e Manipular o DOM (Document Object Model)AJAX;Prover interativi...
O que jQuery permiteUtiliza seletores CSS para localizar elementos na estruturada marcação HTML na página;Realizar interaç...
Obstrusivo X Não Obstrusivo// OBSTRUSIVO:<p onclick="alert(teste);">bla bla bla</p>// NÃO OBSTRUSIVO:// jquery$(p.teste).o...
Como instalar  Baixe o arquivo no site em http://jquery.com/ e coloque o  seguinte código entre as tags HEAD.<html><head>....
Workflow sugerido no                  Desenvolvimento Web               Vejam exemplos nos endereços abaixo1) HTML (soment...
Construtor jQuery$()
Funcionamento do jQuery          Encontre algo e faça alguma coisa$(p).css(color, blue);$(#teste).addClass(classe_para_tes...
O método ready()Executa um código quando a página for carregada                Com JavaScriptwindow.onload = function () {...
Seletores jQuery$(expressão [, contexto])Sem especificar o contexto$(div).css(color, blue);$(div, $(document) ).css(color,...
Tipos de SeletoresCompreenda eles e compreenderá jQuerySeletores GeraisSeletores SimplesSeletores CompostosSeletores Filtr...
Seletores gerais                   $(html) ou $(text)Adicionam conteúdo HTML ou Texto na página// adiciona conteúdo HTML n...
Seletores Simples  Acessam elementos, classes, identificadores ou todos                  eles combinados   Elementos$(p).c...
Seletores Compostos (1)                $(ancestral descendente)// acessa o elemento B que tenha como//ancestral um element...
Seletores Compostos (2)                    $(pai > filho)// Acessa todos elementos P que tenham// um elemento DIV como pai...
Seletores Compostos (3)                  $(anterior + posterior)// Acessa o elemento P que segue// o elemento DIV$(div + p...
Seletores Compostos (4)                 $(anterior ~ irmãos)// Acessa todos P que são irmãos// e descendentes de H1$(h1 ~ ...
Seletores Filtros (1)           $(seletor:first), $(seletor:last)$(li:first).css(color, blue);$(li:last).css(color, blue);...
Seletores Filtros (2)               $(seletor:not(seletor2))$(li:not(li:first)).css(color, blue);UL  LI  LI -> OK  LI -> O...
Seletores Filtros (3)               $(seletor:even), $(seletor:odd)           Seletores não previsto nas CSS$(tr:even).css...
Seletores Filtros (4)                  $(seletor:eq(índice))           Seletores não previsto nas CSS             Contagem...
Seletores Filtros (5)           $(seletor:gt(índice)), $(seletor:lt(índice))                Seletores não previsto nas CSS...
Seletores Filtros (6)                      $(:header)             Seletores não previsto nas CSS$(:header).css(color, blue...
Seletores de Conteúdo (1)             $(seletor:contains(texto))           Seletores não previsto nas CSS$(p:contains(test...
Seletores de Conteúdo (2)                    $(seletor:empty)                 Seletor previsto na CSS3$(td:empty).css(colo...
Seletores de Conteúdo (3)              $(seletor1:has(seletor2))             Seletor não previsto nas CSS$(p:has(b)).css(c...
Seletores de Conteúdo (3)                  $(seletor:parent)             Seletor não previsto nas CSS// Acessa elementos q...
Seletores de Atributo (1)                $(seletor[atributo])             Seletor previsto pela CSS3 // Acessa quem possui...
Seletores de Atributo (2)              $(seletor[atributo = "valor"])               Seletor previsto pela CSS3// Acessa qu...
Seletores de Atributo (3)             $(seletor[atributo != "valor"])               Seletor previsto pela CSS3// Acessa qu...
Seletores de Atributo (4)             $(seletor[atributo ^= "valor"])               Seletor previsto pela CSS3// Acessa qu...
Seletores de Atributo (5)             $(seletor[atributo $= "valor"])               Seletor previsto pela CSS3// Acessa qu...
Seletores de Atributo (6)             $(seletor[atributo *= "valor"])               Seletor previsto pela CSS3// Acessa qu...
Seletores de Atributo (7)             $(seletor[filtro-1][filtro-2]...[filtro-n])                  Seletor previsto pela C...
Filtro para seletores-filho (1)          $(seletor:first-child), $(seletor:last-child)                  Seletor previsto p...
Filtro para seletores-filho (2)                   $(seletor:only-child)                 Seletor previsto pela CSS3$(ol li:...
Filtro para seletores-filho (3)$(seletor:nth-child(índice/even/odd/equação))         Seletor previsto pela CSS3Ih, agora F...
$(function() {  $(button).click(function () {    $(li:nth-child(3n-2)).css(background, blue);    $(li:nth-child(3n-1) ).cs...
Manipulação de DOMPermite alterar propriedades dos elementosMaiores detalhes acesse:   http://www.livrojquery.com.br/downl...
Manipulação de atributos     $().attr(nome_atributo) - retorna valor de um atributovar classe = $(#teste).attr(class); $()...
Manipulando o atributo class      $().addClass(valor_classe) - adiciona uma classe $(p.testepeste).addClass(teste_classe);...
EventosPermitem interagir com o usuário.Exemplos de eventos:- blur- change- mouseover- mouseout- keypress- submit- etc...A...
//   head$(function() {    $(button).click(function () {        $(ul li:lt(5)).css(color, green);        $(ul li:gt(4)).cs...
EfeitosPermitem colocar efeito e animações nas páginas, comoocultar, controlando os seguintes aspectos:   Visibilidade   E...
PluginsPermitem adicionar novas funcionalidades ao jQueryComo adicionar um plugin???Para adicionar um plugin basta adicion...
Como usar um plugin?Acessem o site do plugin "corner": http://www.malsup.com/jquery/corner/
Referênciashttp://www.livrojquery.com.br/
ReferênciasPortuguês  http://www.livrojquery.com.br/  http://qfdb.net/workshop/jquery_workshop/Inglês  http://visualjquery...
Perguntas
Próximos SlideShares
Carregando em…5
×

jQuery Simplificando o JavaScript

3.163 visualizações

Publicada em

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

Publicada em: Tecnologia
1 comentário
3 gostaram
Estatísticas
Notas
  • 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
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
Sem downloads
Visualizações
Visualizações totais
3.163
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
117
Comentários
1
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

jQuery Simplificando o JavaScript

  1. 1. jQuerySimplificando o JavaScript Everaldo Wanderlei Uavniczak everaldouav@gmail.com
  2. 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. 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. 4. CaracterísticasLeve (56kb jquery-1.3.2.min.js)RápidoSimplesExtensível (plugin)Cross-browser
  5. 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. 6. Quem usa jQuery?Google SalesforceDell NewsgatorDigg The OnionMSNBC FeedburnerAmazon VodafoneIntel Linux.comBBC LogitechNewsweek MozillaAOL WordpressOracle DrupalCisco Systems TracTechnorati JoomlaSourceforge muitos outros...
  7. 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. 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. 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. 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. 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. 12. Construtor jQuery$()
  13. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 24. Seletores Filtros (2) $(seletor:not(seletor2))$(li:not(li:first)).css(color, blue);UL LI LI -> OK LI -> OK LI -> OK/UL
  25. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 42. Filtro para seletores-filho (3)$(seletor:nth-child(índice/even/odd/equação)) Seletor previsto pela CSS3Ih, agora F%#@#!!!!
  43. 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. 44. Manipulação de DOMPermite alterar propriedades dos elementosMaiores detalhes acesse: http://www.livrojquery.com.br/download.php http://localhost/work/jquery_workshop
  45. 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. 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. 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. 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. 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. 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. 51. Como usar um plugin?Acessem o site do plugin "corner": http://www.malsup.com/jquery/corner/
  52. 52. Referênciashttp://www.livrojquery.com.br/
  53. 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. 54. Perguntas

×