Desevolvimento Web Client-side - jQuery
0 gostou•492 visualizações
Este documento apresenta uma introdução ao jQuery, uma biblioteca JavaScript que simplifica manipulação de elementos HTML, eventos, animações e Ajax. Explica o que é jQuery, como funciona seu ciclo de trabalho semelhante ao CSS, como baixar e incluir o arquivo .js, usar seletores e funções jQuery para modificar conteúdo, estilos e atributos. Também mostra exemplos de efeitos, animações, manipulação de formulários e plugins úteis.
Desevolvimento Web Client-side - jQuery
- 1. Pacote Web Desenvolvendo com Padrões Web Módulo 3 - Introdução ao jQuery Guilherme Cavalcanti [email protected] @guiocavalcanti
- 2. O que é jQuery Definição oficial jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. Na verdade é apenas um conjunto de funções em JavaScript que facilitam as coisas para você
- 3. Ciclo de trabalho (lembra do CSS?) CSS jQuery Apontamos para um Apontamos para um elemento elemento Definimos propriedades Definimos 1. Ações, 2. Propriedades, 3. Animações 4. Ajax...
- 4. Começando 1. Baixar .js em http://jquery.com/ 2. Criar um documento HTML e incluir o .js 3. Usar seletores e funções
- 5. Objeto jQuery Objeto que contém as funções do jQuery Pode ser instanciado pelo nome jquery Ou pelo "apelido" $ MUITAS funções
- 6. Seletores Iguais ao do CSS E mais alguns Filhos imediatos Algum atributo Ímpares/Pares
- 7. Exercitando seletores 1 Deixar somente elementos pares azul
- 8. Exercitando seletores 3 Deixar somente os input do tipo text do form de cadastro com o fundo azul
- 9. Funções úteis $.val() Set e get do valor do atributo value= Usado em inputs $.html() Set e get do conteúdo HTML de uma tag $.remove() Apaga o elemento $.hide() Esconde o elemento $.show() Mostra o elemento $.toggle() Alterna entre mostrar e esconder o elemento
- 10. Eventos Click
- 11. Eventos toggle
- 12. Modificando CSS
- 13. Modificando conteúdo (texto, HTML)
- 14. Modificando atributos e seus valores
- 15. Efeitos Hide e show (slow, fast...) FadeOut, FadeIn
- 16. Efeitos - callback É possível chamar uma função depois que o efeito acontece
- 17. Animações
- 19. Plugins interessantes Menu http://users.tpg.com.au/j_birch/plugins/superfish/ Abas, accordion e outros widgets http://jqueryui.com/home