Iniciando com jQuery
-
Upload
tiago-butzke -
Category
Technology
-
view
2.142 -
download
0
description
Transcript of 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 [email protected]