introdução às bibliotecas jquery/ jquery ui
DESCRIPTION
Slides guia apresentados durante o minicurso de jQuery/jQuery UI ministrado na secompp 2013 - FCT/UNESP - Presidente PrudenteTRANSCRIPT
Lenon Fachiano Silva
Lenon Fachiano Silva Estudante de Ciência da Computação
FCT/UNESP
Introdução
O que é
Introdução
http://vidadeprogramador.com.br/2012/06/20/usando-jquery/
Introdução
jQuery é uma bilbioteca JavaScript
escrita por John Resig e disponibilizado
como software livre (MIT / GPL).
Surgiu graças a insatisfação do autor à
cansativa maneira necessária para se
escrever códigos JavaScript.
Utiliza seletores CSS para identificar
diretamente os elementos do DOM.
Introdução
Introdução
JavaScript X jQuery
Introdução
Para que serve?
Introdução
• Adicionar efeitos visuais
• Acessar e manipular o DOM
• Buscar informações no servidor
sem necessidade de recarregar
a página
• Alterar conteúdos
• Simplificar tarefas específicas de JavaScript
Introdução
Olá Mundo
No .html
• Baixar biblioteca e copiar para o servidor
• Nosso Script
Olá Mundo
No .html (alternativamente)
• Nosso Script
• Utilizar um link externo
Olá Mundo
ô ã
No .js
Olá Mundo
ô ã
No .js (alternativamente)
Construtor
Seletores
Seletores
Basicamente, quaisquer seletores CSS
servem para o jQuery.
Aqui serão apresentados alguns destes
seletores
Seletores
Simples
Elemento html.
Identificador
Classe CSS
Seletores
Compostos
Combinação de Seletores
Simples
Compostos
Seletores
Ancestral - Descendente
Elemento - filho
Anterior - Próximo
Anterior - Irmãos
Filtros
Seletores
Filtra condição
particular de um seletor
simples ou composto
Filtros
Seletores
Primeiro
Último
Todos exceto
Filtros
Seletores
Índice
Pares
Ímpares
Filtros
Seletores
Índice Superior a
Índice Inferior a
Atributo
Seletores
Seleciona de acordo com
alguma característica
específica de um
atributo
Seletores
Atributo
Atributo igual a
Atributo diferente de
Atributo com valor
iniciado por
Seletores
Atributo
Atributo termina com
Atributo possui no
nome
Conteúdo
Seletores
Seleciona de acordo com
o conteúdo do elemento
Seletores
Conteúdo
Elemento que
possui determinado
texto
Elemento que
possui outro
especificado
Seletores
Conteúdo
Elemento que
estejam vazios
Elemento que
possuam
elementos filhos
Formulário
Seletores
Seleciona elementos de
formulário
Seletores
Formulário
Eventos
Eventos
Uma ação do usuário
“dispara” o script TRIGGERS
Eventos
Mouse
Evento de click
Evento de duplo-click
Eventos
Mouse
Cursor entra em um elemento
Cursor deixa um elemento
Eventos
Mouse
Botão do mouse é pressionado
Botão do mouse é liberado sobre o elemento
Eventos
Teclado
Eventos
Alguns Outros
Eventos
Métodos
Estilização
Métodos
Manipulação
Métodos
Manipulação
Métodos
Manipulação
Métodos
Adicionar/Remover elementos
Métodos
Efeitos
Ocultar/Exibir
Fade
Efeitos
Slide
Efeitos
Animate
Efeitos
Ajax
Requisição Servidor
O que é
Como utilizar
• Folha de estilos do jQuery
• jQuery
• jQuery UI
Draggable
Torna um elemento arrastável
Sortable
Reorganiza os elementos de um grupo
Resizable
Permite alterar a dimensão de um elemento
Accordion
Estilo “Sanfona”
Dialog
Janela de diálogo
Datepicker
Calendário
Autocomplete
Sugere palavras de acordo com o que está
sendo digitado
Referências
Silva, Maurício Samy
jQuery: a biblioteca do programador JavaScript /
Maurício Samy Silva – São Paulo: Novatec Editora, 2008
ISBN: 978-85-7522-178-5
Referências
jquery.com
jqueryui.com
w3schools