IW II

Aprenda Javascript
Prof. Ricardo Seco
 JAVASCRIPT

Seção 5 - jQuery:
• jQuery - Introdução
• jQuery - Sintaxe
• jQuery - Manipulação do Conteúdo HTML
• jQuery - Loop Each
• jQuery - Formulários
• jQuery - Manipulação de Classes CSS
• jQuery - Eventos
• jQuery - Efeitos
• jQuery - Animate
• jQuery - Métodos em cadeia
 JAVASCRIPT
jQuery - Introdução

jQuery é uma biblioteca Javascript que simplifica o uso da linguagem, requerendo menos linhas de código para fazer mais. Vejamos a diferença, por exemplo, da
manipulação do CSS para elementos de uma classe específica:

Com jQuery é possível manipular elementos do DOM e o CSS, monitorar eventos, fazer efeitos e animações além de fazer pedidos AJAX, temas que vamos ver mais
adiante no curso.
jQuery roda em todos os navegadores e possui plugins para fazer com facilidade diversas funcionalidades, como galerias de fotos, grids, sliders, popups, validação de
formulários e muito mais.
 JAVASCRIPT
jQuery - Introdução

Instalação do jQuery
Para começar a usar o jQuery precisamos fazer o download do arquivo Javascript com todo o código da biblioteca. Para isso, vá até http://jquery.com/download/ e
faça o download da versão comprimida mais recente. Pode ser que ao em vez de iniciar o donwload do arquivo, o código abra em formato texto no navegador. Se isso
acontecer, pressione CTRL + A para selecionar tudo e CTRL + C para copiar. Depois abra um novo arquivo na pasta js, cole o código e salve o arquivo com a extensão
'.js', por exemplo 'jquery.js'.
Se você estiver usando a versão comprimida (sem espaços e sem indentação), é uma boa prática incluir '.min' ao nome do arquivo para identificá-lo. É também
interessante identificar a versão do jQuery que estamos utilizando. Desta forma o nome do arquivo ficaria "jquery-3.3.1.min.js"
Agora é só fazer o link nas páginas onde usaremos jQuery, assim como fazemos com qualquer arquivo Javascript:

No início, vimos que o local mais apropriado para incluir as tags script é ao final do documento, antes de fechar o elemento body. Porém, no caso do jQuery, é mais
recomendável incluí-lo dentro da seção head já que algumas funcionalidades da página podem depender do jQuery, portanto queremos garantir que ele seja carregado
antes de qualquer outro script.
Agora que já temos o jQuery devidamente instalado, podemos começar a usá-lo. Na próxima aula vamos aprender a sintaxe os comandos básicos desta biblioteca.
 JAVASCRIPT
jQuery - Sintaxe

Praticamente tudo que fizermos em jQuery começará com um cifrão '$'. A sintaxe básica dos comandos jQuery é:
 JAVASCRIPT
jQuery - Sintaxe

Selecionando elementos
Para identificar os elementos usamos seletores, como em CSS. Portanto elementos da classe exemplo, serão identificados com ponto: ".exemplo". Enquanto um
elemento com o id exemplo será identificado pela hashtag: ("#exemplo"). As tags podem ser selecionadas diretamente: ("h1"), ("p"), etc.
As ações são métodos jQuery, que vamos começar a aprender a partir de agora. Vamos começar com um exemplo simples, esconder todos os elementos que tenham a
classe "exemplo" ao clicar no botão que tem id "esconder".

Neste exemplo já podemos ver como o código pode ser simplificado com o uso do jQuery. Mas é possível simplificá-lo ainda mais, já que em jQuery existe um método
chamado hide que aplica automaticamente "display: none" aos elementos selecionados.
 JAVASCRIPT
jQuery - Sintaxe

Outras formas de selecionar elementos

Além de selecionar elementos pelos nomes das tags, classes e id's, temos outras maneiras interessantes de tornar a seleção mais específica, conforme a tabela abaixo.

Sintaxe Descrição Nota final: Fazer confusão é normal

$("*") Todos os elementos No início, é normal fazer um pouco de confusão já que os comandos
$("div.exemplo") Todos os elementos div que tenham a classe exemplo jQuery possuem nomes e formas de executar ligeiramente diferentes do que
$("p:first") O primeiro elemento p em Vanilla Javascript. No exemplo acima usamos elemento.click(função)

$("ul li:first-child") O primeiro elemento li de todos os elementos ul enquanto em Javascript usaríamos elemento.onclick = função.
No exemplo usamos também elemento.css("propriedade", "valor")
$("[href]") Todos os elementos que tenham o atributo href
enquanto em Javascript usaríamos elemento.style.propriedade = "valor".
$("a[target='_blank']") Todos os elementos que tenham o atributo target="_blank"
Não se preocupe com isto agora, leva um tempo até que tudo se
$("a[target!='_blank']") Todos os elementos que NÃO tenham o atributo target="_blank"
torne natural. Enquanto isso, lembre-se que o Google está sempre
$(":button") Todos os elementos button ou inputs que tenham type="button"
disponível para nos ajudar. Se tiver dúvida sobre o evento onclick, basta
$("tr:even") Todos os elementos tr pares (0, 2, 4...)
procurar: jquery onclick event, e a resposta estará no primeiro resultado da
$("tr:odd") Todos os elementos tr ímpares (1, 3, 5...)
pesquisa.
 JAVASCRIPT
jQuery - Manipulação do conteúdo HTML

Vamos agora nos aprofundar um pouco mais nos métodos jQuery para manipular o conteúdo HTML.
.html()
O método html é equivalente à propriedade innerHTML que usamos nas seções anteriores do curso. Ele serve tanto para pegar o conteúdo html de um elemento, quanto
para defini-lo.

Use este parágrafo para testar o método html.

.text()
O método text é semelhante ao método html, mas ele pega apenas o conteúdo em texto do elemento, ignorando as tags html.

Use este parágrafo para testar o método text.

 JAVASCRIPT
jQuery - Manipulação do conteúdo HTML

.attr()
O método attr é usado para manipular os atributos html, como "src", "href", "target", etc.
Trabalhe com a url deste link.
 JAVASCRIPT
jQuery - Manipulação do conteúdo HTML

Vamos agora trocar o src de uma imagem ao clicar em um botão:

 JAVASCRIPT
jQuery - Manipulação do conteúdo HTML

.empty() e .remove()
Para apagar todo o conteúdo de um elemento, poderíamos definir um string vazio com o método html:

Porém, existem outras maneiras de fazer, com os métodos empty e remove. O primeiro apaga apenas o conteúdo do elemento enquanto o segundo remove o elemento.
 JAVASCRIPT
jQuery - Loop Each

O loop each da biblioteca jQuery pode ser usado tanto em arrays quando em objetos, ou seja, pode substituir tanto o loop for quanto o loop for/in.
A sintaxe deste loop é bem simples, conforme podemos ver a seguir:

Na função passada no loop each, temos dois argumentos, representados acima pelas variáveis a e b, que representam o índice/chave e o valor de cada elemento.
Vejamos dois exemplos, com um array e com um objeto:
 JAVASCRIPT
jQuery - Loop Each

Percorrendo um array de elementos HTML

Vamos lembrar que podemos selecionar vários elementos HTML ao mesmo tempo, obtendo de volta um array. Vamos percorerer os elementos da <ul> abaixo que tem o
id="interesses" e soltá-los no console com o loop each:
• Desenvolvimento Front End
• Desenvolvimento Back End
• UX Design
• Design Gráfico
 JAVASCRIPT
jQuery - Loop Each

E se quiséssemos aplicar o método text() ou qualquer outro em cada um destes elementos? É possível fazer isto dentro do loop each, só precisamos ter atenção pois não
podemos aplicar o método diretamente sobre o elemento na passagem do loop, apenas após usá-lo dentro do seletor jQuery:
 JAVASCRIPT
jQuery - Formulários

Na seção anterior tivemos uma aula sobre formulário em que vimos diferentes tipos de campos e como manipular seus valores usando javascript. Vamos agora ver como
fazer isto usando jQuery.
.val()
O método val é utilizado para pegar os definir valores de campos de formulário.
 JAVASCRIPT
jQuery - Formulários

Trabalhando com outros tipos de campos de formulário

Select Box

Para pegar o valor da opção selecionada em select box, podemos usar o método val(), que retorna o valor do atributo value da opção selecionada.
 JAVASCRIPT
jQuery - Formulários

Para pegar o valor da opção selecionada em select box, podemos usar o método val(), que retorna o valor do atributo value da opção selecionada.
Para conseguir pegar o texto dentro da opção, não podemos usar o método text() ou html() pois isto retorna todas as opções que estão no select, e não apenas a opção
selecionada. Mas isto pode ser resolvido com o método find(), que serve para procurar algo dentro de algum elemento.
Neste caso, vamos procurar dentro da select box pelo elemento que esteja com o atributo selected, e então vamos usar o método text() para pegar o texto desta opção.

Agora podemos atualizar o valor selecionado sempre que a opção for alterada usando o método change.
 JAVASCRIPT
jQuery - Formulários

Radio Buttons

A forma de pegar o valor do radio button selecionado é parecida com a do select box. A diferença é que neste caso, as opções que fazem parte deste conjunto de radio
buttons tem o atributo name="genero", portanto buscamos o elemento desta maneira para pegar o value da opção selecionada:

Para pegar o texto da opção selecionada é um pouco mais complicado, porque o campo do tipo rádio não tem conteúdo. Mas podemos resolver isso com um elemento por
fora da opção, neste caso um <span>.
 JAVASCRIPT
jQuery - Formulários

Com isso, basta procurar o elemento selecionado e depois selecionar o elemento pai com o método parent() e pegar o seu texto.

Agora podemos atualizar sempre que a opção for alterada:

 JAVASCRIPT
jQuery - Formulários

CheckBoxes

A forma de pegar os valor selecionados de checkboxes é parecida com a dos radio buttons. Mas vamos lembrar que no caso dos checkboxes, várias opções podem ser
selecionadas ao mesmo tempo, portando temos que trabalhar com um array.
 JAVASCRIPT
jQuery - Manipulação de classes CSS

No início desta seção, vimos como podemos manipular as propriedades CSS usando o método css:

Vimos também que a ação de esconder um elemento pode ainda ser simplificada, usando o método hide. Vamos falar mais sobre este método na aula sobre efeitos
Vamos conhecer agora outros métodos muito úteis para trabalharmos com o CSS dos elementos por meio das classes.
 JAVASCRIPT
jQuery - Manipulação de classes CSS

addClass(), removeClass(), toggleClass()

O método css funciona bem quando são poucas as propriedades que queremos alterar, porém quando a complexidade dos estilos aumenta, é melhor trabalhar
diretamente com classes, especialmente porque desta maneira conseguimos alternar os estilos. Vamos mudar completamente a apresentação do parágrafo abaixo usando
uma classe.
 JAVASCRIPT
jQuery - Eventos

Os eventos em JQuery, conforme mostrado na última Evento Descrição Evento em Vanilla JS

aula, pouco diferem dos eventos Javascript, tendo click Clique em um elemento onclick
apenas pequenas diferenças de nome e na sintaxe.
dbclick Duplo clique em um elemento ondbclick
Vejamos na tabela ao lado alguns exemplos.
mouseenter Cursor sobre o elemento onmouseover

mouseleave Cursor deixa de estar sobre um elemento onmouseout

keypress e keydown Alguma tecla é pressionada onkeypress e onkeydown

keyup Alguma tecla é solta onkeyup

change Alguma mudança em um campo de formulário onchange

focus Algum campo de formulário é selecionado onfocus

blur Saída do campo de formulário que estava selecionado onblur

load ou ready A página é carregada onload

resize A janela do browser é redimensionada onresize

scroll A barra de rolagem é acionada (subir e descer a página) onscroll

 JAVASCRIPT
jQuery - Eventos

Sintaxe dos eventos jQuery

O evento Ready
Um evento muito importante em desenvolvimento web, é o evento ready. Este evento acontece sempre que a página é completamente carregada. Se colocarmos todo o
nosso código dentro deste evento, evitamos por exemplo realizar uma função em um elemento que ainda não foi carregado, o que geraria um erro.
 JAVASCRIPT
jQuery - Eventos

A partir de agora, vamos sempre garantir o carregamento total da página com o evento ready antes de executar nosso código. Porém, em jQuery, foi criada uma maneira
ainda mais fácil de usar este evento:

Esta forma não é muito intuitiva, pois não há o nome do evento, mas é bem conhecida por desenvolvedores e é a forma mais amplamente usada em páginas que utilizam
jQuery.
O método On
O método on é uma maneira alternativa de se trabalhar com os eventos.
 JAVASCRIPT
jQuery - Eventos

A princípio parece não fazer muito sentido usar o método on, já que estamos simplesmente adicionando mais código para fazer a mesma coisa. Mas a vantagem do
método on é que vários eventos podem ser definidos ao mesmo tempo para um elemento.

Note que o que é passado como argumento do método On é um objeto. Este objeto tem os nomes dos eventos nas chaves e as funções nos valores.
 JAVASCRIPT
jQuery - Eventos
Desafio
Vamos agora a um pequeno desafio para começarmos a nos familiarizar com a sintaxe do jQuery. Abaixo há um input com o id nome. Ao lado há um botão com id
confirmar que está escondido (display: none).
Quando algo for digitado no campo de nome, mostre o botão confirmar. Atenção pois se o campo estiver vazio, o botão deve ser escondido novamente.
 JAVASCRIPT
jQuery - Efeitos

Na aula sobre a sintaxe do jQuery, vimos que podemos obter os efeitos desejados com menos linhas de código em relação ao Vanilla Javascript. Como exemplo, vimos o
método .hide(), que pode substituir a ação .css("display", "none").
Esta é mais uma vantagem de se usar a biblioteca jQuery. Além deste exemplo, há diversos outros efeitos que facilitam muito a vida dos desenvolvedores, conforme
veremos a seguir. Antes vamos entender algo fundamental sobre efeitos: os seus parâmetros.
Parâmetros de efeitos: tempo e função call-back

Se usarmos o método hide sem nenhum argumento, como no exemplo mostrado acima, o efeito funcionará sem problemas. Mas podemos adicionalmente, definir o tempo
e uma ação que será executada quando o efeito terminar. O sintaxe é:
 JAVASCRIPT
jQuery - Efeitos

Portanto, como argumento do método hide(), podemos passar a velocidade em milisegundos que o efeito demorará para acontecer e uma função callback.
Ainda vamos abordar com mais detalhes as funções callback na próxima seção do curso, mas basicamente elas são funções que são executadas depois que função
principal terminar.
Para entender o funcionamento da função callback como parâmetro, no exemplo abaixo vamos usar o método hide() para esconder o botão de id "botao-esconder" quando
ele for clicado, em um tempo total de 2 segundos. Depois vamos mostrar o elemento de id "texto-escondido" usando o método show().
 JAVASCRIPT
jQuery - Efeitos

Note que o texto só aparece depois que o efeito hide termina. Caso tivéssemos usado a função em seguida da anterior, sem o recurso do callback, o texto apareceria
antes do efeito terminar. Faça o teste abaixo:

Isto acontece porque Javascript é uma linguagem assíncrona, o que significa que vários comandos podem ser executados ao mesmo tempo, fazendo que o comando
show() seja executado antes que o comando hide() termine. Vamos falar sobre isso com mais detalhes na aula sobre funções callback.
 JAVASCRIPT
jQuery - Efeitos

hide(), show() e toggle()

Adicionalmente aos métodos hide e show, podemos usar o toggle para alternar entre os dois, o que pode ser extremamente útil em determinadas situações.

No exemplo acima, usamos o método toggle para esconder e mostrar a caixa de texto. Para melhorar a usabilidade, foi criada uma classe chamada "flip" que gira a seta
em 180 graus, para demonstrar as ações de abrir e fechar. Com o método toggleClass() conseguimos adicionar e remover esta classe. Note que obtivemos o efeito
desejado sem nunca precisar testar se a caixa está ou não aberta, algo que teria que ser feito em Vanilla Javascript.
 JAVASCRIPT
jQuery - Efeitos

slideUp(), slideDown() e slideToggle()

Um efeito também interessante é o de deslizar para cima e para baixo, que pode ser feito com o método slideToggle(). Este método alterna entre os métodos slideUp() e
slideDown().
 JAVASCRIPT
jQuery - Efeitos

fadeIn(), fadeOut(), fadeToggle() e fadeTo()

Outra opção é usar efeitos de fade, que mexem primeiro com a opacidade do elemento e depois com o display.

Note que neste exemplo, primeiro ocorre o fadeOut, que é a opacidade indo de 1 até 0, depois ocorre o display: none, no caso de desaparecer. No caso de aparecer,
primeiro ocorre o display: initial, depois a opacidade vai de 0 a 1;
O método fadeTo() serve apenas mover a opacidade para algum valor específico entre 0 e 1, não ocorrendo mudanças no estado da propriedade display, o que não serve
para o nosso exemplo mas poderia ser usado em outros casos. Este método precisa de dois argumentos, o tempo e o valor da opacidade.

Perceba que os resultados que tivemos com os métodos show/hide, slide e fade foram parecidos, mas com algumas diferenças sutis. Portanto faça testes antes de decidir
qual o melhor para o seu projeto.
** A velocidade de um efeito jQuery também pode ser definida com as keywords "slow" e "fast", que representam 600ms e 200ms respectivamente. Quando a
velocidade não é informada, utiliza-se o valor padrão de 400ms.
 JAVASCRIPT
jQuery - Animate

Não última aula falamos sobre alguns métodos jQuery que servem para fazer efeitos e animações. Além deles, temos também a opção de usar o método animate. Em
relação aos efeitos mostrados na última aula, este método precisa de um pouco mais de código, mas oferece mais versatilidade, já que nos possibilita alterar outras
propriedades CSS.

O primeiro argumento passado neste método é um objeto composto de propriedades CSS e valores, portanto podemos mudar várias propriedades ao mesmo tempo. Note
também que podemos usar o operador incremental nos valores das propriedades.
 JAVASCRIPT
jQuery - Animate

No exemplo dado acima, as duas propriedades (height e width) são alteradas ao mesmo tempo. Para fazer uma de cada vez com velocidades específicas, não precisamos
necessariamente usar a função callback, isto porque métodos animate usados em sequência, esperam automaticamente o anterior terminar para serem executados.
Cuidado pois apenas o método animate possui esta funcionalidade de "fila".

Importante:
Quase todas as propriedades CSS podem ser animadas, com exceção das cores.As propriedades CSS que possuem traço no nome devem ser escritas no formato camel
case. Por exemplo, padding-left deve ser escrita como paddingLeft.
 JAVASCRIPT
jQuery - Métodos em cadeia

Outra grande vantagem obtida com o jQuery é o uso de métodos em cadeia repetindo-se a notação com ponto. Isto faz com que seja possível realizar vários métodos no
mesmo objeto com apenas um comando.
No exemplo da última aula, em que fizemos dois animates em fila, não precisávamos ter selecionado o elemento duas vezes, bastava usar os métodos em cadeia. Isto
reduz o código e melhora a performance.
 JAVASCRIPT
jQuery - Métodos em cadeia

Note que no exemplo acima, a cor foi alterada sem respeitar a fila, pois como foi dito, apenas o método animate possui esta funcionalidade. Para alterar a cor após a
última animação, podemos fazer isto com um callback no último animate da fila.

Desta maneira perde-se a vantagem que temos com os métodos em cadeia, mas é um recurso que pode ser usado caso necessário.
 JAVASCRIPT
jQuery - Métodos em cadeia

Melhorando a visualização dos métodos em cadeia

A utilização de muitos métodos em cadeia pode gerar uma certa confusão no código, principalmente com velocidades e funções callback sendo usadas. Para melhorar a
organização e visualização do código, podemos pular linhas entre os métodos e ajustar a indentação conforme nos seja mais conveniente.
 JAVASCRIPT

Folha de
o
Exercícios n 05