Skip to main content

JQuery

Introdução​

Criada em 2006 como ferramente para reduzir a escrita de algumas funções do JavaScript, JQuery é uma biblioteca open source que tem como intuito facilitar o desenvolvimento front-end.

tip

Utilize websites de exercícios (como os que foram recomendados na página JS) para se apronfundar nos conhecimentos JQuery.

Módulo 1: Primeiros Passos​

Instalando o JQuery​

Pode ser utilizado através de um link direto no código HTML: 

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

Também é possível salvar diretamente no código do projeto: 

https://code.jquery.com/jquery-3.5.1.min.js

Sintaxe​

  • $(seletor).ação()
  • $: simbolo de acesso ao JQuery;
  • Seletor: utilizado para encontrar os elementos HTML;
  • Ação: o que deseja realizar

Métodos de inicialização​

  • Estrutura:

estrutura1

  • Equivale a:

estrutura2

SELETORES​

Para encontrar os elementos HTML, o seletor seleciona o elemento de acordo com seu nome.

Por exemplo, para selecionar todos os elementos <p>, utilizamos $("p").

Exemplo:

exemplo1

Visualização do resultado: LINK

Para selecionar #id, utilize: $(#test).

Exemplo:

exemplo2

Para selecionar .class, utilize: $(.test)

Exemplo:

exemplo3

ATRIBUTOS​

Acesse o link para conhecer alguns atributos e seus significados.

EVENTOS​

Os métodos de eventos disparam eventos que acontecem quando o usuário interage com o navegador, como uma forma de manipular o comportamento do(s) elemento(s) selecionado.

Tipo de eventosNome
Eventos de Navegadorscroll()
Eventos de Mouseclick(), dblclick(), hover(), mouseleave(), e mais.
Eventos de Tecladokeypress(), keyup(), keydown()

Sintaxe: $("p").click();

  • COMO UTILIZAR

"click()"

click

"dblclick()"

dblclick

"mouseenter()"

mouseenter

"mouseleave()"

mouseleave

Acesse a tabela de métodos de manipulação de eventos para conhecer todas propriedades e suas funções.

EFEITOS: Básicos​

A biblioteca do JQuery disponibiliza diversas técnicas para a adesão de animações em uma página web.

Documentação

Exemplos:

  • Utilizando métodos "hide()" e "show()"

efeitoExemplo1

Sintaxe:

$(selector).hide(speed, callback);

$(selector).show(speed, callback);
  • O efeito do JQuery será utilizado no valor de velocidade. Resultado final:

efeitoResultado1

  • Utilizando o método "toggle()" (elemento "hidden" passa a ser "shown" e "shown" passa a ser "hidden")

Sintaxe:

$(selector).toggle(speed, callback);
  • Resultado final:

efeitoResultado2

As velocidades também podem ser determinadas como, por exemplo, ("slow") ao invés de números.

Treine os exercícios de "Efeitos JQ".

EFEITOS: Tabela e Valores​

  • TABELA
AplicaçãoSignificadoExemplos
(speed, callback)Determinar um valor (numérico ou não) de velocidade$("p").fadeToggle("slow"); / $("p");fadeToggle(3000);
(speed, opacity, callback)Determinar um valor de velocidade para a duração de um efeito de opacidade$("p").fadeTo("slow", 0.15);
(stopAll, goToEnd)Determinar o método stop()$("p").stop()
callbackDeterminar o parametro callback depois do efeito ter sido aplicadoalert("Aviso após efeito");
  • VALORES
    • Valores relativos: Para determinar um valor relativo, basta utilizar "+=" ou "-=" antes do valor. Exemplo: "height: '+=150px'"
    • Valores pré-definidos: Utilizar "show", "hide" ou "toggle".

EFEITOS: "animate()"​

Sintaxe:

$(selector).animate({params}, speed, callback);

O parametro "{params}" define a propriedade CSS a ser animada.

  • Exemplos:

1)

efeitoResultado3

2)

efeitoResultado4

3) EXEMPLO COM CALLBACK:

efeitoResultado5

JSON e JQuery​

É possível carregar dados de um arquivo ".json" em um documento utilizando o JQuery.

Para importar dados de um arquivo .json, utilize o método $.getJSON(), utilizando o caminho do arquivo json dentro dos parênteses.