jQuery

Introdução
Definições
O que é jQuery?
“jQuery é uma pequena biblioteca JavaScript,
rápida e cheia de recursos que faz coisas como
manipulação, controle de eventos, animações e uso
de ajax muito mais simples, oferecendo suporte a
múltiplos navegadores. Combinando versatilidade e
extensibilidade jQuery mudou a forma como
milhares de pessoas escrevem javaScript.”
http://jquery.com/
Definições

jQuery é uma biblioteca JavaScript criada por

John Resig e disponibilizada como software
livre e aberto.
Definições
“O foco principal da biblioteca jQuery é a
simplicidade. Por que submeter os
desenvolvedores ao martírio de escrever longos
e complexos códigos para criar simples efeitos?”
John Resig, jQuery in Action
Definições
Para que serve jQuery?
● adicionar efeitos visuais e animações;
● acessar e manipular o DOM;
● procurar informações no servidor sem
necessidade de recarregar a página;
● simplificar tarefas específicas de JavaScript;
● alterar conteúdos;
Utilizando jQuery
O primeiro passo para se utilizar a biblioteca
jQuery é obtê-la.

Vá ao site oficial jquery.com e faça o download

da mesma.
Para utilizar a biblioteca jQuery é
necessário em primeiro lugar baixá-la:
Depois deve-se colocar o aquivo baixado
(jquery-3.2.1.min.js por exemplo) junto com os
arquivos HTML.
E depois importá-lo utilizando a tag script.
E por fim declarar o método necessário para
detecção do estado do DOM, que é alg parecido
com isso:
Seletores
Os seletores em jQuery são parecidos com as
regras CSS. Eles definem quais elementos
serão atingidos (ou selecionados) por aquela
ação ou evento.

https://api.jquery.com/category/selectors/
Seletores
Seletores
Por exemplo, como definimos um regras CSS
para alterar as propriedades de TODOS os DIVS
de uma página?
Seletores
Por exemplo, como definimos um regras CSS
para alterar as propriedades de TODOS os DIVS
de uma página?
Seletores
Em jQuery o código é muito parecido:
 31

Seletores
E se eu quiser apenas um DIV com o ID igual
a “caixa”?
Seletores
Uma terceira situação é selecionar elementos
utilizando uma classe, uma classe CSS. Como
este:
Seletores
Qual seria o seletor que usaria?
Seletores
Assim pode-se afirmar que os seletores jQuery
são muito semelhantes aos seletores CSS,
sendo o “#” usado para selecionar elementos por
ID, o “.” usado para selecionar elementos por
CLASSE e o próprio elemento usado para
selecionar TODOS os elementos da página.
Seletores
No entanto existem no jQuery dezenas de outros
seletores, como por exemplo por atributo, por
posição (primeiro, último ou número), por tipo,
por hierarquia (irmão, filho, pai), por pares ou
ímpares, por visibilidade, etc.
Seletores
Na documentação:

https://api.jquery.com/category/selectors/

Podem ser encontrados todos os seletores

possíveis.
Seletores
Agora vamos ver na prática como podemos usar
os seletores para fazer algo mais funcional.

Para isso precisaremos dos controles de

eventos.
Eventos
Com jQuery o controle de eventos torna-se
simples e intuitivo. O Código para controlar um
evento é basicamente este:
Eventos
Os eventos são ações do utilizador
interagindo com a página (e o
navegador). Estes comportamentos podem
ser mapeados e controlados via JavaScript
ou jQuery.

http://api.jquery.com/category/events/
Eventos
Eventos
Onde seletor faz referência aos elementos que
ao qual o evento está sendo declarado.

E evento é o evento, a ação a ser mapeada.

Eventos
Exemplo:
Eventos
Exemplo:
Praticando #1
Crie uma página HTML assim:
Praticando #1
Na sequência precisamos:

1) Importar o jQuery

2) Declarar o bloco de código para verificar se o

DOM está pronto

3) Declarar o evento e seu respectivo seletor

Praticando #1
Veja:
Praticando #1
Agora vamos fazer com que quando clicarmos
no parágrafo ELE tenha sua cor e tamanho de
fonte alterados além de deixá-lo em negrito.
Para isso utilizaremos o manipulador CSS.
Praticando #1
Veja:
Praticando #1
Teste o resultado clicando sobre cada parágrafo
Praticando #1
A instrução $(this) refere-se ao elemento
em questão. No exemplo anterior ela se
refere ao parágrafo que está sendo clicado.

Mais sobre:

http://html-tuts.com/jquery-this-selector/
Praticando #1
Sobre o método CSS:

http://api.jquery.com/css/
Manipulação
Após ver um pouco sobre seletores e o
mecanismo de controle de eventos
passaremos a lidar com a manipulação do
DOM, que consiste basicamente em alterar
a página de alguma forma.
Manipulação
Por exemplo, mudar o conteúdo de uma
TAG ou de um campo, alterar um estilo
(cor, tamanho, borda, margem), mostrar ou
ocultar elementos, copiar, remover,
adicionar elementos dinamicamente entre
outras coisas.
Manipulação
http://api.jquery.com/category/manipulation/
Manipulação
Explorando a documentação oficial sobre
manipulação temos:
Manipulação
Manipulação
Manipulação
Manipulação
Manipulação
Praticando #2
Crie a seguinte página HTML:
Praticando #2
Começamos com o HTML e CSS para os DIVS
de cor do fundo
Praticando #2
E o JavaScript/jQuery ficaria mais ou menos
assim:
Praticando #2
Resultado
Praticando #2
Adicionando parágrafos ao corpo da página.

HTML
Praticando #2
Adicionando parágrafos ao corpo da página.

JavaScript/jQuery
Praticando #2
Resultado
Praticando #2
Aumentando o tamanho da fonte dos parágrafos
da página - HTML
Praticando #2
Aumentando o tamanho da fonte dos parágrafos
da página – JavaScript/jQuery
Praticando #2
Resultado
Praticando #2
Agora implemente as funcionalidades de:
●
Diminuir o tamanho da fonte
●
Remover o último parágrafo
●
Remover todos os parágrafos
Praticando #2
Para fechar vamos implementar mais uma
manipulação, vamos trabalhar com a adição e
remoção de classes.

Para isso vamos fazer com que ao passar o

mouse sobre os parágrafos eles fiquem com um
“destaque” e ao remover o mouse eles voltem ao
normal.
Praticando #2
Veja um exemplo
Praticando #2
Como primeira ideia poderia usar o
seguinte código:
Praticando #2
No entando ele tem um problema. Desta forma o
evento será atrelado aos paarágrafos existentes
na página, porém novos parágrafos que forem
inseridos dinamicamente após o carregamento
da página não receberão o evento.
Praticando #2
Para resolver essa situação vamos mudar um
pouco a forma de declarar esse evento.

Vamos usar o seletor “body” e informar que

todos os parágrafos que estão dentro dele terão
essa ação. Isso resolverá a situação.
Praticando #2
 jQuery
Plugins e
Funcionalidades interessantes
 Basicamente um plugin é uma função a
que se acrescenta uma
funcionalidade específica ao objeto
jQuery para que a biblioteca possa
fazer algo que originalmente não
fazia.

27 de outubro de 2017
Plugins
Um dos grandes trunfos do jQuery é a sua
vasta gama de plugins. Praticamente
qualquer efeito, ação ou manipulação que
você consiga imaginar já deve possuir um
plugin...
São exemplos de plugins, as galerias de
imagens, efeitos e animações em páginas
web, ordenação e manipulação de dados
tabulares, etc.
Plugins
Há uma infinidade de plugins disponíveis
na internet, alguns de uso livre outros que
são pagos.

É possível também criar um plugin para

atender uma necessidade sua.
A título de exemplo, veja alguns plugins:
https://www.pixxelfactory.net/jInvertScroll/

http://alizahid.github.io/slinky/

https://nanogallery2.nanostudio.org/

http://dimsemenov.com/plugins/magnific-popup/

http://fittextjs.com/
Jquery UI
O jQuery UI é uma ferramenta de
interação e construída em cima do núcleo
da jQuery que permite que você possa
animar elementos HTML e implementar
interações front-end com relativa facilidade.
Jquery UI
Em outras palavras, é uma rica e
extensível biblioteca de componentes
gráficos criada para maximizar o uso e
poder da jQuery.
Jquery UI
Totalmente baseada no framework jQuery,
é usada para fornecer uma melhor
interação entre o usuário e o cliente (web
browser), com recursos ricos como
animação, efeitos, componentes
estilizáveis, etc.
Jquery UI
Jquery UI
Website da biblioteca:

https://jqueryui.com/
Jquery UI
Exemplos: draggable

https://jqueryui.com/draggable/

https://jqueryui.com/draggable/#snap-to
Jquery UI
Exemplos: Dialog
https://jqueryui.com/dialog/#default https://

jqueryui.com/dialog/#modal-message
Jquery UI
É possível obter o código de cada exemplo..
Jquery UI
Há também uma área do jQuery UI
chamada “ThemeRoller” onde é possível
escolher entre alguns temas existentes,
personalisar um deles ou ainda criar um
totalmente novo com apoio do website.
 Jquery UI
http://jqueryui.com/themeroller/

Prof. Eder Pansani

E-mail: epansani@gmail.com
27 de outubro de 2017 http://ederpansani.com.br