Iniciando com jQuery

21

description

Palestra ministrada na Stoodos http://www.stoodos.com/

Transcript of Iniciando com jQuery

Page 1: Iniciando com jQuery
Page 2: 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.

Page 3: Iniciando com jQuery

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

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

Por que usá-lo?

JavaScript:

jQuery

Page 6: Iniciando com 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.

Page 7: Iniciando com jQuery

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

Alguns adendos

Construtor $() ou jQuery(). Encadeamento:

Ex.:

Page 9: Iniciando com jQuery

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

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

jQuery e o CSS.

Muito simples manipular CSS por jQuery.

Ex.:

Page 12: Iniciando com jQuery

Efeitos em jQuery.

Métodos que possibilitam a criação de efeitos customizados.

Métodos com efeitos nativos.

Page 13: Iniciando com jQuery

Efeitos em jQuery.

animate() - Criar animações personalizadas.

Ex.:

Page 14: Iniciando com jQuery

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

Efeitos em jQuery.

hide(), show(), toggle()

Ex.:

slideDown(), slideUp(), slideToggle()

Ex.:

Page 16: Iniciando com jQuery

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

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

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

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

Bons plugins jQuery

Validate – Validar formulários Fancybox – Lightbox genérico jQuery UI – Interações com o usuário MeioMask – Máscaras (CPF, Telefone ...)

Page 21: Iniciando com jQuery

Contatos

@tiagobutzke [email protected]