Introdução às Bibliotecas jQuery/ jQuery UI

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