Your SlideShare is downloading. ×

Minicurso jQuery

267

Published on

Minicurso de jQuery oferecido aos alunos da FATEC.

Minicurso de jQuery oferecido aos alunos da FATEC.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
267
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
25
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. Minicurso jQuery Instrutor: Wilker Iceri
  • 2. O que é jQuery? • É uma biblioteca JavaScript, que tem a seguinte filosofia: “Write less, do more”. • jQuery simplifica muitas tarefas comuns como: • Manipulação do DOM • Manipulação CSS • Eventos • Efeitos e animações • Ajax • e muito mais... • É cross-browser, funciona igual em todos os navegadores (até no IE 6 o.O). • É muito utilizado pelos desenvolvedores, e por muitas empresas de nome como: • Google • Microsoft • IBM • Wikipédia
  • 3. Instalação • Existem duas foram de incluir a biblioteca jQuery no seu projeto: • Baixar do próprio site da jQuery: http://jquery.com/ • Usar um repositório online como o da Google. Acessar o exemplo
  • 4. Sintaxe • Com jQuery você seleciona um elemento HTML e algumas ações nesses elementos. • Sintaxe: $(seletor).action(); • $ - define o acesso ao jQuery. • seletor – seletor utilizado para encontrar os elementos HTML (o jQuery usa os seletores CSS) • action – método do elemento. Acessar o exemplo
  • 5. Sintaxe Acessar o exemplo
  • 6. Eventos • A jQuery pode responder a vários tipos de eventos, como focus, blur, mouseenter, mouseleave, etc. Acessar o exemplo
  • 7. Manipulação do DOM • Com jQuery podemos manipular os elementos HTML muito facilmente. • Principais métodos: • text() – Define ou retorna o conteúdo do elemento. • html() – Define ou retorna o conteúdo do elemento (incluindo a marcação HTML). • val() – Define ou retorna o valor de campos de formulário. • attr() – Define ou retorna valores para atributos HTML. Acessar o exemplo
  • 8. Manipulação do DOM Acessar o exemplo
  • 9. Manipulação de Classes • Métodos para manipulação de classes: • addClass() – adiciona uma ou mais classes ao elemento selecionado. • removeClass() – remove uma ou mais classes do elemento selecionado. • toggleClass() – Alterna entre add/remove. Acessar o exemplo
  • 10. Manipulação de Classes Acessar o exemplo
  • 11. Manipulação do CSS • Com o método css() é possível adicionar um ou mais estilos a um elemento. Acessar o exemplo
  • 12. Manipulação do CSS Acessar o exemplo
  • 13. Métodos de navegação no DOM • A biblioteca jQuery disponibiliza métodos para você poder buscar elementos pai, filhos, irmãos, etc. • Alguns deles: • closest() – retorna o primeiro elemento pai encontrado. • find() – retorna todos os elementos filhos encontrados. Acessar o exemplo
  • 14. jQuery Plugins • Está tentando construir algo com jQuery que requer funcionalidades que não existem na biblioteca?. • Hoje em dia existem milhares de plugins que você pode adicionar facilmente na sua aplicação. • Exemplos de Plugins: Slider de imagens, menu dropdown, mascaras, validações, autocompletes, etc. • Tente pesquisar no google por: jquery plugins.
  • 15. jQuery Mask Plugin • Site do plugin: http://igorescobar.github.io/jQuery-Mask-Plugin/. Acessar o exemplo
  • 16. Criação de Plugin • Não achou o plugin que você queria? Que tal fazer um? Acessar o exemplo
  • 17. Criação de Plugin Acessar o exemplo
  • 18. FIM...

×