jQuery
Simplificando o JavaScript

Everaldo Wanderlei Uavniczak
everaldouav@gmail.com
Sobre a apresentação
Nível:
- Iniciante
Indicada para:
- "Profissionais Web" (WebMaster, WebDesigners, WebDevelopers)
- Pr...
WTF is jQuery?
jQuery é um framework para ajudar os desenvolvedores a se
concentrarem na lógica dos sistemas da web e não ...
Características
Leve (56kb jquery-1.3.2.min.js)

Rápido

Simples

Extensí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.
Safari...
Quem usa jQuery?
Google
Dell
Digg
MSNBC
Amazon
Intel
BBC
Newsweek
AOL
Oracle
Cisco Systems
Technorati
Sourceforge

Salesfo...
Pra que serve?
Adicionar efeitos visuais e animação;
Acessar e Manipular o DOM (Document Object Model)
AJAX;
Prover intera...
O que jQuery permite
Utiliza seletores CSS para localizar elementos na estrutura
da marcação HTML na página;
Realizar inte...
Obstrusivo X Não Obstrusivo
// OBSTRUSIVO:
<p onclick="alert('teste');">bla bla bla</p>

// NÃO OBSTRUSIVO:
// jquery
$('p...
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 abaixo
1) HTML (somente HTML)
http://qfdb.net/worksh...
Construtor jQuery

$()
Funcionamento do jQuery
Encontre algo e faça alguma coisa
$('p').css('color', 'blue');
$('#teste').addClass('classe_para_t...
O método ready()
Executa um código quando a página for carregada
Com JavaScript
window.onload = function () { ... }
Com jQ...
Seletores jQuery

$(expressão [, contexto])
Sem especificar o contexto
$('div').css('color', 'blue');
$('div', $(document)...
Tipos de Seletores
Compreenda eles e compreenderá jQuery
Seletores Gerais
Seletores Simples
Seletores Compostos
Seletores ...
Seletores gerais
$(html) ou $(text)
Adicionam conteúdo HTML ou Texto na página
// adiciona conteúdo HTML no documento,
// ...
Seletores Simples
Acessam elementos, classes, identificadores ou todos
eles combinados
Elementos
$('p').css('color', 'blue...
Seletores Compostos (1)
$(ancestral descendente)
// acessa o elemento B que tenha como
//ancestral um elemento DIV
$('div ...
Seletores Compostos (2)
$(pai > filho)
// Acessa todos elementos P que tenham
// um elemento DIV como pai
$('div > p').css...
Seletores Compostos (3)
$(anterior + posterior)

// Acessa o elemento P que segue
// o elemento DIV
$('div + p').css('colo...
Seletores Compostos (4)
$(anterior ~ irmãos)
// Acessa todos P que são irmãos
// e descendentes de H1
$('h1 ~ p').css('col...
Seletores Filtros (1)
$(seletor:first), $(seletor:last)
$('li:first').css('color', 'blue');
$('li:last').css('color', 'blu...
Seletores Filtros (2)
$(seletor:not(seletor2))
$('li:not(li:first)').css('color', 'blue');

UL
LI
LI -> OK
LI -> OK
LI -> ...
Seletores Filtros (3)
$(seletor:even), $(seletor:odd)
Seletores não previsto nas CSS
$('tr:even').css('color', 'blue');
$(...
Seletores Filtros (4)
$(seletor:eq(índice))
Seletores não previsto nas CSS
Contagem inicia em 0 (zero)
$('li:eq(1)').css('...
Seletores Filtros (5)
$(seletor:gt(índice)), $(seletor:lt(índice))
Seletores não previsto nas CSS
Contagem inicia em 0 (ze...
Seletores Filtros (6)
$(:header)
Seletores não previsto nas CSS
$(':header').css('color', 'blue');

H1
H2
H3
H2
H2
H3
H4

...
Seletores de Conteúdo (1)
$(seletor:contains(texto))
Seletores não previsto nas CSS
$('p:contains(teste)').css('color', 'b...
Seletores de Conteúdo (2)
$(seletor:empty)
Seletor previsto na CSS3
$('td:empty').css('color', 'blue');
TABLE
TR
TD
TD
TD
...
Seletores de Conteúdo (3)
$(seletor1:has(seletor2))
Seletor não previsto nas CSS

$('p:has(b)').css('color', 'blue');

P
P...
Seletores de Conteúdo (3)
$(seletor:parent)
Seletor não previsto nas CSS
// Acessa elementos que tenham
// elementos-filho...
Seletores de Atributo (1)
$(seletor[atributo])
Seletor previsto pela CSS3
// Acessa quem possui um atributo não vazio
$('p...
Seletores de Atributo (2)
$(seletor[atributo = "valor"])
Seletor previsto pela CSS3
// Acessa quem possui atributo = valor...
Seletores de Atributo (3)
$(seletor[atributo != "valor"])
Seletor previsto pela CSS3
// Acessa quem tem atributo com o val...
Seletores de Atributo (4)
$(seletor[atributo ^= "valor"])
Seletor previsto pela CSS3
// Acessa quem tem atributo com o val...
Seletores de Atributo (5)
$(seletor[atributo $= "valor"])
Seletor previsto pela CSS3
// Acessa quem tem atributo com o val...
Seletores de Atributo (6)
$(seletor[atributo *= "valor"])
Seletor previsto pela CSS3
// Acessa quem tem atributo com o val...
Seletores de Atributo (7)
$(seletor[filtro-1][filtro-2]...[filtro-n])
Seletor previsto pela CSS3
// Acessa quem contempla ...
Filtro para seletores-filho (1)
$(seletor:first-child), $(seletor:last-child)
Seletor previsto pela CSS3

$('ol li:first-c...
Filtro para seletores-filho (2)
$(seletor:only-child)
Seletor previsto pela CSS3
$('ol li:only-child').css('color', 'blue'...
Filtro para seletores-filho (3)
$(seletor:nth-child(índice/even/odd/equação))
Seletor previsto pela CSS3

Ih, agora F%#@#!...
$(function() {
$('button').click(function () {
$('li:nth-child(3n-2)').css('background', 'blue');
$('li:nth-child(3n-1)' )...
Manipulação de DOM
Permite alterar propriedades dos elementos

Maiores detalhes acesse:
http://www.livrojquery.com.br/down...
Manipulação de atributos
$().attr(nome_atributo) - retorna valor de um atributo
var classe = $('#teste').attr('class');
$(...
Manipulando o atributo class
$().addClass('valor_classe') - adiciona uma classe
$('p.testepeste').addClass('teste_classe')...
Eventos
Permitem interagir com o usuário.
Exemplos de eventos:
- blur
- change
- mouseover
- mouseout
- keypress
- submit
...
//

head

$(function() {
$('button').click(function () {
$('ul li:lt(5)').css('color', 'green');
$('ul li:gt(4)').css('col...
Efeitos
Permitem colocar efeito e animações nas páginas, como
ocultar, controlando os seguintes aspectos:
Visibilidade
Efe...
Plugins
Permitem adicionar novas funcionalidades ao jQuery
Como adicionar um plugin???
Para adicionar um plugin basta adic...
Como usar um plugin?

Acessem o site do plugin "corner": http://www.malsup.com/jquery/corner/
Referências

http://www.livrojquery.com.br/
Referências
Português
http://www.livrojquery.com.br/
http://qfdb.net/workshop/jquery_workshop/

Inglês
http://visualjquery...
Perguntas
Próximos SlideShares
Carregando em…5
×

Simplificando o Javascrip

300 visualizações

Publicada em

Simplificando o Javascrip

Publicada em: Educação
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
300
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
6
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Simplificando o Javascrip

  1. 1. jQuery Simplificando o JavaScript Everaldo Wanderlei Uavniczak everaldouav@gmail.com
  2. 2. Sobre a apresentação Nível: - Iniciante Indicada para: - "Profissionais Web" (WebMaster, WebDesigners, WebDevelopers) - Programadores - Profissionais de Marketing Digital Pré-requisitos: - Nenhum, embora HTML, JavaScript e CSS ajudam Objetivo: Habilitar a quem nunca tenha programado em JavaScript o uso de jQuery nos seus projetos [de aplicação] Web
  3. 3. WTF is jQuery? jQuery é um framework para ajudar os desenvolvedores a se concentrarem na lógica dos sistemas da web e não nos problemas de incompatibilidade dos navegadores atuais. Seu lema é escrever menos e fazer mais "O foco principal da biblioteca jQuery é a simplicidade. Por que submeter os desenvolvedores ao martírio de escrever longos e complexos códigos para criar simples efeitos?" (John Resig - criador do jQuery)
  4. 4. Características Leve (56kb jquery-1.3.2.min.js) Rápido Simples Extensí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 Dell Digg MSNBC Amazon Intel BBC Newsweek AOL Oracle Cisco Systems Technorati Sourceforge Salesforce Newsgator The Onion Feedburner Vodafone Linux.com Logitech Mozilla Wordpress Drupal Trac Joomla 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 permite Utiliza seletores CSS para localizar elementos na estrutura da marcação HTML na página; Realizar interação implícita (permite percorrer a estrutura dos elementos sem usar loop); Utilizar programação encadeada (cada método retorna um objeto); 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 abaixo 1) HTML (somente HTML) http://qfdb.net/workshop/jquery_workshop/cap_2/qfdb/index_nocss_nojquery.html 2) HTML + CSS http://qfdb.net/workshop/jquery_workshop/cap_2/qfdb/index_css_nojquery.html 3) HTML + CSS + jQuery http://qfdb.net/workshop/jquery_workshop/cap_2/qfdb/index_css_jquery.html 4) HTML + CSS + jQuery + Firulas + Perfumarias + Etc http://qfdb.net/workshop/jquery_workshop/cap_2/qfdb/index_css_jquery_firulas.html Vejam 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'); ou jQuery('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 JavaScript window.onload = function () { ... } Com jQuery Modo 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 Seletores Compreenda eles e compreenderá jQuery Seletores Gerais Seletores Simples Seletores Compostos Seletores Filtros Seletores de Conteúdo Seletores de Atributo Filtro para Seletores-Filho Seletores 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 DIV P P H2 /DIV -> OK -> OK -> OK
  21. 21. Seletores Compostos (3) $(anterior + posterior) // Acessa o elemento P que segue // o elemento DIV $('div + p').css('color', 'blue'); DIV P P P P /DIV -> OK
  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'); P H1 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 TR TR TR TR /TABLE -> -> -> -> -> OK OK OK OK OK even odd even odd even
  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 LI LI /UL // elemento de índice 1
  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 LI LI LI LI /UL -> OK lt -> OK lt -> OK gt -> OK gt
  28. 28. Seletores Filtros (6) $(:header) Seletores não previsto nas CSS $(':header').css('color', 'blue'); H1 H2 H3 H2 H2 H3 H4 -> -> -> -> -> -> -> OK OK OK OK OK OK 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) /P DIV (conteúdo de teste) /DIV P (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 TD TD TD TD /TR /TABLE () (conteúdo da célula) (outro conteúdo) () (mais conteúdo) -> OK -> OK
  31. 31. Seletores de Conteúdo (3) $(seletor1:has(seletor2)) Seletor não previsto nas CSS $('p:has(b)').css('color', 'blue'); P P p P B /B /P /P I /I B /B /P I U /U /I /P -> OK -> OK
  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 P (teste) /P /P /P -> OK -> 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'); P DIV P title='x' -> OK P title='x' class='x' -> OK P P 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 P P P lang="pt" lang="pt-BR" lang="en" -> OK 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 P P P P lang="pt" lang="pt-BR" lang="en" lang="pt" -> OK // lang="" (vazio) -> OK -> OK -> 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'); P P P P P P lang="pt" lang="en" lang="pt" lang="pt-br" lang="pl" -> OK -> OK -> OK
  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'); P P P P P P lang="pt" lang="en" lang="pt" lang="pt-br" lang="xyzt" -> OK -> OK -> 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 P P P title="teste peste" -> OK title="o teste" -> OK title="o teste bla " -> OK 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" P id class="teste" lang="pt" P -> OK -> OK
  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 LI LI LI -> OK /OL first-child last-child
  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 /OL OL LI -> OK /OL
  42. 42. Filtro para seletores-filho (3) $(seletor:nth-child(índice/even/odd/equação)) Seletor previsto pela CSS3 Ih, 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 DOM Permite alterar propriedades dos elementos Maiores 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 atributo var 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. Eventos Permitem 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. Efeitos Permitem colocar efeito e animações nas páginas, como ocultar, controlando os seguintes aspectos: Visibilidade Efeito de Opacidade Efeito Corrediço Etc... Acessem: http://www.livrojquery.com.br/cap_06/arquivo-6.2a.html http://www.livrojquery.com.br/cap_06/arquivo-6.4a.html http://qfdb.net/workshop/jquery_workshop/cap_6/efeitos.html
  50. 50. Plugins Permitem adicionar novas funcionalidades ao jQuery Como adicionar um plugin??? Para adicionar um plugin basta adicionar o arquivo após o arquivo 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ências http://www.livrojquery.com.br/
  53. 53. Referências Portuguê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

×