Iniciando com jQuery
-
Upload
tiago-butzke -
Category
Technology
-
view
2.142 -
download
0
description
Transcript of Iniciando com jQuery
![Page 1: Iniciando com jQuery](https://reader033.fdocument.pub/reader033/viewer/2022061210/54919096b479598f428b467a/html5/thumbnails/1.jpg)
![Page 2: Iniciando com jQuery](https://reader033.fdocument.pub/reader033/viewer/2022061210/54919096b479598f428b467a/html5/thumbnails/2.jpg)
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.
![Page 3: Iniciando com jQuery](https://reader033.fdocument.pub/reader033/viewer/2022061210/54919096b479598f428b467a/html5/thumbnails/3.jpg)
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.
![Page 4: Iniciando com jQuery](https://reader033.fdocument.pub/reader033/viewer/2022061210/54919096b479598f428b467a/html5/thumbnails/4.jpg)
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
![Page 5: Iniciando com jQuery](https://reader033.fdocument.pub/reader033/viewer/2022061210/54919096b479598f428b467a/html5/thumbnails/5.jpg)
Por que usá-lo?
JavaScript:
jQuery
![Page 6: Iniciando com jQuery](https://reader033.fdocument.pub/reader033/viewer/2022061210/54919096b479598f428b467a/html5/thumbnails/6.jpg)
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.
![Page 7: Iniciando com jQuery](https://reader033.fdocument.pub/reader033/viewer/2022061210/54919096b479598f428b467a/html5/thumbnails/7.jpg)
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.
![Page 8: Iniciando com jQuery](https://reader033.fdocument.pub/reader033/viewer/2022061210/54919096b479598f428b467a/html5/thumbnails/8.jpg)
Alguns adendos
Construtor $() ou jQuery(). Encadeamento:
Ex.:
![Page 9: Iniciando com jQuery](https://reader033.fdocument.pub/reader033/viewer/2022061210/54919096b479598f428b467a/html5/thumbnails/9.jpg)
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:
![Page 10: Iniciando com jQuery](https://reader033.fdocument.pub/reader033/viewer/2022061210/54919096b479598f428b467a/html5/thumbnails/10.jpg)
Eventos
Mesmos do JavaScript. blur(), change(), click(), dbclick(), focus(),
hover(), keydown(), keypress(), keyup(), load(), select(), submit() …
http://api.jquery.com/category/events/
Ex.:
![Page 11: Iniciando com jQuery](https://reader033.fdocument.pub/reader033/viewer/2022061210/54919096b479598f428b467a/html5/thumbnails/11.jpg)
jQuery e o CSS.
Muito simples manipular CSS por jQuery.
Ex.:
![Page 12: Iniciando com jQuery](https://reader033.fdocument.pub/reader033/viewer/2022061210/54919096b479598f428b467a/html5/thumbnails/12.jpg)
Efeitos em jQuery.
Métodos que possibilitam a criação de efeitos customizados.
Métodos com efeitos nativos.
![Page 13: Iniciando com jQuery](https://reader033.fdocument.pub/reader033/viewer/2022061210/54919096b479598f428b467a/html5/thumbnails/13.jpg)
Efeitos em jQuery.
animate() - Criar animações personalizadas.
Ex.:
![Page 14: Iniciando com jQuery](https://reader033.fdocument.pub/reader033/viewer/2022061210/54919096b479598f428b467a/html5/thumbnails/14.jpg)
Efeitos em jQuery.
delay() - Seta um tempo de espera entre execuções.
Ex.:
fadeIn(), fadeOut(), fadeToggle() –
Aparecer e desaparecer.
Ex.:
![Page 15: Iniciando com jQuery](https://reader033.fdocument.pub/reader033/viewer/2022061210/54919096b479598f428b467a/html5/thumbnails/15.jpg)
Efeitos em jQuery.
hide(), show(), toggle()
Ex.:
slideDown(), slideUp(), slideToggle()
Ex.:
![Page 16: Iniciando com jQuery](https://reader033.fdocument.pub/reader033/viewer/2022061210/54919096b479598f428b467a/html5/thumbnails/16.jpg)
Ajax com jQuery.
Muito, muito, mas muito mais simples mesmo que JavaScript puro.
Muito mais organizado que em JavaScript puro.
![Page 17: Iniciando com jQuery](https://reader033.fdocument.pub/reader033/viewer/2022061210/54919096b479598f428b467a/html5/thumbnails/17.jpg)
Ajax com jQuery.
load() – Lê dados servidor e os carrega no elemento HTML selecionado.
Ex.:
ajax() – Realiza requisições ajax.
Ex.:
![Page 18: Iniciando com jQuery](https://reader033.fdocument.pub/reader033/viewer/2022061210/54919096b479598f428b467a/html5/thumbnails/18.jpg)
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.
![Page 19: Iniciando com jQuery](https://reader033.fdocument.pub/reader033/viewer/2022061210/54919096b479598f428b467a/html5/thumbnails/19.jpg)
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.
![Page 20: Iniciando com jQuery](https://reader033.fdocument.pub/reader033/viewer/2022061210/54919096b479598f428b467a/html5/thumbnails/20.jpg)
Bons plugins jQuery
Validate – Validar formulários Fancybox – Lightbox genérico jQuery UI – Interações com o usuário MeioMask – Máscaras (CPF, Telefone ...)