Desevolvimento Web Client-side - jQuery

1,311 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,311
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
32
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Desevolvimento Web Client-side - jQuery

  1. 1. Pacote Web Desenvolvendo com Padrões Web Módulo 3 - Introdução ao jQuery Guilherme Cavalcanti contato@guilhermecavalcanti.com @guiocavalcanti
  2. 2. O que é jQuery Definição oficial jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. Na verdade é apenas um conjunto de funções em JavaScript que facilitam as coisas para você
  3. 3. Ciclo de trabalho (lembra do CSS?) CSS jQuery Apontamos para um Apontamos para um elemento elemento Definimos propriedades Definimos 1. Ações, 2. Propriedades, 3. Animações 4. Ajax...
  4. 4. Começando 1. Baixar .js em http://jquery.com/ 2. Criar um documento HTML e incluir o .js 3. Usar seletores e funções
  5. 5. Objeto jQuery Objeto que contém as funções do jQuery Pode ser instanciado pelo nome jquery Ou pelo "apelido" $ MUITAS funções
  6. 6. Seletores Iguais ao do CSS E mais alguns Filhos imediatos Algum atributo Ímpares/Pares
  7. 7. Exercitando seletores 1 Deixar somente elementos pares azul
  8. 8. Exercitando seletores 3 Deixar somente os input do tipo text do form de cadastro com o fundo azul
  9. 9. Funções úteis $.val() Set e get do valor do atributo value= Usado em inputs $.html() Set e get do conteúdo HTML de uma tag $.remove() Apaga o elemento $.hide() Esconde o elemento $.show() Mostra o elemento $.toggle() Alterna entre mostrar e esconder o elemento
  10. 10. Eventos Click
  11. 11. Eventos toggle
  12. 12. Modificando CSS
  13. 13. Modificando conteúdo (texto, HTML)
  14. 14. Modificando atributos e seus valores
  15. 15. Efeitos Hide e show (slow, fast...) FadeOut, FadeIn
  16. 16. Efeitos - callback É possível chamar uma função depois que o efeito acontece
  17. 17. Animações
  18. 18. Formulários Evento submit
  19. 19. Plugins interessantes Menu http://users.tpg.com.au/j_birch/plugins/superfish/ Abas, accordion e outros widgets http://jqueryui.com/home

×