Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
06 Introdução à biblioteca jQuery
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
1
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
TECNOLOGIAS WEB
ENGENHARIA DA COMPUTAÇÃO
2018.1
Introdução à biblioteca jQuery
Prof. Me. Joseph Soares Alcântara
2
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
PROGRAMA DA DISCIPLINA
1) Introdução às Tecnologias Web
2) Protocolo HTTP
3) Introdução ao HTML
4) Introdução ao CSS
5) Introdução ao JavaScript
6) Introdução à biblioteca jQuery
7) Introdução ao Bootstrap
8) Metodologias / Modelos de Desenvolvimento
9) Linguagens para web
3
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
INTRODUÇÃO À BIBLIOTECA JQUERY
● Introdução
● Funcionalidades
● Carregamento
● Aplicações
4
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
INTRODUÇÃO
…
5
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
INTRODUÇÃO
● jQuery é uma biblioteca JavaScript desenvolvida para simplificar os scripts client-side que
interagem com o HTML
● Foi lançada em janeiro de 2006 no BarCamp de Nova York por John Resig
● Usada por diversos sites, jQuery é a mais popular das bibliotecas JavaScript
6
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
FUNCIONALIDADES
● Aumenta a compatibilidade entre os navegadores
● Redução de código
● Reutilização de código através de plugins
– Alertify – Alertas mais amigáveis
– jQueryFileUpload – Envio de vários arquivos
– Pickdate – Janela de seleção de data como calendário
– Window – Abertura de várias janelas ao longo da página
– Charts.js – Criação de gráficos
– JqueryCountDown – Criação de contador regressivo
7
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
FUNCIONALIDADES
● Trabalha com AJAX
– POST
– GET
● Implementação segura de recursos do CSS
8
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
CARREGANDO A BIBLIOTECA
● Antes do uso é necessário carregar a biblioteca
● Todo JavaScript pode ser armazenado em um arquivo secundário e ser carregado na pagina
principal
– O jQuery pode ser salvo em um diretório especifico dentro de um site ou pode fazer referencia
a um arquivo localizado em algum servidor na web
– Fazer referência em algum servidor na web pode ser mais rápido, pois a probabilidade de
usuários já terem carregado a biblioteca em outros sites pode tornar o carregamento do seu site
mais rápido
● http://jquery.com/download/
9
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
CARREGANDO A BIBLIOTECA
10
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
CARREGANDO A BIBLIOTECA
11
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
CARREGANDO A BIBLIOTECA
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery na prática</title>
<script type="text/javascript"
src="js/jquery-3.3.1.min.js">
</script>
<script type="text/javascript"
src="js/script.js"></script>
</head>
<body>
</body>
</html>
12
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
CARREGANDO A BIBLIOTECA
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery na prática</title>
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script type="text/javascript"
src="js/script.js"></script>
</head>
<body>
</body>
</html>
13
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
POSICIONAMENTO ALTERNATIVO DA BIBLIOTECA
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery na prática</title>
</head>
<body>
<!-- conteúdo aqui... -->
<script type="text/javascript"
src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript"
src="js/script.js"></script>
</body>
</html>
14
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
JQUERY É JAVASCRIPT
● Todos os comandos básicos JavaScript são iguais para jQuery
● Exemplo:
– Declaração de variáveis
– Estruturas condicionais
– Estruturas de repetição
– Vetores
– Matrizes
● Diversas funções são executadas de forma mais conveniente
15
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
EXECUTANDO APÓS O DOCUMENTO TER SIDO CARREGADO
Para garantir que o código seja executado depois que o navegador terminar de carregar o
documento, muitos programadores JavaScript envolvem seu código em uma função
onload:
window.onload = function() {
alert('Bem-vindo!');
}
16
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
PROBLEMA!
● Infelizmente, o código não é executado até que todas as imagens tenham terminado o
carregamento, incluindo banners. Para executar o código assim que o documento estiver
pronto para ser manipulado, o jQuery possui uma instrução conhecida como o evento
ready:
jQuery( document ).ready(function() {
alert(‘Bem-vindo!’);
});
17
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
ALIAS
● A biblioteca jQuery expõe seus métodos e propriedades através de duas propriedades do
objeto window chamado jQuery e $
● $ é simplesmente um alias para jQuery e é frequentemente empregado porque é mais curto
e rápido de escrever
$( document ).ready(function() {
alert(‘Bem-vindo!’);
});
18
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
EXEMPLOS
…
19
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
ESTRUTURA BÁSICA
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery na prática</title>
</head>
<body>
<!-- conteúdo aqui... -->
<script type="text/javascript"
src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript"
src="js/script.js"></script>
</body>
</html>
20
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
JQUERY
● Dentro do evento ready, você pode adicionar um manipulador de cliques a um link
$( document ).ready(function() {
$( “a” ).click( function ( evento ) {
alert( “Obrigado por nos visitar!” );
} );
});
● Adicione no corpo do HTML
<a href=”http://jquery.com/”>Link</a>
21
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
JQUERY
● Para alguns eventos, é possível evitar o comportamento padrão, chamando
evento.preventDefault()
$( document ).ready(function() {
$( “a” ).click( function ( evento ) {
alert( “Obrigado por nos visitar!” );
evento.preventDefault();
} );
});
● Adicione no corpo do HTML
<a href=”http://jquery.com/”>Link</a>
22
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
EVENTOS
● Lista de eventos
– http://api.jquery.com/category/events/
23
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
ADICIONANDO/REMOVENDO CLASSE EM UM ELEMENTO
● Criar o arquivo estilo.css e adicionar a um diretório específico
24
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
ADICIONANDO/REMOVENDO CLASSE EM UM ELEMENTO
● No cabeçalho do arquivo index.html, adicione a linha
<link rel="stylesheet" href="css/estilo.css">
25
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
ADICIONANDO/REMOVENDO CLASSE EM UM ELEMENTO
● No arquivo estilo.css adicione a classe teste
.teste {
font-weight: bold;
}
26
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQue
ry
ADICIONANDO/REMOVENDO CLASSE EM UM ELEMENTO
● No arquivo script.js, dentro do evento ready, adicione o seguinte código
$( document ).ready(function() {
// adiciona a classe em todos os links
$("a").addClass('teste');
});
27
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
ADICIONANDO/REMOVENDO CLASSE EM UM ELEMENTO
● No arquivo script.js, dentro do evento ready, adicione o seguinte código
$( document ).ready(function() {
// adiciona a classe em todos os links
$("a").addClass('teste');
// remove a classe de todos os links
$("a").removeClass('teste');
});
28
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
Exemplo com lista de links
29
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
HTML
<p id="texto" class="preta">
Texto de cor <span id="cor">preta</span>
</p>
<ul>
<li><a href="#">preta</a></li>
<li><a href="#">vermelha</a></li>
<li><a href="#">verde</a></li>
<li><a href="#">azul</a></li>
<li><a href="#">branca</a></li>
</ul>
30
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
CSS
.preta { color: black; }
.vermelha { color: red; }
.verde { color: green; }
.azul { color: blue; }
.branca { color: white; }
31
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
JAVASCRIPT
$( document ).ready(function() {
$( "a" ).click(function( event ) {
event.preventDefault();
$("#texto").removeClass();
var cor = $(this).text();
$("#texto").addClass(cor);
$("#texto #cor").text(cor);
});
});
32
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
Restringindo links que são afetados
33
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
HTML
<p id="texto" class="preta">
Texto de cor <span id="cor">preta</span>
</p>
<ul>
<li><a class="comando" href="#">preta</a></li>
<li><a class="comando" href="#">vermelha</a></li>
<li><a class="comando" href="#">verde</a></li>
<li><a class="comando" href="#">azul</a></li>
<li><a class="comando" href="#">branca</a></li>
</ul>
34
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
CSS
.preta { color: black; }
.vermelha { color: red; }
.verde { color: green; }
.azul { color: blue; }
.branca { color: white; }
Não há alterações
35
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
JAVASCRIPT
$( document ).ready(function() {
$( "a.comando" ).click(function( event ) {
event.preventDefault();
$("#texto").removeClass();
var cor = $(this).text();
$("#texto").addClass(cor);
$("#texto #cor").text(cor);
});
...
});
36
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
Efeitos de exibir/ocultar elemento
37
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
HTML
<p id="texto" class="preta">
Texto de cor <span id="cor">preta</span>
</p>
...
<a href="#" id="esconde">Esconde</a>
<a href="#" id="exibe">Exibe</a>
Se no JavaScript não houver a restrição (por classe) de links,
todos os demais links seriam afetados pelo evento
38
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
JAVASCRIPT
$( document ).ready(function() {
...
$( "a#esconde" ).click(function( e ) {
e.preventDefault();
$("#texto").hide("slow");
});
$( "a#exibe" ).click(function( e ) {
e.preventDefault();
$("#texto").show("slow");
});
});
39
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
Adicionando novos elementos no html
40
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
HTML
<form class="" action="index.html" method="post">
<label for="nome">Nome</label>
<input type="text" name="nome" value="">
<h2>Telefone(s)</h2>
<div class="telefones"></div>
<button id="mais" type="button" name="b1">+</button>
<button id="menos" type="button" name="b2">-</button>
</form>
41
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
JAVASCRIPT
$( document ).ready(function() {
$("#mais").click(function(e) {
e.preventDefault();
var filhos = $("div.telefones").children().length;
filhos++;
$("div.telefones").append('<div><label for="telefone'
+ filhos + '">Telefone ' + filhos
+ '</label><input type="text" name="telefone'
+ filhos + '" value=""></div>');
});
$("#menos").click(function(e) {
e.preventDefault();
$("div.telefones").children().last().remove();
});
});
42
In
tro
du
çã
o
à
bi
bl
io
te
ca
jQ
ue
ry
JOSEPH SOARES ALCÂNTARA
ENGENHARIA DA COMPUTAÇÃO
2018.1
josephsoaresalcantara@gmail.com
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
Slide 13
Slide 14
Slide 15
Slide 16
Slide 17
Slide 18
Slide 19
Slide 20
Slide 21
Slide 22
Slide 23
Slide 24
Slide 25
Slide 26
Slide 27
Slide 28
Slide 29
Slide 30
Slide 31
Slide 32
Slide 33
Slide 34
Slide 35
Slide 36
Slide 37
Slide 38
Slide 39
Slide 40
Slide 41
Slide 42Materiais relacionados
17 pág.
17 pág.
Perguntas relacionadas
Compartilhar