jQuery e CSS manipulação

Eduardo Mendes (edumendes@gmail.com)
jQuery e CSS
1

Eduardo Mendes (edumendes@gmail.com)2
Separation of Concerns
Descrição
do Conteúdo
Apresentação 
do Conteúdo
Controle do 
comportamento
deste Conteúdo

jQuery e CSS
.css(<attr>, <value>)
$(this).css("font-size", “10px”).css(“border”, “1px solid");
.css({<attr>:<value>, <attr>:<value>,})
$(this).css({“font-size”:”10px”,”border" : "1px solid”});

jQuery e CSS
.show()
$(this).css("display", “block”);
.hide()
$(this).css("display", “none”);

jQuery e CSS
.addClass() .removeClass()
.toggleClas()

jQuery e CSS
$(this).animate({'top': '0px'});
$(this).hasClass('nomeDaClasse');

Ajax Básico
7

Revelar conteúdo

Código sem Ajax
<li class="bebida promocao" data-preco="15.00">
<h3>Lemon Breeze</h3>
<p>R$ 15.00</p>
<button>Veja a Receita</button>
<div class="receita">
<p>Um drinks mais que … </p>
<a href="#" class="expandir">Veja a bebida</a>
<img src="imagens/yellow.gif"/>
</div>
</li>
index.html
$('.bebidas’).on(‘click','button', function () {
$(this).closest(".bebida").find(".receita").slideDown();
});
$('.bebidas').on('click', ‘.expandir', function() {
$(this).closest(".bebida").find("img").show();
});
application.js
apresenta o elemento oculto
quando é clicado
exibe a imagem
quando é clicado
QUal seria a forma
de apresentar este conteúdo
de maneira dinâmica?

$.ajax(url [, settings])
10
url
obrigatória
settings
conﬁgurações opcionais
conjunto chave/valor que conﬁgura
a requisição AJAX
• success: só executa quando 
a chamada a url funciona 
corretamente
executa uma requisição
HTTP assíncrona

Código sem Ajax
<li class="bebida promocao" data-preco="15.00">
<p>R$ 15.00</p>
<button>Veja a Receita</button>
<div class="receita">
!
</div>
</li>
index.html

Utilizando uma requisição AJAX
$('.bebidas').on('click', 'button', function () {
!
!
!
!
!
});
$.ajax('receita.html', {
success: function(response) {
$(’.receita').html(response).slideDown();
}
});
<p>Um drinks …</p>
<a href="#" class="expandir">Veja a bebida</a>
application.js
receita.html
só executa quando
a resposta retorna
com sucesso
resposta, que não
é uma página HMTL
completa

$.get(url, success)
13
url
obrigatória
success
função a ser executada
quando a resposta for
retornada
HTTP assíncrona via HTTP GET

Atalho com $.get
!
!
!
!
!
});
}
});
!
!
!
});
$.get('receita.html', function(response) {
});
equivalentes

Como enviar parâmetros?
$(".receita").html(response).slideDown();
}
});
sempre recupera o mesmo arquivo
Como criar um site em que a requisição levasse em conta o ID da receita?
receita.html?id=123

$.ajax(‘receita.html?id=123', {
}
});
sempre recupera o mesmo arquivo
$.ajax(‘receita.html’, {
},
data: {“id”: 123}
});

$.ajax(‘receita.html’, {
},
});
<div class=“receita” data-id=“123”>
data: {id: $(“.receita”).data("id") }

18
• success: só executa quando 
a chamada a url funciona 
corretamente
HTTP assíncrona
• error: executa quando ocorre 
um timeout, erro no servidor,  
ou a requisição é abortada
• timeout: indica em ms quanto a 
requisição deve deve esperar
• beforeSend: executa antes da 
requisição ajax
• complete: executa após a execução 
da requisição com sucesso ou erro

Manipulando requisições com falha
$.ajax('http://www.fa7.edu.br/pos-si/receita.html', {
}
!
!
!
});
});
,
error: function(request, errorType, errorMessage) {
alert('Error: ' + errorType + ', mensagem: ' + errorMessage);
}
• error: executa quando ocorre 
um timeout, erro no servidor,  
ou a requisição é abortada

Manipulando requisições com falha
$.ajax('http://www.fa7.edu.br/pos-si/receita.html', {
},
error: function(request, errorType, errorMessage) { ... },
!
!
!
!
!
!
!
!
});
});
timeout: 3000,
beforeSend: function() {
$(".bebidas").addClass("carregando");
}
complete: function() {
$(".bebidas").removeClass("carregando");
}

JavaScript: Objetos
21

Objetos em
JavaScript
Uma entidade independente com
propriedades e tipo
como em outras linguagens as
propriedades são acessadas pela
notação do ponto
22
variavel
Objeto
idade=10
variavelDoObjeto.nomeDaPropriedade o.idade

Criando objetos
23
var carro = new Object();
!
carro.fabricante = "KIA";
carro.modelo = "Picanto";
carro.ano = 2012;
carro["fabricante"] = "Volks";
carro["modelo"] = "Gol";
carro["ano"] = 2013;
pode ser utilizado como
um array associativo

Objetos 
Literais
24
var moto = {cor: "vermelha", rodas: 4, cilindros: 4};

Função 
Construtora
25
function Carro(fabricante, modelo, ano) {
this.fabricante = fabricante;
this.modelo = modelo;
this.ano = ano;
}
var outroCarro =
new Carro("Hyundai", "Tucson", 2009);
!
var aqueleCarro =
new Carro("Ford", "Fiesta", 2014);

Métodos
26
var moto = {cor: "vermelha", rodas: 4, cilindros: 4};
Como foi visto
os objetos são formados por
propriedades

Métodos
27
variavelDoObjeto.nomeDoMetodo =
nome_funcao;
São funções associadas a um objeto…
ou é uma propriedade de um objeto 
que é uma função
!
um método é uma função atribuída 
a uma propriedade do objeto
var meuObjeto = {
meuMetodo: function(params) {
// algum comportamento
}
};

Métodos
function Moto(cor, rodas, cilindros) {
this.cor = cor;
this.rodas = rodas;
this.cilindros = cilindros;
!
}
function exibirDados() {
var resultado =
"Dados da moto: cor - " + this.cor
+ ", rodas: " + this.rodas
+ ", cilindros: " + this.cilindros;
alert(resultado);
}
this.exibirDados = exibirDados;

Encapsulando comportamento
jQuery em objetos
29

Refatorando
$(document).ready(function () {
$(".bebidas").on('click', 'button', function () {
success: function(response) { $(".receita").html(response).slideDown();
},
error: function(request, errorType, errorMessage) {
alert('Error: ' + errorType + ', mensagem: ' + errorMessage);
},
timeout: 3000,
beforeSend: function() { $(".bebidas").find("button").addClass("carregando"); },
complete: function() { $(".bebidas").find("button").removeClass("carregando"); }
});
});
!
$('.bebidas').on('click', '.expandir', function(event) {
event.preventDefault();
$(".bebida").find("img").show();
});
});

Refatorando
var receita = {
init: function() {
//manipuladores de eventos
//já existentes
}
};
ele vai executar toda a operação
que foi feita dentro de ready
receita.init();
}
facilita o entendimento
do que acontece

Refatorando
var receita = {
init: function() {
!
!
!
!
!
!
!
}
};
receita.init();
}
$.ajax('receita.html', { ... });
});
!
$('.bebidas').on('click', '.expandir', function(event) {});

Refatorando
var receita = {
init: function() {
!
!
},
!
!
!
!
!
};
receita.init();
}
$('.bebidas').on('click', 'button', function () {});
$('.bebidas').on('click', '.expandir', function(event) {…});
!
!
!
carregamentoOk: function() {
!
}

Refatorando
var receita = {
init: function() {
!
!
},
!
!
!
!
!
};
receita.init();
}
$('.bebidas').on('click', 'button', this.carregamentoOK);
$('.bebidas').on('click', '.expandir', function(event) {…});
!
!
!
carregamentoOk: function() {
!
}
o mesmo pode ser feito para
o carregento da imagem

jQuery com Funções
Construtoras
35

Objeto Literal
var receita = {
init: function() {
//inic. da receita
}
};
!
receita.init();
}
limitada a uma
única receita
function Receita(sabor) {
//inic. do sabor da receita
!
}
!
!
!
!
}
múltiplas bebidas
Função Construtora
var limao = new Receita('limao');
var negro = new Rece‘ta('negro');

Refatorando
var receita = {
init: function() {
$('.bebidas').on('click', 'button', this.carregamentoOK);
$('.bebidas').on('click', '.expandir', this.exibirImagem);
},
carregamentoOk: function() {…},
exibirImagem: function() {…}
};
receita.init();
}

Refatorando
function Receita(el) {
this.el = el;
//metodos auxiliares
//manipuladores de eventos
}
um elemento jQuery
que será manipulado
var limao = new Receita($("#limao"));
var negro = new Receita($("#negro"));
});
executa o comportamento
para cada bebida

Refatorando
this.el = el;
!
!
!
!
!
}
var limao = new Receita($("#limao"));
var negro = new Receita($("#negro"));
});
this.carregamentoOk = function() {...}
this.exibirFoto = function(event) {...}
!
this.el.on('click', 'button', this.carregamentoOk);
this.el.on('click', '.expandir', this.exibirFoto);
as referências dentro
das funções precisarão
ser revisadas

Refatorando
this.el = el;
!
!
!
!
!
!
!
!
!
!
}
atingirá qualquer
elemento de classe receitathis.carregamentoOk = function() {
timeout: 3000,
$('.receita').html(response).slideDown();
}
});

Refatorando
this.el = el;
!
!
!
!
!
!
!
!
!
}
this.carregamentoOk = function() {
timeout: 3000,
.html(response).slideDown();
}
});
this.receita = this.el.find(".receita");
this.receita

Funciona?
this incorreto

Refatorando
this.el = el;
!
!
!
!
!
!
!
!
!
}
timeout: 3000,
.html(response).slideDown();
}
});
this.receita
dentro da $.ajax, this
se refere às configurações

Refatorando
this.el = el;
!
!
!
!
!
!
!
!
!
!
!
}
timeout: 3000,
!
this.receita.html(response).slideDown();
}
});
var that = this;
context: that,
configura quem é o this
dentro do callback

Refatorando
this.exibirFoto = function(event) {
$(".bebida").find("img").show();
}

Refatorando
this.exibirFoto = function(event) {
that.el.find("img").show();
}

Funciona?

Forms
48

Submetendo via POST com jQuery Ajax
$('form').on('submit', function(e) {
$.ajax('pedidos.html', {
type: 'POST'
});
});
});

Formulário

$('form').on('submit', function(e) {
type: 'POST'
});
});
});

$('form').on('submit', function(event) {
type: 'POST'
});
});
});
e os dados?

type: 'POST'
});
});
}); <form action="pedidos.html">
<select name="sabor" id="sabor">
<option>Limao</option>
<option>Negro</option>
</select>
<input type="text" id="quantidade" name="quantidade" value="1"/>
<input type="submit" value="FAZER O PEDIDO" />
</form>

Submetendo os dados
type: ‘POST’,
!
!
!
!
});
});
});
data: {"sabor": $("#sabor").val(),
"quatidade": $("#quantidade").val() }

Submetendo os dados
type: ‘POST’,
data:
!
!
!
});
});
});
$('form').serialize()
.serialize
cria uma string
de submissão
com todos os elementos do
formulário

Submetendo os dados
type: ‘POST’,
data:
!
!
!
!
});
});
});
$('form').serialize()
success: function(result) {
$('form').remove();
$('#pedido').hide().html(result).fadeIn();
}

Funciona?

jQuery, Ajax e JSON
58

<p>
Seu pedido de 4 sanduiches,
do tipo Hamburguer,
foi registrado
no valor de R$ 20.00.
Aguarde ser chamado!
Número do pedido: 86
</p>
{
"pedido": 86,
"sanduiche": "Hambuguer",
"quantidade": 4,
"total": 20.00
}
HTML JSON
Servidor decide como
o HTML é formatado
O servidor fornece os dados que pode ser
apresentado de maneiras diferentes
JSON - Java Script Object Notation
Um formato de dados para se utilizar em web

Este código trabalha com HTML formatado
var form = $(this);
type: 'POST',
data: form.serialize(),
form.remove();
}
});
});
});

var form = $(this);
type: 'POST',
!
form.remove();
}
!
});
});
dataType: 'json',
,
contentType: 'application/json'
transforma a resposta
em JSON
o resultado não é HTML
então é preciso criar um
nó JSON
solicita que a resposta
seja no formato JSON

form.remove();
!
!
!
!
!
!
}
{
"pedido": 86,
"sanduiche": "Hambuguer",
"quantidade": 4,
"total": 20.00
}
result
<p>Pedido: 86. Sanduiche: Hamburguer. Quantidade: 4. Total: R$ 20.00</p>
var texto = $("<p></p>");
texto.append("Pedido: “ + result.pedido + ". ");
texto.append("Quantidade: “ + result.quantidade + “. ");
texto.append("Sanduiche: “ + result.sanduiche + ". ");
texto.append("Total: “ + result.total + ". ");
Json vai ser convertido
em um objeto JavaScript
$('#pedido').hide().html(msg).fadeIn();
Cria e adiciona o nó DOM

Refatorando
$.ajax('pedidos.html', {…}); <form action=“/pedidos.html”
method=“post">
…
</form>
$.ajax(‘pedidos.html’).attr(‘action’), {…});
.attr(<atributo>); .attr(<atributo>, <valor>);
métodos jQuery

Código ﬁnalizado
$('form').on('submit', function (event) {
var form = $(this);
$.ajax(form.attr('action'), {
type: 'POST',
dataType: 'json',
success: function (result) {
form.remove();
var texto = $("<p></p>");
texto.append("Pedido: " + result.pedido + ". ");
texto.append("Quantidade: " + result.quantidade + ". ");
texto.append("Sanduiche: " + result.sanduiche + ". ");
texto.append("Total: " + result.total + ". ");
$('#pedido').hide().html(msg).fadeIn();
},
contentType: 'application/json'
});
});

Métodos úteis
65

Ajax & JSON
<h1>Bem-vindo ao jQuery Festas</h1>
<button>Bebida em Destaque</button>
!
<div class="destaque">
<h2>Destaque</h2>
<img src=""/>
<p></p>
</div>

Ajax & JSON
<h1>Bem-vindo ao jQuery Festas</h1>
<button>Bebida em Destaque</button>
!
<div class="destaque">
<h2>Destaque</h2>
<img src=""/>
<p></p>
</div>
$('button').on('click', function () {
$.ajax('bebidas/favoritas/1', {
contentType: 'application/json',
dataType: 'json',
{
"nome": "Lemon Breeze",
"imagem": "imagens/yellow.gif"
}
var destaque = $('.destaque');
destaque.find('p').html(
destaque.find('img')
result.nome);
.attr(‘src', result.imagem);
}
});
});
e se existissem
múltiplos destaques?

JSON com vários resultados
{
"nome": "Lemon Breeze",
"imagem": "imagens/yellow.gif"
},
[
!
!
!
!
{
"nome": "Dark Juice",
"imagem": "imagens/black.gif"
},
{
"nome": "Chai Tea",
"imagem": "imagens/chai.gif"
}
]
var destaque = $('.destaque');
destaque.find('p').html(result.nome);
.attr('src', result.imagem);
}
result
application.js
O resultado é um
array de objetos
precisa-se de um laço
para cada destaque

$.each -> iteração sobre um array
var destaque = $(‘.destaque );
destaque.find(‘p').html( .nome);
.attr('src', .imagem);
}
application.js
<li class="destaque-0">
…
</li>
!
…
</li>
!
…
</li>
index.html
$.each(colecao, function(<indice>, <objeto>) {});
Executa a função para cada objeto da coleção
$.each(result, function(indice, bebida) {
-' + indice
bebida
bebida

E quando a quantidade de
informação for variável?
71

E quando a quantidade de informação for variável?

Transforme um array de objetos em HTML
$('.atualizar-pedidos').on('click', function() {
$.ajax('status/todos.json', {
contentType: 'application/json',
dataType: 'json',
success: function (result) {...}
});
});
[
{
"numero": "50",
"status": "Não iniciado"
},
{
"numero": "45",
"status": "Entregue"
},
{
"numero": "47",
"status": "Cancelado"
}
!
]
result
$.getJSON(url, success);
$.getJSON('status/todos.json', function(result) {});
o resultado será um
array de objetos
application.js

Transforme um array de objetos em HTML
$('.atualizar-pedidos').on('click', function() {
$.getJSON('status/todos.json', function(result) {
!
!
});
});
[
{
"numero": "50",
},
{
"numero": "45",
},
{
"numero": "47",
}
!
]
result
<li>
<h3>numero</h3>
<p>status</p>
</li>
<li>
<h3>…</h3>
<p>…</p>
</li>
<li>
<h3>…</h3>
<p>…</p>
</li>
é precisso transformar
para um formato HTML
application.js
var pedidos = ????
$('ul').html(pedidos);

Array com $.map()
$.map(colecao, function(<item>, <indice>) {});
a coleção pode ser um array
a ordem é diferente do each
o método map um array modiﬁcado a partir do array passado com o parâmetro
var numeros = [1,2,3,4]
!
var numeros-novos = $.map(numeros, function(item, indice) { return item + 1 });
numeros [1, 2, 3, 4]
numeros-novos [2, 3, 4, 5]

Do JSON para o HTML
!
{
"numero": "50",
},
{
"numero": "45",
},
{
"numero": "47",
}
[ ]$.map(result, function(pedido, indice) {
var item-pedido = $(“<li></li>”);
return item-pedido;
});
[ ]<li></li> <li></li> <li></li>

Do JSON para o HTML
!
{
"numero": "50",
},
{
"numero": "45",
},
{
"numero": "47",
}
[ ]$.map(result, function(pedido, indice) {
var item-pedido = $(“<li></li>”);
!
!
return item-pedido;
});
[ ]
$(‘<h3> Pedido: ’ + pedido.numero + ‘</h3>’).appendTo(item-pedido);
$(‘<p>’ + pedido.status + ‘</p>’).appendTo(item-pedido);
<li>
<h3>Pedido: 50</h3>
<p>Não iniciado</p>
</li>
<li>
<h3>Pedido: 45</h3>
<p>Entregue</p>
</li>
<li>
<h3>Pedido: 47</h3>
<p>Cancelado</p>
</li>

Do JSON para o HTML
$.map(result, function (pedido, indice) {
var item_de_pedidos = $('<li></li>');
$('<h2>Pedido: ' + pedido.numero + '</h2>').appendTo(item_de_pedidos);
$('<p>' + pedido.status + '</p>').appendTo(item_de_pedidos);
return item_de_pedidos;
});
$('.atualizar-pedidos').on('click', function () {
$.getJSON('status/todos.json', function (result) {
var pedidos =
retorna-se a lista
alterada
$('ul').html(pedidos);
});
});

E quando a quantidade de informação for
79

Plugins
80

Plugin
81
Uma nova funcionalidade que pode
ser chamada a partir de uma
seleção jQuery
Pode ser reutilizada em outros
projetos
encapsulamento
e reaproveitamento
de código

a função $
$.(a).css(“color”, “yellow”);
a coleção pode ser um array
a ordem é diferente do each
Quando se utiliza a função $, o valor retornado é um objeto jQuery
$.(a).css(…)
Este objeto contém todos os métodos jQuery que estamos utilizando
$.(a).click(…) $.(a).addClass(…)
Além de todas as propriedades associadas a eles

$.fn
83
Todos este métodos
estão no objeto $.fn
Novos métodos (plugins)
também deverão
ser adicionados a ele

Caminho simples para o plugin
A forma mais simples é adicionar
uma propriedade ao $.fn
$.fn.umPlugin = function() {
// lógica encapsulada
}

Por partes
$ apelido para o objeto jQuery
window.jQuery = window.$ = jQuery
então porque não utilizar:

Por partes
var jQuery = function(selector, context) {
return new jQuery.fn.init(selector, context, rootjQuery);
}
jQuery é uma função Objeto
jQuery.fn = jQuery.prototype
uma propriedade que todos
os objetos herdam de Global

Função 
Construtora
87
this.ano = ano;
}
var outroCarro =

this.ano = ano;
}
var outroCarro =
outroCarro.abs = true;
var aqueleCarro =

this.ano = ano;
}
var outroCarro =
outroCarro.abs = true;
var aqueleCarro =
Carro.prototype.abs = true; a propriedade estará disponível
em todas as infâncias do objeto

Um plugin simples
“Amarelar" o que se quiser
$.(a).css(“color”, “yellow”);
$.fn.amarelar = function() {
// lógica encapsulada
}

Um plugin simples
this.css(‘color’, ‘yellow’);
}
$('a').amarelar();
});

Encadeamento
return this;
}
$(‘a’).amarelar().fadeIn();
});

Para estar disponível
em todas as instâncias
93
utilize
$.fn

E se existirem outros plugins
que utilizam parâmetros
com mesmos nomes?
94
e quanto 
à $??

Protegendo o escopo
Utilize Funções IIFE (Immediately-Invoked Function Expressions)
padrão comum
para evitar problemas de
sombreamento de variáveis
tudo que for declarado 
tem escopo somente nesse bloco
(function() {
var qualquer = “Hello”;
})();
var carro = new Carro();
!
(function(c) {
c.ligar();
})(carro);
(function($) {
…
})(jQuery);
modo jQuery

Um plugin com IIFE
}
$('a').amarelar();
});

Um plugin com IIFE
(function($) {
}
})(jQuery);
$('a').amarelar();
});

Preços
98

index.html
<ul class="bebidas">
<li class="bebida" data-preco="15.00">
<p>
</p>
<button>Consultar Preco</button>
</li>
…
</li>
…
</li>
$('.bebida').precificar();

Criando um plugin
$.fn.precificar = function() {
console.log('Chamando preficicar');
console.log(this);
}
Disponibiliza o método
como uma função jQuery
o this será o objeto jQuery
onde o plugin foi chamado

Criando um plugin e adicionando comportamento
var bebida = this;
bebida.on('click', 'button', function() {
var preco = bebida.data('preco');
var detalhes = $('<p>Preco: ' + preco + '</p>');
$(this).hide();
bebida.append(detalhes);
});
};
});

Preços
102

Corrigindo o comportamento
console.log('Chamando preficicar');
console.log(this);
}
this.each()…

var bebida = this;
$(this).hide();
});
};

!
var bebida = this;
$(this).hide();
});
!
};
this.each(function () {
});

Plugins com parâmetros
$('.bebida').precificar({ dias:5 });
});
$.fn.precificar = function(opcoes) {
…
var detalhes = $(‘<p>Preco:'
+ opcoes.dias
+ ' drinks por ‘
+ opcoes.dias * preco + '</p>');
e se fosse necessário
parâmetros com valores default?

Parâmetros opcionais
$('.bebida').precificar({ dias:5 });
});
$(‘.bebida').precificar();
});
com ou sem parâmetros
$.fn.precificar = function(opcoes) {
…

Parâmetros opcionais com $.extend
Combina os objetos
$.extend(target[, objeto1, objeton]);
$.extend({ dias: 3 }, { preco: 5 }); { dias: 3, preco: 5 }
$.extend({ dias: 3 }, {}); { dias: 3 }
$.extend({ dias: 3 }, { dias: 5 }); { dias: 3 }
a forma de configurar
um valor default

Adicionando o parâmetro opcional
$.fn.precificar = function (opcoes) {
var bebida = $(this);
console.log(bebida);
bebida.on('click.precificar', 'button', function () {
…
});
});
};

console.log(bebida);
…
});
});
};
var configuracoes = $.extend({dias: 3}, opcoes);

var configuracoes = $.extend({dias: 3}, opcoes);
var detalhes = $('<p>Preco:'
+ configuracoes.dias
+ ' drinks por '
+ configuracoes.dias * preco + '</p>');
$(this).hide();
});
});
};

Refatorando para parâmetros
112

var config = $.extend({dias: 3}, opcoes);
var detalhes = $('<p>Preco:'
+ config.dias
+ ' drinks por '
+ config.dias * preco + '</p>');
$(this).hide();
});
});
};

!
var config = $.extend({
dias: 3,
bebida: $(this),
preco: $(this).data(‘preco')
botao: $(this).find(‘button')
}, opcoes);
config.bebida.on('click.precificar', 'button', function () {
var detalhes = $('<p>Preco:' + config.dias + ' drinks por ' +
config.dias * config.preco + '</p>');
config.botao.hide();
config.bebida.append(detalhes);
});
});
};
config.dias
config.bebida
config.preco
config.botao

Mais um botão

jQuery e CSS manipulação

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à jQuery e CSS manipulação

Similaire à jQuery e CSS manipulação (20)

Plus de Eduardo Mendes

Plus de Eduardo Mendes (20)

jQuery e CSS manipulação