Lenon Fachiano Silva
Lenon Fachiano Silva
Estudante de Ciência da Computação
FCT/UNESP
Introdução

O que é
Introdução

http://vidadeprogramador.com.br/2012/06/20/usando-jquery/
Introdução
jQuery é uma bilbioteca JavaScript
escrita por John Resig e disponibilizado
como software livre (MIT / GPL).
Su...
Introdução
Introdução
JavaScript X jQuery
Introdução

Para que serve?
Introdução

• Adicionar efeitos visuais
• Acessar e manipular o DOM
• Buscar informações no servidor
sem necessidade de re...
Introdução
Olá Mundo

No .html
• Baixar biblioteca e copiar para o servidor

• Nosso Script
Olá Mundo

No .html (alternativamente)
• Utilizar um link externo

• Nosso Script
Olá Mundo

No .js

ô

ã
Olá Mundo

No .js (alternativamente)

ô

ã
Construtor
Seletores
Seletores
Basicamente, quaisquer seletores CSS
servem para o jQuery.

Aqui serão apresentados alguns destes
seletores
Seletores

Simples
Elemento html.
Identificador
Classe CSS
Seletores

Compostos

Combinação de Seletores
Simples
Seletores

Compostos
Ancestral - Descendente
Elemento - filho
Anterior - Próximo
Anterior - Irmãos
Seletores

Filtros

Filtra condição
particular de um seletor
simples ou composto
Seletores

Filtros
Primeiro
Último
Todos exceto
Seletores

Filtros
Índice
Pares
Ímpares
Seletores

Filtros
Índice Superior a
Índice Inferior a
Seletores

Atributo

Seleciona de acordo com
alguma característica
específica de um
atributo
Seletores

Atributo
Atributo igual a
Atributo diferente de
Atributo com valor
iniciado por
Seletores

Atributo
Atributo termina com
Atributo possui no
nome
Seletores

Conteúdo

Seleciona de acordo com
o conteúdo do elemento
Seletores

Conteúdo
Elemento que
possui determinado
texto

Elemento que
possui outro
especificado
Seletores

Conteúdo
Elemento que
estejam vazios
Elemento que
possuam
elementos filhos
Seletores

Formulário

Seleciona elementos de
formulário
Seletores

Formulário
Eventos
Eventos

Uma ação do usuário
“dispara” o script

TRIGGERS
Eventos

Mouse
Evento de click

Evento de duplo-click
Eventos

Mouse
Cursor entra em um elemento

Cursor deixa um elemento
Eventos

Mouse
Botão do mouse é pressionado

Botão do mouse é liberado sobre o elemento
Eventos

Teclado
Eventos

Alguns Outros
Eventos
Métodos

Estilização
Métodos

Manipulação
Métodos

Manipulação
Métodos

Manipulação
Métodos

Adicionar/Remover elementos
Métodos
Efeitos

Ocultar/Exibir
Efeitos

Fade
Efeitos

Slide
Efeitos

Animate
Requisição Servidor

Ajax
O que é
Como utilizar
• Folha de estilos do jQuery

• jQuery

• jQuery UI
Draggable

Torna um elemento arrastável
Sortable

Reorganiza os elementos de um grupo
Resizable

Permite alterar a dimensão de um elemento
Accordion

Estilo “Sanfona”
Dialog

Janela de diálogo
Datepicker

Calendário
Autocomplete

Sugere palavras de acordo com o que está
sendo digitado
Referências

Silva, Maurício Samy
jQuery: a biblioteca do programador JavaScript /
Maurício Samy Silva – São Paulo: Novate...
Referências

jquery.com
jqueryui.com

w3schools
Introdução às Bibliotecas jQuery/ jQuery UI
Próximos SlideShares
Carregando em…5
×

Introdução às Bibliotecas jQuery/ jQuery UI

869 visualizações

Publicada em

Slides guia apresentados durante o minicurso de jQuery/jQuery UI ministrado na secompp 2013 - FCT/UNESP - Presidente Prudente

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

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

Nenhuma nota no slide

Introdução às Bibliotecas jQuery/ jQuery UI

  1. 1. Lenon Fachiano Silva
  2. 2. Lenon Fachiano Silva Estudante de Ciência da Computação FCT/UNESP
  3. 3. Introdução O que é
  4. 4. Introdução http://vidadeprogramador.com.br/2012/06/20/usando-jquery/
  5. 5. Introdução jQuery é uma bilbioteca JavaScript escrita por John Resig e disponibilizado como software livre (MIT / GPL). Surgiu graças a insatisfação do autor à cansativa maneira necessária para se escrever códigos JavaScript. Utiliza seletores CSS para identificar diretamente os elementos do DOM.
  6. 6. Introdução
  7. 7. Introdução JavaScript X jQuery
  8. 8. Introdução Para que serve?
  9. 9. Introdução • Adicionar efeitos visuais • Acessar e manipular o DOM • Buscar informações no servidor sem necessidade de recarregar a página • Alterar conteúdos • Simplificar tarefas específicas de JavaScript
  10. 10. Introdução
  11. 11. Olá Mundo No .html • Baixar biblioteca e copiar para o servidor • Nosso Script
  12. 12. Olá Mundo No .html (alternativamente) • Utilizar um link externo • Nosso Script
  13. 13. Olá Mundo No .js ô ã
  14. 14. Olá Mundo No .js (alternativamente) ô ã
  15. 15. Construtor
  16. 16. Seletores
  17. 17. Seletores Basicamente, quaisquer seletores CSS servem para o jQuery. Aqui serão apresentados alguns destes seletores
  18. 18. Seletores Simples Elemento html. Identificador Classe CSS
  19. 19. Seletores Compostos Combinação de Seletores Simples
  20. 20. Seletores Compostos Ancestral - Descendente Elemento - filho Anterior - Próximo Anterior - Irmãos
  21. 21. Seletores Filtros Filtra condição particular de um seletor simples ou composto
  22. 22. Seletores Filtros Primeiro Último Todos exceto
  23. 23. Seletores Filtros Índice Pares Ímpares
  24. 24. Seletores Filtros Índice Superior a Índice Inferior a
  25. 25. Seletores Atributo Seleciona de acordo com alguma característica específica de um atributo
  26. 26. Seletores Atributo Atributo igual a Atributo diferente de Atributo com valor iniciado por
  27. 27. Seletores Atributo Atributo termina com Atributo possui no nome
  28. 28. Seletores Conteúdo Seleciona de acordo com o conteúdo do elemento
  29. 29. Seletores Conteúdo Elemento que possui determinado texto Elemento que possui outro especificado
  30. 30. Seletores Conteúdo Elemento que estejam vazios Elemento que possuam elementos filhos
  31. 31. Seletores Formulário Seleciona elementos de formulário
  32. 32. Seletores Formulário
  33. 33. Eventos
  34. 34. Eventos Uma ação do usuário “dispara” o script TRIGGERS
  35. 35. Eventos Mouse Evento de click Evento de duplo-click
  36. 36. Eventos Mouse Cursor entra em um elemento Cursor deixa um elemento
  37. 37. Eventos Mouse Botão do mouse é pressionado Botão do mouse é liberado sobre o elemento
  38. 38. Eventos Teclado
  39. 39. Eventos Alguns Outros
  40. 40. Eventos
  41. 41. Métodos Estilização
  42. 42. Métodos Manipulação
  43. 43. Métodos Manipulação
  44. 44. Métodos Manipulação
  45. 45. Métodos Adicionar/Remover elementos
  46. 46. Métodos
  47. 47. Efeitos Ocultar/Exibir
  48. 48. Efeitos Fade
  49. 49. Efeitos Slide
  50. 50. Efeitos Animate
  51. 51. Requisição Servidor Ajax
  52. 52. O que é
  53. 53. Como utilizar • Folha de estilos do jQuery • jQuery • jQuery UI
  54. 54. Draggable Torna um elemento arrastável
  55. 55. Sortable Reorganiza os elementos de um grupo
  56. 56. Resizable Permite alterar a dimensão de um elemento
  57. 57. Accordion Estilo “Sanfona”
  58. 58. Dialog Janela de diálogo
  59. 59. Datepicker Calendário
  60. 60. Autocomplete Sugere palavras de acordo com o que está sendo digitado
  61. 61. Referências Silva, Maurício Samy jQuery: a biblioteca do programador JavaScript / Maurício Samy Silva – São Paulo: Novatec Editora, 2008 ISBN: 978-85-7522-178-5
  62. 62. Referências jquery.com jqueryui.com w3schools

×