Minicurso jQuery

291

Published on

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
291
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Minicurso jQuery

  1. 1. Minicurso jQuery Instrutor: Wilker Iceri
  2. 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. 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. 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. 5. Sintaxe Acessar o exemplo
  6. 6. Eventos • A jQuery pode responder a vários tipos de eventos, como focus, blur, mouseenter, mouseleave, etc. Acessar o exemplo
  7. 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. 8. Manipulação do DOM Acessar o exemplo
  9. 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. 10. Manipulação de Classes Acessar o exemplo
  11. 11. Manipulação do CSS • Com o método css() é possível adicionar um ou mais estilos a um elemento. Acessar o exemplo
  12. 12. Manipulação do CSS Acessar o exemplo
  13. 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. 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. 15. jQuery Mask Plugin • Site do plugin: http://igorescobar.github.io/jQuery-Mask-Plugin/. Acessar o exemplo
  16. 16. Criação de Plugin • Não achou o plugin que você queria? Que tal fazer um? Acessar o exemplo
  17. 17. Criação de Plugin Acessar o exemplo
  18. 18. FIM...
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×