LPII_Aula_7-JQuery.pdf

JavaScript e Ajax com jQuery
Disciplina: Linguagem de Programação II
Profa. Gabriela Mota

Agenda
 Introdução ao jQuery
 Revisão de JavaScript
 Revisão de Document Object Model (DOM)
 Preparando o Ambiente
 Seletores jQuery
 Manipulando CSS
 Manipulando Conteúdo
 Eventos
 Animação
 Funções jQuery
 Ajax
 Formulários

Por que usar jQuery?
jQuery é uma camada de abstração
Use jQuery porque...
... é fácil
... é produtivo
... browsers são incompatíveis
... seus usuários utilizam browsers antigos

jQuery não vai resolver todos os seus problemas
 Você ainda precisa de JavaScript
 jQuery é pesado (comparado a JS puro)
 Construa agora, melhore depois

Criando variáveis
Dê nome aos dados
var titulo = “jQuery na Prática”;
 Palavra reservada: var
 Nomes de variáveis normalmente em snake_case
 Linha termina em ponto e vírgula ( ; )

Variáveis e dados
• Tipagem fraca, dinâmica e implícita
var numero = 100;
(int)
(string)
var quantidade = 5.7;
(float)
var erro = true;
(boolean)

Funções
function soma (num1, num2) {
var resultado;
resultado = num1 + num2;
return resultado;
}
• Palavra reservada: function
• Nomes de funções normalmente em camelCase
• Linha termina em ponto e vírgula ( ; )

Funções globais do JavaScript
alert(“Olá, mundo!”);
void
var resposta = confirm(“Confirmar exclusão do registro?”);
Retorna boolean
var idade = prompt(“Informe sua idade:”);
Retorna string

Funções de string
titulo.toLowerCase();  “jquery na prática”
titulo.toUpperCase();  “JQUERY NA PRÁTICA”
titulo.charAt(2);  “u”
titulo.replace(“a”, “4”);  “jQuery n4 Prátic4”
titulo.split(“ ”);  [“jQuery”, “na”, “Prática”]

Operações numéricas
10 + 5;  15
10 / 2;  5
parseInt(“10 reais”);  10
var num = 10;
num.toString();  “10”

Arrays
var frutas = [“maçã”, “uva”, “abacaxi”];
(Inicializa um array na variável frutas)
frutas[2];  “abacaxi”
(Retorna a posição 2)
frutas.length;  3
(Retorna o tamanho da lista)
frutas.reverse();  [“abacaxi”, “uva”, “maçã”]
(Retorna a lista em ordem inversa)

Revisão de Document Object Model (DOM)

DOM
<html>
</head>
<title>jQuery na Prática</title>
</head>
<body>
<h1 id="titulo">Aula de jQuery</h1>
<p class="autor">Gabriela Mota</p>
<ul>
<li>JS</li>
<li>DOM</li>
<li>jQuery</li>
</ul>
<p id="rodape">https://portal.ifba.edu.br</p>
</body>
</html>

DOM
html
head body
title h1#titulo p.autor ul
li
li
li
jQuery na
Prática
Aula de
jQuery
Gabriela
Mota
JS DOM jQuery
p#rodape
https://portal.
ifba.edu.br

Jquery - Preparando o Ambiente

Carregando jQuery
 Referenciar o local onde foi baixado
 <script type=“text/javascript” src=“jquery-3.6.4.min.js”></script>
 Ou referenciar uma fonte online:
 <script src=“https://code.jquery.com/jquery-3.6.4.min.js”></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
 Ou qualquer outro Content Delivery Network (CDN)

Verificando se o jQuery está carregado
<script>
console.log(jQuery);
//ou
alert(jQuery);
</script>
jQuery;  ReferenceError: jQuery is not defined
(jQuery não está carregado)
jQuery;  function (e,t){return new v.fn.init(e,t,n)}
(Pronto para começar!)

jQuery
$(“h1”);
(Nome do elemento)
$(“h1”).text(); -> mostra o texto, equivale a innerHTML
DOM
html
body
h1  Aula de jQuery
p.autor  Gabriela Mota
p#rodape  https://portal.ifba.edu.br
Seletores jQuery

Seletores jQuery
jQuery
$(“p”);
(Nome do elemento)
DOM
html
body

Seletores jQuery
jQuery
$(“p.autor”);
(Elemento + . + Classe)
DOM
html
body

Seletores jQuery
jQuery
$(“.autor”);
(Somente a classe)
DOM
html
body

Seletores jQuery
jQuery
$(“p#rodape”);
(Elemento + # + Id)
DOM
html
body

Resultado da Seleção
jQuery
$(“p”);
DOM
JavaScript
[“<p class=‘autor’> Gabriela Mota </p>”,
“<p id=‘rodape’> https://portal.ifba.edu.br </p>”]

Resultado da Seleção
jQuery
$(“h1, p#rodape”); $(“h1”, “p#rodape”);
DOM
h1  jQuery na Prática
JavaScript
[“<h1>Gabriela Mota</h1>”,
“<p id=‘rodape’> https://portal.ifba.edu.br </p>”]
Errado!

Espaço em branco
$(“p#rodape”);
Elemento p com id rodape
$(“p #rodape”);
Elemento com id rodape dentro do elemento p

Selecionando atributos
$(“input”);
// Todos inputs do DOM
$(“input[type=‘text’]”);
// Todos inputs do tipo text
$(“input[type=‘text’][name=‘email’]”);
// Selecione por mais de um atributo
$(“p[id=‘rodape’]”); ou $(“p#rodape”);
$(“p[class=‘autor’]”); ou $(“p.autor”);

Seletores css também são válidos
<i class=“icon-ok”></i>
<i class=“icon-cancelar”></i>
$(“i[class^=‘icon-’]”);
// Todos elementos i que a classe começa com “icon-”
$(“i[class$=‘ok’]”);
// Todos elementos i que a classe termina com “ok”
$(“i[class*=‘icon’]”);
// Todos elementos i que a classe possua “icon”

Filtros de seleção
Filtros baseados no index do array de retorno da seleção
$(“p:first”); // primeiro p da seleção
$(“p:last”); // último p da seleção
$(“li:eq(2)”); // elemento li com index 2
$(“tr:even”); // todos tr com index par
$(“tr:odd”); // todos tr com index ímpar

Filtros de hierarquia
Filtros baseados no hierarquia do DOM
$(“body div”); // todas as divs dentro do body
$(“body > div”); // todas as divs que estão diretamente abaixo do body
$(“label + input”); // label com input adjacente (deve possuir o mesmo
elemento pai)

Manipulando CSS
<p>Lorem ipsum dolor sit amet</p>
$(”p”).css(”font-size”); // retorna o valor do font-size do
elemento p
$(”p”).css(”font-size”, ”12px”); // define o font-size do
elemento p para 12px

Definindo múltiplos atributos
Utilizando métodos encadeados
$(“p”).css(“font-size”, “24px”)
.css(“font-weight”, “bold”)
.css(“line-height”, “32px”);
Ou um map
$(“p”).css({“font-size”: “24px”,
“font-weight”: “bold”,
“line-height”: “32px”});

Mas... vamos com calma
HTML
Conteúdo
CSS
Apresentação
JavaScript
Interação

Interface CSS
 DOM e CSS comunicam via IDs e Classes
 Use .css() com cautela
 Manipule IDs e Classes
 Mais seguro e manutenível

Manipulando classes
$(“p”).hasClass(“autor”); // retorna true ou false
$(“p”).addClass(“bigger”);
$(“p”).removeClass(“bigger”); // remove a classe passada via parâmetro
$(“p”).removeClass(); // remove todas as classes
$(“p”).toggleClass(“bigger”); // se o elemento tiver a classe bigger,
o jQuery remove. Se não tiver, adiciona

Visibilidade
$(“p.autor”).hide();
[<p class=“autor” style=“display: none”> Gabriela Mota</p>]
$(“p.autor”).show();
[<p class=“autor” style=“display: normal”>Gabriela Mota</p>]
$(“p.autor”).toggle();
Alterna entre hide e show

Template
<html>
<head>
</head>
<body>
<h2>Cronograma</h2>
<ul>
<li>Fundamentos <span class=“js”>JavaScript</span></li>
<li>DOM</li>
<li>jQuery</li>
</ul>
<p>Data: <span class=“data”>15/05</span></p>
<p>Horário: <span class=“hora”> 20:20 às 21:15</span></p>
</body>
</html>

Acessando text e html
• html  Recupera todo conteúdo dentro do elemento selecionado, inclusive as tags HTML
$(“p:first”).html();
[“Data: <span class=‘data’>15/15</span>”]
• text  Recupera todo texto dentro do elemento selecionado, ignorando as tags HTML
$(“p:first”).text();
[“Data: 15/05”]

Definindo text
$(“span.data”).text(“15/05”);
<span class=“data”> 15/05 </span>
Cronograma
• Fundamentos JavaScript
• DOM
• jQuery
Data: 21/01 à 25/01
Horário: 19:00 às 22:40
Cronograma
• DOM
• jQuery
Data: 15/05
Horário: 20:20 às 21:15

Definindo text
$(“span.data”).text(“<u>15/05</u>”);
<span class=“data”><u>15/05</u></span>
Cronograma
• DOM
• jQuery
Data: 21/01 à 25/01
Horário: 19:00 às 22:40
Cronograma
• DOM
• jQuery
Data: <u>15/05</u>
Horário: 20:20 às 21:15

Definindo html
$(“span.data”).html(“<u>15/05</u>”);
<span class=“data”><u>15/05</u></span>
Cronograma
• DOM
• jQuery
Data: 21/01 à 25/01
Horário: 19:00 às 22:40
Cronograma
• DOM
• jQuery
Data: 15/05
Horário: 20:20 às 21:15

Inserindo html no DOM
$(“ul”).append(“<li>Seletores jQuery</li>”);
Insere elemento dentro do final da seleção
$(“ul”).prepend(“<li>Seletores jQuery</li>”);
Insere elemento dentro do inicio da seleção
$(“ul”).before(“<h3>Conteúdo</h3>”);
Insere elemento antes da seleção
$(“ul”).after(“<h3>Data e Hora:</h3>”);
Insere elemento após a seleção

Append
$(“ul”).append(“<li>Seletores jQuery</li>”);
Cronograma
• DOM
• jQuery
• Seletores jQuery
Data: 21/01 à 25/01
Horário: 19:00 às 22:40

Prepend
$(“ul”).prepend(“<li>Seletores jQuery</li>”);
Cronograma
• Seletores jQuery
• DOM
• jQuery
Data: 21/01 à 25/01
Horário: 19:00 às 22:40

Before
$(“ul”).before(“<h3>Conteúdo</h3>”);
Cronograma
Conteúdo
• DOM
• jQuery
Data: 21/01 à 25/01
Horário: 19:00 às 22:40

After
$(“ul”).after(“<h3>Data e Hora:</h3>”);
Cronograma
• DOM
• jQuery
Data e Hora:
Data: 21/01 à 25/01
Horário: 19:00 às 22:40

Como funciona
<html>
<head>
</head>
<body>
<h2>Cronograma</h2>
<ul>
<li>DOM</li>
<li>jQuery</li>
</ul>
<p>Data: <span class=“data”>21/01 à 25/01</span></p>
<p>Horário: <span class=“hora”>19:00 às 22:40</span></p>
</body>
</html>
Possui
handler?
Possui
handler?
Possui
handler?
Possui
handler?

Timing
<html>
<head>
<script src=“jquery.js”></script>
<script>
$(“p”).hide();
</script>
</head>
<body>
<h2>Cronograma</h2>
<ul>
<li>DOM</li>
<li>jQuery</li>
</ul>
<p>Horário: <span class=“hora”> 20:20 às 21:15</span></p>
</body>
</html>

Timing
<html>
<head>
<script>
$(“p”).hide();
</script>  Nenhum parágrafo no documento!
</head>
<body>
<h2>Cronograma</h2>
<ul>
<li>DOM</li>
<li>jQuery</li>
</ul>
<p>Data: <span class=“data”>15/05</span></p>
</body>
</html>  DOM está pronto!

Document Ready
<html>
<head>
<script>
$(document).ready(function () {
$(“p”).hide();
});
</script>
</head>
<body>
<h2>Cronograma</h2>
<ul>
<li>DOM</li>
<li>jQuery</li>
</ul>
</body>
</html>
Documento
está pronto!
Executa o
handler

Eventos de Mouse
$(“p”).click();
//Dispara no evento de click do mouse
$(“p”).dblclick();
//Dispara com click duplo
$(“p”).hover();
//Dispara quando mouse entra e/ou sai do elemento
$(“p”).mousedown();
//Dispara quando o botão do mouse é pressionado

Eventos de Mouse (continuação)
$(“p”).mouseenter();
//Dispara quando o mouse entra no elemento
$(“p”).mouseleave();
//Dispara quando o mouse sai do elemento
$(“p”).mousemove();
//Dispara quando o mouse se move
$(“p”).mouseup();
//Dispara quando ao término do click do mouse

Click
function esconder() {
$(“p”).hide();
}
$(“p”).click(esconder);
Normalmente utilizamos funções anônimas
$(“p”).click(function () {
$(“p”).hide();
});

Hover
.destacar {
background: yellow;
}
$(“p”).hover(function () {
$(this).addClass(“destacar”);
});
Data: 21/01 à 25/05
Horário: 19:00 às 22:40
Data: 21/01 à 25/05

Hover
.destacar {
background: yellow;
}
$(“p”).hover(
function () { $(this).addClass(“destacar”);},
function () { $(this).removeClass(“destacar”);}
);
Data: 21/01 à 25/05
Horário: 19:00 às 22:40
Data: 21/01 à 25/05

Hover
.destacar {
background: yellow;
}
$(“p”).hover(function () {
$(this).toggleClass(“destacar”);
});
Data: 21/01 à 25/05
Horário: 19:00 às 22:40
Data: 21/01 à 25/05

Eventos de Teclado
$(“input”).keydown();
//Dispara ao apertar a tecla
$(“input”).keypress();
//Dispara ao pressionar a tecla
$(“input”).keyup();
//Dispara ao soltar a tecla

Eventos de Formulário
$(“input”).blur();
//Dispara ao input perder o foco
$(“input”).change();
//Dispara quando um valor é alterado
$(“input”).focus();
//Dispara quando um input recebe foco
$(“input”).select();
//Dispara ao selecionar um texto, option, radio
$(“input”).submit();
//Dispara submeter o formulário

Objeto event
$(“body”).keypress(function (event) {
});
event.which; // código númerico da tecla pressionada
event.preventDefault(); // evita a ação padrão do browser
event.stopPropagation(); // evita propagação do evento no DOM

Animações slide
.slideUp([duração][,callback]);
duração
 Tempo da animação em milisegundos
 Default 400 milisegundos
 Aceita parâmetros “slow” (600ms) e “fast” (200ms)
callback
 Função que será executada após o término da animação

slideUp, slideDown e slideToggle
$(“p”).slideUp(“slow”);
$(“p”).slideUp(1000, function () {
alert(“Concluiu a animação!”);
});
$(“p”).slideDown(“fast”);
$(“p”).slideToggle();

Animações fade
 Utiliza os mesmos parâmetros do slide
$(“p”).fadeIn(“slow”);
$(“p”).fadeIn(1000, function () {
alert(“Concluiu a animação!”);
});
$(“p”).fadeOut(“fast”);
$(“p”).fadeToggle();

Adicionando funções customizadas
$.fn.vazio = function () {
var value = $(this).val();
if (value == “”) {
return true;
}
else {
return false;
}
};
$(“input”).vazio();

XMLHttpRequest
 Requisições assíncronas de forma transparente
$.ajax({
url: ‘usuarios.php’,
data: { id: “10”, acao: “editar” },
cache: false,
type: “POST”,
beforeSend: function () {
// execução antes de realizar requisição
},
success: function (data) {
// execução em caso de sucesso
},
error: function () {
// execução em caso de erro
}
complete: function () {
// execução ao terminar requisição
}
});

load
Permite especificar um elemento para receber a resposta e uma função de
callback
$('#resultado').load(‘usuarios.php‘);
// A resposta da requisição à página usuarios.php é inserida dentro do elemento #resultado
$('#resultado').load(‘usuarios.php‘, function () {
// Executa após terminar a requisição
});
$('#resultado').load(‘usuarios.php‘, { id: 10 } function () {
// Executa após terminar a requisição
});

post
$.post(url [,data] [,success(data, textStatus, jqXHR)] [,dataType])
O método post do jQuery corresponde à seguinte implementação:
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
$.post(“login.php”, { usuario: “gbrlamota”, senha: “123456” });
$.post(“login.php”, $(“form”).serialize(), function () {
// Executa callback
});

get
$.get(url [,data] [,success(data, textStatus, jqXHR)] [,dataType])
O método get do jQuery corresponde à seguinte implementação:
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
$.get(“cidades.php”, { uf: “ba” }, function (data) {
$(“select”).html(data);
});

Serializando formulários
<form method=“post” action=“cadastro.php” id=“cadastro”>
Nome: <input type=“text” name=“nome” id=“nome”>
Email: <input type=“text” name=“email” id=“email”>
Cpf: <input type=“text” name=“cpf” id=“cpf”>
<button type=“submit”>Enviar</button>
</form>
$(“#cadastro”).serialize();
Retorna: nome=Gabriela&email=gbrlamota@gmail.com&cpf=123456789012
Gabriela
gbrlamota@gmail.com
123456789012
Nome:
Email:
Cpf:

Serializando em array
$(“#cadastro”).serializeArray();
[
{
name = “nome”,
value = “gabriela”
},
{
name = “email”,
value = “gbrlamota@gmail.com”
},
{
name = “cpf”,
value = “123456789012”
}
]

Atividade com JQuery
 Faça um site no estilo SPA (Single Page Application) sobre um assunto que
você goste
 O site deve ter a seguinte estrutura HTML
 h1 -> Título da página
 section
 h2 -> título da section
 p -> conteúdo da section
 A página deverá ter o seguinte comportamento:
 Inicialmente apenas a primeira section está totalmente visível, as demais terão apenas
o título visível
 Ao clicar sob o título de uma section, seu conteúdo deve ser exibido e o conteúdo da
section que estava ativa se torna invisível.
 Use CSS para estilizar sua página
81 / 41

Atividade com Jquery - exemplo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>Choosing an Apple</h1>
<section>
<h2>Introduction</h2>
<p>This document provides a guide to help with the important task of choosing the correct
Apple.</p>
</section>
<section>
<h2>Criteria</h2>
<p>There are many different criteria to be considered when choosing an Apple — size,
color, firmness, sweetness, tartness... </p>
</section>
</body>
</html>
82 / 41

Referências
 W3Schools jQuery Tutorial
 https://www.w3schools.com/jquery/jquery_get_started.asp
 JQuery Learning Center
 https://learn.jquery.com/
 jQuery API
 https://api.jquery.com/

LPII_Aula_7-JQuery.pdf

Mais conteúdo relacionado

Semelhante a LPII_Aula_7-JQuery.pdf

LPII_Aula_7-JQuery.pdf