O documento apresenta uma introdução ao jQuery, biblioteca JavaScript que simplifica manipulação de DOM, CSS, eventos e efeitos. É descrito como jQuery é utilizado por grandes empresas e como instalá-lo, além de exemplos de sintaxe básica, manipulação de elementos, classes, estilos e plugins.

1. Minicurso jQuery
Instrutor: Wilker Iceri

2. O que é jQuery?
• É uma biblioteca JavaScript, que tem a seguinte filosofia: “Write less, do
more”.
• jQuery simplifica muitas tarefas comuns como:
• Manipulação do DOM
• Manipulação CSS
• Eventos
• Efeitos e animações
• Ajax
• e muito mais...
• É cross-browser, funciona igual em todos os navegadores (até no IE 6 o.O).
• É muito utilizado pelos desenvolvedores, e por muitas empresas de nome
como:
• Google
• Microsoft
• IBM
• Wikipédia

3. Instalação
• Existem duas foram de incluir a biblioteca jQuery no seu projeto:
• Baixar do próprio site da jQuery: http://jquery.com/
• Usar um repositório online como o da Google.
Acessar o exemplo

4. Sintaxe
• Com jQuery você seleciona um elemento HTML e algumas ações nesses
elementos.
• Sintaxe: $(seletor).action();
• $ - define o acesso ao jQuery.
• seletor – seletor utilizado para encontrar os elementos HTML (o jQuery usa os seletores CSS)
• action – método do elemento.
Acessar o exemplo

5. Sintaxe
Acessar o exemplo

6. Eventos
• A jQuery pode responder a vários tipos de eventos, como focus, blur,
mouseenter, mouseleave, etc.
Acessar o exemplo

7. Manipulação do DOM
• Com jQuery podemos manipular os elementos HTML muito facilmente.
• Principais métodos:
• text() – Define ou retorna o conteúdo do elemento.
• html() – Define ou retorna o conteúdo do elemento (incluindo a marcação HTML).
• val() – Define ou retorna o valor de campos de formulário.
• attr() – Define ou retorna valores para atributos HTML.
Acessar o exemplo

8. Manipulação do DOM
Acessar o exemplo

9. Manipulação de Classes
• Métodos para manipulação de classes:
• addClass() – adiciona uma ou mais classes ao elemento selecionado.
• removeClass() – remove uma ou mais classes do elemento selecionado.
• toggleClass() – Alterna entre add/remove.
Acessar o exemplo

10. Manipulação de Classes
Acessar o exemplo

11. Manipulação do CSS
• Com o método css() é possível adicionar um ou mais estilos a um elemento.
Acessar o exemplo

12. Manipulação do CSS
Acessar o exemplo

13. Métodos de navegação no DOM
Acessar o exemplo
• A biblioteca jQuery disponibiliza métodos para você poder buscar elementos
pai, filhos, irmãos, etc.
• Alguns deles:
• closest() – retorna o primeiro elemento pai encontrado.
• find() – retorna todos os elementos filhos encontrados.

14. jQuery Plugins
• Está tentando construir algo com jQuery que requer funcionalidades que não
existem na biblioteca?.
• Hoje em dia existem milhares de plugins que você pode adicionar facilmente
na sua aplicação.
• Exemplos de Plugins: Slider de imagens, menu dropdown, mascaras,
validações, autocompletes, etc.
• Tente pesquisar no google por: jquery plugins.

15. jQuery Mask Plugin
• Site do plugin: http://igorescobar.github.io/jQuery-Mask-Plugin/.
Acessar o exemplo

16. Criação de Plugin
• Não achou o plugin que você queria? Que tal fazer um?
Acessar o exemplo

17. Criação de Plugin
Acessar o exemplo

18. FIM...