introdução às bibliotecas jquery/ jquery ui

63
Lenon Fachiano Silva

Upload: lenon-fachiano

Post on 27-May-2015

544 views

Category:

Education


1 download

DESCRIPTION

Slides guia apresentados durante o minicurso de jQuery/jQuery UI ministrado na secompp 2013 - FCT/UNESP - Presidente Prudente

TRANSCRIPT

Page 1: Introdução às Bibliotecas jQuery/ jQuery UI

Lenon Fachiano Silva

Page 2: Introdução às Bibliotecas jQuery/ jQuery UI

Lenon Fachiano Silva Estudante de Ciência da Computação

FCT/UNESP

Page 3: Introdução às Bibliotecas jQuery/ jQuery UI

Introdução

O que é

Page 5: Introdução às Bibliotecas jQuery/ jQuery UI

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.

Page 6: Introdução às Bibliotecas jQuery/ jQuery UI

Introdução

Page 7: Introdução às Bibliotecas jQuery/ jQuery UI

Introdução

JavaScript X jQuery

Page 8: Introdução às Bibliotecas jQuery/ jQuery UI

Introdução

Para que serve?

Page 9: Introdução às Bibliotecas jQuery/ jQuery UI

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

Page 10: Introdução às Bibliotecas jQuery/ jQuery UI

Introdução

Page 11: Introdução às Bibliotecas jQuery/ jQuery UI

Olá Mundo

No .html

• Baixar biblioteca e copiar para o servidor

• Nosso Script

Page 12: Introdução às Bibliotecas jQuery/ jQuery UI

Olá Mundo

No .html (alternativamente)

• Nosso Script

• Utilizar um link externo

Page 13: Introdução às Bibliotecas jQuery/ jQuery UI

Olá Mundo

ô ã

No .js

Page 14: Introdução às Bibliotecas jQuery/ jQuery UI

Olá Mundo

ô ã

No .js (alternativamente)

Page 15: Introdução às Bibliotecas jQuery/ jQuery UI

Construtor

Page 16: Introdução às Bibliotecas jQuery/ jQuery UI

Seletores

Page 17: Introdução às Bibliotecas jQuery/ jQuery UI

Seletores

Basicamente, quaisquer seletores CSS

servem para o jQuery.

Aqui serão apresentados alguns destes

seletores

Page 18: Introdução às Bibliotecas jQuery/ jQuery UI

Seletores

Simples

Elemento html.

Identificador

Classe CSS

Page 19: Introdução às Bibliotecas jQuery/ jQuery UI

Seletores

Compostos

Combinação de Seletores

Simples

Page 20: Introdução às Bibliotecas jQuery/ jQuery UI

Compostos

Seletores

Ancestral - Descendente

Elemento - filho

Anterior - Próximo

Anterior - Irmãos

Page 21: Introdução às Bibliotecas jQuery/ jQuery UI

Filtros

Seletores

Filtra condição

particular de um seletor

simples ou composto

Page 22: Introdução às Bibliotecas jQuery/ jQuery UI

Filtros

Seletores

Primeiro

Último

Todos exceto

Page 23: Introdução às Bibliotecas jQuery/ jQuery UI

Filtros

Seletores

Índice

Pares

Ímpares

Page 24: Introdução às Bibliotecas jQuery/ jQuery UI

Filtros

Seletores

Índice Superior a

Índice Inferior a

Page 25: Introdução às Bibliotecas jQuery/ jQuery UI

Atributo

Seletores

Seleciona de acordo com

alguma característica

específica de um

atributo

Page 26: Introdução às Bibliotecas jQuery/ jQuery UI

Seletores

Atributo

Atributo igual a

Atributo diferente de

Atributo com valor

iniciado por

Page 27: Introdução às Bibliotecas jQuery/ jQuery UI

Seletores

Atributo

Atributo termina com

Atributo possui no

nome

Page 28: Introdução às Bibliotecas jQuery/ jQuery UI

Conteúdo

Seletores

Seleciona de acordo com

o conteúdo do elemento

Page 29: Introdução às Bibliotecas jQuery/ jQuery UI

Seletores

Conteúdo

Elemento que

possui determinado

texto

Elemento que

possui outro

especificado

Page 30: Introdução às Bibliotecas jQuery/ jQuery UI

Seletores

Conteúdo

Elemento que

estejam vazios

Elemento que

possuam

elementos filhos

Page 31: Introdução às Bibliotecas jQuery/ jQuery UI

Formulário

Seletores

Seleciona elementos de

formulário

Page 32: Introdução às Bibliotecas jQuery/ jQuery UI

Seletores

Formulário

Page 33: Introdução às Bibliotecas jQuery/ jQuery UI

Eventos

Page 34: Introdução às Bibliotecas jQuery/ jQuery UI

Eventos

Uma ação do usuário

“dispara” o script TRIGGERS

Page 35: Introdução às Bibliotecas jQuery/ jQuery UI

Eventos

Mouse

Evento de click

Evento de duplo-click

Page 36: Introdução às Bibliotecas jQuery/ jQuery UI

Eventos

Mouse

Cursor entra em um elemento

Cursor deixa um elemento

Page 37: Introdução às Bibliotecas jQuery/ jQuery UI

Eventos

Mouse

Botão do mouse é pressionado

Botão do mouse é liberado sobre o elemento

Page 38: Introdução às Bibliotecas jQuery/ jQuery UI

Eventos

Teclado

Page 39: Introdução às Bibliotecas jQuery/ jQuery UI

Eventos

Alguns Outros

Page 40: Introdução às Bibliotecas jQuery/ jQuery UI

Eventos

Page 41: Introdução às Bibliotecas jQuery/ jQuery UI

Métodos

Estilização

Page 42: Introdução às Bibliotecas jQuery/ jQuery UI

Métodos

Manipulação

Page 43: Introdução às Bibliotecas jQuery/ jQuery UI

Métodos

Manipulação

Page 44: Introdução às Bibliotecas jQuery/ jQuery UI

Métodos

Manipulação

Page 45: Introdução às Bibliotecas jQuery/ jQuery UI

Métodos

Adicionar/Remover elementos

Page 46: Introdução às Bibliotecas jQuery/ jQuery UI

Métodos

Page 47: Introdução às Bibliotecas jQuery/ jQuery UI

Efeitos

Ocultar/Exibir

Page 48: Introdução às Bibliotecas jQuery/ jQuery UI

Fade

Efeitos

Page 49: Introdução às Bibliotecas jQuery/ jQuery UI

Slide

Efeitos

Page 50: Introdução às Bibliotecas jQuery/ jQuery UI

Animate

Efeitos

Page 51: Introdução às Bibliotecas jQuery/ jQuery UI

Ajax

Requisição Servidor

Page 52: Introdução às Bibliotecas jQuery/ jQuery UI

O que é

Page 53: Introdução às Bibliotecas jQuery/ jQuery UI

Como utilizar

• Folha de estilos do jQuery

• jQuery

• jQuery UI

Page 54: Introdução às Bibliotecas jQuery/ jQuery UI

Draggable

Torna um elemento arrastável

Page 55: Introdução às Bibliotecas jQuery/ jQuery UI

Sortable

Reorganiza os elementos de um grupo

Page 56: Introdução às Bibliotecas jQuery/ jQuery UI

Resizable

Permite alterar a dimensão de um elemento

Page 57: Introdução às Bibliotecas jQuery/ jQuery UI

Accordion

Estilo “Sanfona”

Page 58: Introdução às Bibliotecas jQuery/ jQuery UI

Dialog

Janela de diálogo

Page 59: Introdução às Bibliotecas jQuery/ jQuery UI

Datepicker

Calendário

Page 60: Introdução às Bibliotecas jQuery/ jQuery UI

Autocomplete

Sugere palavras de acordo com o que está

sendo digitado

Page 61: Introdução às Bibliotecas jQuery/ jQuery UI
Page 62: Introdução às Bibliotecas jQuery/ jQuery UI

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

Page 63: Introdução às Bibliotecas jQuery/ jQuery UI

Referências

jquery.com

jqueryui.com

w3schools