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