04 Introdução ao jquery

Prévia do material em texto

Introdução	
ao	JQuery
Aliandro Lima
aliandro.lima@estacio.br
Tecnologias	para	a	Web
JQuery
• É uma biblioteca Javascript:
– A mais popular antes da “explosão” das novas bibliotecas 
JS;
• Simplifica o uso do Javascript vanilla;
• É fácil de aprender;
JQuery
• Construída com o web developer e o web designer
em mente;
• Permite fazer tudo o que fazemos com o javascript, 
porém, com maior simplicidade;
• Usa a filosofia: “write less, do more”:
– Atividades comuns que requerem algumas linhas de 
código são encapsuladas em métodos, chamados 
através de uma única linha de código;
Principais	características
• Manipulação	do	HTML/DOM;
• Manipulação	do	CSS;
• Métodos	para	eventos	do	HTML;
• Animações	e	efeitos	visuais;
• AJAX;
• Métodos	utilitários;
• Permite	o	uso	de	plugins...
4
Instalação
• Obtendo	o	JQuery:
– Download	a	partir	de	jquery.com,	incluindo	em	
sua	aplicação;	ou
– Referenciando	o	script	JQuery	a	partir	de	uma	
CDN	(Content	Delivery	Network);
5
Versões	disponíveis
• Versão	production:
– Minificada,	comprimida,	ilegível;
• Versão	development:
– Não-comprimida,	legível;
• Evolução:
– JQuery	1.x:	dá	suporte	a	browsers	antigos,	como	o	
IE	6,	7	e	8;
– JQuery	2+:	oferece	a	mesma	API,	mas	não	dá	
suporte	a	browsers	que	não	deveriam	existir	J
6
Versão	usada	nesta	disciplinas
• Para	esta	disciplina,	conforme	apresentado	no	
screenshot de	instalação,	iremos	usar	a	versão	
3.2.1;
• Versão	mais	recente	em	09/2017;
• Optaremos	pela	versão	minificada	
(production),	mas	o	aluno	pode	usar	a	que	
preferir;
7
Primeiro	Exemplo
• Iremos	criar	um	script	Javascript	chamado	
script.js	e	referenciá-lo	em	nossa	página;
• Teremos	algo	semelhante	à	imagem	abaixo:
8
Usando	o	JQuery
• Para	iniciar	o	uso	do	JQuery,	basicamente,	
precisamos	programar	dentro	da	seguinte	
função:
9
Prática	Sugerida
• Tente	realizar	os	seguintes	experimentos:
– Remover	a	linha	de	script	que	declara	o	uso	do	
JQuery:
• O	exemplo	continua	funcionando?
– Recolocar	a	linha	que	declara	o	uso	do	JQuery,	
mas	apontando	para	uma	CDN	e	com	sua	conexão	
de	rede	desabilitada;
• Voltou	a	funcionar?
– Reconecte	sua	Internet:
• E	agora?
10
Sintaxe	do	JQuery
• A	ideia	do	JQuery consiste	em	começar	a	
executar	quando	o	document estiver	
totalmente	carregado;
• Em	Javascript puro,	é	preciso	escutar	o	evento	
“DOMContentLoaded”;
• Na	verdade,	seria	necessário	realizar	outras	
verificações,	conforme	mostrado	no	próximo	
slide:
11
Document.ready
• O	JQuery	simplifica	isso	em	um	document.ready;
12
...
Sintaxe	do	JQuery
• Sintaxe	original	para	se	trabalhar	com	o	
JQuery:
• Esta	sintaxe	indica	que	quando	a	página	
(documento)	estiver	pronta	(terminou	de	
carregar),	podemos	executar	a	função	
definida;
13
Sintaxe	do	JQuery
• A	equipe	que	trabalha	no	JQuery criou	uma	
sintaxe	alternativa,	menor,	e	que	faz	a	mesma	
coisa:
• Esta	sintaxe	assume	que	estamos	usando	o	
document.ready:
– é	menos	legível	e	mais	enxuta;
– é	a	forma	recomendada	(a	anterior	e	outras	existentes	
estão	deprecated,	apesar	de	ainda	estarem	
funcionando	na	versão	3);
14
O	que	está	acontecendo,	de	fato?
• Quando	importamos	a	biblioteca	JQuery,	esta	
expõe	um	objeto	dentro	do	global	object	
(window):
• Todos	os	métodos	da	API	estão	expostos	
através	deste	objeto;
• Existe	um	outro	objeto,	chamado	“$”,	que	é	
um	alias para	o	objeto	jQuery,	apenas	para	
simplificar	a	sintaxe;
15
O	que	está	acontecendo,	de	fato?
• Uma	vez	que	estamos	falando	de	variáveis	
globais	(associadas	ao	objeto	window),	
podemos	referenciá-las	sem	mencionar	o	
window;
• Portanto,	as	quatro	construções	abaixo	são	
idênticas:
16
Sintaxe	do	JQuery
• A	sintaxe	usada	pelo	JQuery,	basicamente,	
considera:
– O	“$”	oferece	acesso	ao	JQuery;
– O	(seletor)	é	usado	para	buscar	elementos	HTML;
– A	acao()	será	executada	nos	elementos	
selecionados;
17
Sintaxe	do	JQuery
• Exemplos:
– $(this).hide()	– esconde	o	elemento	corrente;
– $("p").hide()	– esconde	todos	os	elementos	<p>;
– $(".test").hide()	– esconde	todos	os	elementos	da	
class=“test”;	
– $("#test").hide()	- esconde	o	elemento	com	
id=“test”;	
• Note	que	o	JQuery	usa	a	mesma	sintaxe	do	
CSS	para	selecionar	elementos;
18
Usando	o	método	hide()
19
Criando	um	listener	para	o	“click”
20
Alterando	CSS
21
Usando	o	hover()
22
Demais	Eventos
• dblclick():	chamado quando um	elemento
HTML	é clicado através de	um	duplo-clique;
• mouseenter():	chamado quando o	ponteiro
do	mouse	passa por cima de	um	elemento;
• mouseleave():	chamado quando o	ponteiro do	
mouse	sai de	cima de	um	elemento;
– hover()	permite simular o	mouseenter()	e	
mouseleave()	em uma única chamada;
23
Demais	Eventos
• mousedown():	chamado quando algum dos	botões do	
mouse	clica sobre um	elemento,	enquanto o	botão
está sendo clicado;
• mouseup():	chamado quando algum dos	botões do	
mouse,	que	estava clicado em cima do	elemento,	deixa
de	ser clicado;
• focus():	chamado quando algum elemento de	input	
ganha o	foco;
• blur():	chamado quando algum elemento de	input	
perde o	foco;
24
Exercício
• Codifique	um	formulário	com	três	campos	de	
entrada:
– Nome:
– Sobrenome:
– Idade;
• Cada	campo	de	entrada,	ao	ganhar	o	foco,	
deve	ficar	com	a	borda	verde.	Ao	perder	o	
foco,	deve	voltar	a	ter	a	borda	como	era	antes;
25
Método	on()
• O	método	on()	permite	associar	um	ou	mais	
event	handlers	a	um	evento:
26
Efeitos
• hide()	e	show():
– Permitem	esconder	e	mostrar	elementos;
– é	possível	indicar	a	velocidade	(em	milissegundos)	
em	que	um	elemento	será	escondido/mostrado;
27
Efeitos
• toogle():
– permite	chavear	entre	hide()	e	show():
28
Efeitos	
• Fade:
29