Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Pacote Web
Desenvolvendo com Padrões Web
  Módulo 3 - Introdução ao jQuery




                     Guilherme Cavalcanti
 ...
O que é jQuery

 Definição oficial
    jQuery is a fast and concise JavaScript Library that
    simplifies HTML document t...
Ciclo de trabalho (lembra do CSS?)

  CSS                   jQuery
    Apontamos para um      Apontamos para um
    elemen...
Começando

1. Baixar .js em http://jquery.com/
2. Criar um documento HTML e incluir o .js
3. Usar seletores e funções
Objeto jQuery

 Objeto que contém as funções do jQuery
    Pode ser instanciado pelo nome jquery


 Ou pelo "apelido" $


...
Seletores

 Iguais ao do CSS


 E mais alguns
    Filhos imediatos


    Algum atributo


    Ímpares/Pares
Exercitando seletores 1

  Deixar somente elementos pares azul
Exercitando seletores 3

  Deixar somente os input do tipo text do form de
  cadastro com o fundo azul
Funções úteis

 $.val()
     Set e get do valor do atributo value=
     Usado em inputs
 $.html()
     Set e get do conteú...
Eventos

 Click
Eventos

 toggle
Modificando CSS
Modificando conteúdo (texto, HTML)
Modificando atributos e seus valores
Efeitos

  Hide e show (slow, fast...)




  FadeOut, FadeIn
Efeitos - callback

  É possível chamar uma função depois que o efeito
  acontece
Animações
Formulários

 Evento submit
Plugins interessantes

  Menu
    http://users.tpg.com.au/j_birch/plugins/superfish/
  Abas, accordion e outros widgets
  ...
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Introdução a plataforma de aplicativos Redu
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Desevolvimento Web Client-side - jQuery

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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

Views

Total views

1,349

On Slideshare

0

From embeds

0

Number of embeds

2

Actions

Downloads

32

Shares

0

Comments

0

Likes

0

×