SlideShare uma empresa Scribd logo
Iniciando com Jquery
Quem é esse cara? 
 Formado em Tecnologia de Sistemas pra Internet. 
 Programa desde os 13 anos. 
 Programador back-end. 
 Já trabalhou em empresas, órgãos governamentais 
e startups como: INCRA, 3Up Tecnologia, Onsee 
Digital Signage. 
 Atualmente é CEO/Founder da Stoodos.
O que vamos ver? 
 O que é jQuery? 
 Porque usá-lo 
 Para que usá-lo? 
 Como usa-lo? 
 Seletores. 
 jQuery e o CSS. 
 Efeitos em jQuery. 
 Ajax com jQuery. 
Bônus: 
 Principais plugins do jQuery.
O que é jQuery? 
 Criada por John Resig. 
 Biblioteca JavaScript. 
 Uma forma simples de escrever códigos 
JavaScript. 
 Free – MIT e GPL 
 Conformidade com os padrões web. 
 www.jquery.com
Por que usá-lo? 
 JavaScript: 
 jQuery
Para que usá-lo 
 Adicionar efeitos visuais e animações. 
 Acessar e manipular o HTML. 
 Implementar códigos Ajax. 
 Prover interatividade. 
 Alterar conteúdos. 
 Compatibilidade com navegadores. 
 Simplificar tarefas JavaScript.
Como usá-lo? 
 Baixar o jQuery em www.jquery.com 
 Incluir o arquivo .js em seu projeto. 
 Chamar o jQuery no cabeçalho do HTML 
Ex.: 
 Programar em Jquery.
Alguns adendos 
 Construtor $() ou jQuery(). 
 Encadeamento: 
Ex.:
Seletores 
 Seletores CSS 1-3 funcionam em jQuery. 
 O jQuery possui alguns seletores próprios. 
 http://api.jquery.com/category/selectors/ 
Ex. de seletores CSS: 
Ex. de seletores próprios:
Eventos 
 Mesmos do JavaScript. 
 blur(), change(), click(), dbclick(), focus(), 
hover(), keydown(), keypress(), keyup(), load(), 
select(), submit() … 
 http://api.jquery.com/category/events/ 
Ex.:
jQuery e o CSS. 
 Muito simples manipular CSS por jQuery. 
Ex.:
Efeitos em jQuery. 
 Métodos que possibilitam a criação de efeitos 
customizados. 
 Métodos com efeitos nativos.
Efeitos em jQuery. 
 animate() - Criar animações personalizadas. 
Ex.:
Efeitos em jQuery. 
 delay() - Seta um tempo de espera entre 
execuções. 
Ex.: 
 fadeIn(), fadeOut(), fadeToggle() – Aparecer e 
desaparecer. 
Ex.:
Efeitos em jQuery. 
 hide(), show(), toggle() 
Ex.: 
 slideDown(), slideUp(), slideToggle() 
Ex.:
Ajax com jQuery. 
 Muito, muito, mas muito mais simples mesmo 
que JavaScript puro. 
 Muito mais organizado que em JavaScript puro.
Ajax com jQuery. 
 load() – Lê dados servidor e os carrega no 
elemento HTML selecionado. 
Ex.: 
 ajax() – Realiza requisições ajax. 
Ex.:
Plugins do jQuery – O que são? 
 Códigos jQuery para ajudar o desenvolvedor a 
fazer algo (validar formulários, upload de 
arquivos..). 
 Vantagem de ter muita coisa boa já 
implementada. 
 Encurta o tempo de desenvolvimento.
Como usar um plugin? 
 Download dos arquivos do plugin (imagens, .js, 
.css, .swf...) 
 Chamar os arquivos necessários na página (.js, 
.css …) 
 Utilizar o plugin.
Bons plugins jQuery 
 Validate – Validar formulários 
 Fancybox – Lightbox genérico 
 jQuery UI – Interações com o usuário 
 MeioMask – Máscaras (CPF, Telefone ...)
Contatos 
 @tiagobutzke 
 tiago@stoodos.com

Mais conteúdo relacionado

PPT
Iniciando com jQuery
PPTX
PPTX
PPTX
VueJS - Uma alternativa elegante
PDF
ODIG - Javascript, DOM Elements e jQuery
PDF
Introdução ao JQuery e AJAX
PDF
jQuery
PDF
Hello vue
Iniciando com jQuery
VueJS - Uma alternativa elegante
ODIG - Javascript, DOM Elements e jQuery
Introdução ao JQuery e AJAX
jQuery
Hello vue

Mais procurados (12)

PDF
A vida além do jQuery
PDF
script.aculo.us
PPTX
Mvc pattern
PDF
Web 3.0
KEY
Javascript + jQuery
PDF
Backbone.js + Rails - Front-end e back-end conectados
PPTX
JavaScript - #Aula03 parte 04 - Bichinho Virtual - Evento Onclick, Prompt, fu...
PDF
O processo de criação de um web site | By Alessandra Soares
PPS
Descomplicando o JQuery - Introdução ao Framework
PDF
JavaScript Model-View no Frontend
PPTX
AngularJS sem medo
A vida além do jQuery
script.aculo.us
Mvc pattern
Web 3.0
Javascript + jQuery
Backbone.js + Rails - Front-end e back-end conectados
JavaScript - #Aula03 parte 04 - Bichinho Virtual - Evento Onclick, Prompt, fu...
O processo de criação de um web site | By Alessandra Soares
Descomplicando o JQuery - Introdução ao Framework
JavaScript Model-View no Frontend
AngularJS sem medo
Anúncio

Destaque (8)

PDF
A vocação do evangelho (anthony andrew hoekema)
ODP
Megha Jt2011
PPTX
Consultorios de salud
PPTX
Jornada Cámara de Valencia _ Parte 2 _ Abaleo
PPT
Cerrando la brecha digital en uruguay luis yarzabal
PPTX
Medios de comunicacion
PPTX
ALM Practices - Reestabelecendo o nível de serviço e construindo um Programa ...
PPTX
Sabías..
A vocação do evangelho (anthony andrew hoekema)
Megha Jt2011
Consultorios de salud
Jornada Cámara de Valencia _ Parte 2 _ Abaleo
Cerrando la brecha digital en uruguay luis yarzabal
Medios de comunicacion
ALM Practices - Reestabelecendo o nível de serviço e construindo um Programa ...
Sabías..
Anúncio

Semelhante a Iniciando com Jquery (20)

PPTX
jQuery básico (parte 2)
PPTX
FEMUG MGA #6 - Abandonando o jQuery
PDF
Introdução jQuery UI
PDF
Desenvolvendo com Dojo Toolkit
PDF
Jquery - Apresentação e aplicação prática
ODP
Jquery - Apresentação e aplicação prática
PDF
Desevolvimento Web Client-side - jQuery
ODP
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
PDF
Desenvolvimento Front end (AngularJS e Bootstrap)
PDF
Palestra - Iniciando no Jquery
PPTX
Introdução a: Frameworks front end web
PPTX
LambdaDay: Backbone.js
PDF
jQuery
PPT
Desenvolvimento Do jQuery Light Box Plugin ao vivo
PDF
2° Codelab - Por onde começar com AngularJS
PDF
Java script aula 07 - j-query
PPTX
Apresentação JQuery
PPT
Agilizando o desenvolvimento com j query
PPT
Agilizando o desenvolvimento com jquery
PPT
Agilizando o desenvolvimento com j query
jQuery básico (parte 2)
FEMUG MGA #6 - Abandonando o jQuery
Introdução jQuery UI
Desenvolvendo com Dojo Toolkit
Jquery - Apresentação e aplicação prática
Jquery - Apresentação e aplicação prática
Desevolvimento Web Client-side - jQuery
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Desenvolvimento Front end (AngularJS e Bootstrap)
Palestra - Iniciando no Jquery
Introdução a: Frameworks front end web
LambdaDay: Backbone.js
jQuery
Desenvolvimento Do jQuery Light Box Plugin ao vivo
2° Codelab - Por onde começar com AngularJS
Java script aula 07 - j-query
Apresentação JQuery
Agilizando o desenvolvimento com j query
Agilizando o desenvolvimento com jquery
Agilizando o desenvolvimento com j query

Mais de Danilo Sousa (11)

PDF
Sass - Tutorial
PPT
Templates js-
PPT
jquery examples
PDF
VISUAL CHEAT SHEET
PPTX
Iniciando com jquery
PDF
JQUERY CONF 2011Gwt kenjiyamamoto-111220113950-phpapp01
PDF
Campus Party 2011 html 5
PDF
Ninja html 5 css javascript
PPT
Alta produtividade com front end com sass e compass
PPTX
CSS 3 Overview
PDF
Ux para agencias de publicidade
Sass - Tutorial
Templates js-
jquery examples
VISUAL CHEAT SHEET
Iniciando com jquery
JQUERY CONF 2011Gwt kenjiyamamoto-111220113950-phpapp01
Campus Party 2011 html 5
Ninja html 5 css javascript
Alta produtividade com front end com sass e compass
CSS 3 Overview
Ux para agencias de publicidade

Último (11)

PPTX
Proposta de Implementação de uma Rede de Computador Cabeada.pptx
PDF
eBook - GUIA DE CONSULTA RAPIDA EM ROTEADORES E SWITCHES CISCO - VOL I.pdf
PDF
Manejo integrado de pragas na cultura do algodão
PPTX
Viasol Energia Solar -Soluções para geração e economia de energia
PPTX
Eng. Software - pontos essenciais para o início
PPTX
Informática Aplicada Informática Aplicada Plano de Ensino - estudo de caso NR...
PPTX
Tipos de servidor em redes de computador.pptx
PPTX
Arquitetura de computadores - Memórias Secundárias
PPTX
Design - Introdução a Gestalt e teoria das formas
PPTX
Utilizando code blockes por andre backes
PDF
Termos utilizados na designação de relação entre pessoa e uma obra.pdf
Proposta de Implementação de uma Rede de Computador Cabeada.pptx
eBook - GUIA DE CONSULTA RAPIDA EM ROTEADORES E SWITCHES CISCO - VOL I.pdf
Manejo integrado de pragas na cultura do algodão
Viasol Energia Solar -Soluções para geração e economia de energia
Eng. Software - pontos essenciais para o início
Informática Aplicada Informática Aplicada Plano de Ensino - estudo de caso NR...
Tipos de servidor em redes de computador.pptx
Arquitetura de computadores - Memórias Secundárias
Design - Introdução a Gestalt e teoria das formas
Utilizando code blockes por andre backes
Termos utilizados na designação de relação entre pessoa e uma obra.pdf

Iniciando com Jquery

  • 2. Quem é esse cara?  Formado em Tecnologia de Sistemas pra Internet.  Programa desde os 13 anos.  Programador back-end.  Já trabalhou em empresas, órgãos governamentais e startups como: INCRA, 3Up Tecnologia, Onsee Digital Signage.  Atualmente é CEO/Founder da Stoodos.
  • 3. O que vamos ver?  O que é jQuery?  Porque usá-lo  Para que usá-lo?  Como usa-lo?  Seletores.  jQuery e o CSS.  Efeitos em jQuery.  Ajax com jQuery. Bônus:  Principais plugins do jQuery.
  • 4. O que é jQuery?  Criada por John Resig.  Biblioteca JavaScript.  Uma forma simples de escrever códigos JavaScript.  Free – MIT e GPL  Conformidade com os padrões web.  www.jquery.com
  • 5. Por que usá-lo?  JavaScript:  jQuery
  • 6. Para que usá-lo  Adicionar efeitos visuais e animações.  Acessar e manipular o HTML.  Implementar códigos Ajax.  Prover interatividade.  Alterar conteúdos.  Compatibilidade com navegadores.  Simplificar tarefas JavaScript.
  • 7. Como usá-lo?  Baixar o jQuery em www.jquery.com  Incluir o arquivo .js em seu projeto.  Chamar o jQuery no cabeçalho do HTML Ex.:  Programar em Jquery.
  • 8. Alguns adendos  Construtor $() ou jQuery().  Encadeamento: Ex.:
  • 9. Seletores  Seletores CSS 1-3 funcionam em jQuery.  O jQuery possui alguns seletores próprios.  http://api.jquery.com/category/selectors/ Ex. de seletores CSS: Ex. de seletores próprios:
  • 10. Eventos  Mesmos do JavaScript.  blur(), change(), click(), dbclick(), focus(), hover(), keydown(), keypress(), keyup(), load(), select(), submit() …  http://api.jquery.com/category/events/ Ex.:
  • 11. jQuery e o CSS.  Muito simples manipular CSS por jQuery. Ex.:
  • 12. Efeitos em jQuery.  Métodos que possibilitam a criação de efeitos customizados.  Métodos com efeitos nativos.
  • 13. Efeitos em jQuery.  animate() - Criar animações personalizadas. Ex.:
  • 14. Efeitos em jQuery.  delay() - Seta um tempo de espera entre execuções. Ex.:  fadeIn(), fadeOut(), fadeToggle() – Aparecer e desaparecer. Ex.:
  • 15. Efeitos em jQuery.  hide(), show(), toggle() Ex.:  slideDown(), slideUp(), slideToggle() Ex.:
  • 16. Ajax com jQuery.  Muito, muito, mas muito mais simples mesmo que JavaScript puro.  Muito mais organizado que em JavaScript puro.
  • 17. Ajax com jQuery.  load() – Lê dados servidor e os carrega no elemento HTML selecionado. Ex.:  ajax() – Realiza requisições ajax. Ex.:
  • 18. Plugins do jQuery – O que são?  Códigos jQuery para ajudar o desenvolvedor a fazer algo (validar formulários, upload de arquivos..).  Vantagem de ter muita coisa boa já implementada.  Encurta o tempo de desenvolvimento.
  • 19. Como usar um plugin?  Download dos arquivos do plugin (imagens, .js, .css, .swf...)  Chamar os arquivos necessários na página (.js, .css …)  Utilizar o plugin.
  • 20. Bons plugins jQuery  Validate – Validar formulários  Fancybox – Lightbox genérico  jQuery UI – Interações com o usuário  MeioMask – Máscaras (CPF, Telefone ...)