2.3 Manipulação de estilo

De fato, o exemplo anterior pode ser ampliado para selecionar qualquer elemento na árvore DOM. Por exemplo, suponha que precisemos selecionar apenas as spans que estão contidas num parágrafo localizado dentro de uma div que está localizada na tag header:

$("header div p span")

 

Como podemos ver no exemplo acima, os seletores do jQuery são bastante poderosos para permitir encontrar qualquer elemento dentro da árvore DOM. No próximo capítulo veremos como customizar ainda mais os seletores.

A função seletora do jQuery permite a construção de seletores bem mais sofisticados, como busca por atributos, pseudo-classes, entre outros.

 

2.3 Manipulação de estilo

O jQuery oferece diversos métodos para manipulação do estilo de um elemento HTML. A seguir veremos alguns exemplos, como adicionar e remover classes do CSS, adicionar uma regra CSS, exibir e ocultar um elemento e modificar atributos de uma tag.

 

Função css()

A função css() permite definir uma ou mais propriedades css para um elemento. No exemplo abaixo definimos a propriedade background-color com valor #CCC para todos os parágrafos (p).

$(document).ready(function(){

$("p").css("background-color","#CCC");

});

 

Além de definir uma propriedade CSS, podemos obter o valor da propriedade CSS que já foi aplicada ao elemento. No exemplo abaixo, quando usamos a função css() passando apenas um parâmetro, ela funcionará como um método get() e retornará o valor daquela propriedade, neste caso, o tamanho da fonte:

$(document).ready(function(){

var fontSize = $("p").css("font-size");

alert(fontSize);

});

Também é possível alterar mais de uma propriedade CSS em uma só chamada da função css(). Basta passar como parâmetro para a função um conjunto de propriedades-valor no formato:

{"propriedade":"valor", "propriedade":"valor", ...}

Abaixo temos um exemplo de código que aplica uma cor de fundo #CCC e, ao mesmo tempo, define uma borda de cor vermelha para um elemento cuja classe é "two"

<script>

$(document).ready(function(){

$(".two").css(

{

"background-color":"#CCC",

"border":"2px solid red"

}

);

});

</script>

 

Uma breve pausa aqui!

Uma típica declaração ou comando do jQuery é composto de 4 partes:

1. a função jQuery ou seu álias

2. o(s) seletor(es)

3. a(s) ação(ões)

4. o(s) parâmetro(s)

Por exemplo, considere a declaração:

$("p").css("background-color","#CCC");

podemos dividi-la nas seguintes partes:

Função Seletor Ação Parâmetros jQuery

$ ("p") .css() ("background-color","#CCC");

A função jQuery sempre chamamos; o seletor permite definir quais elementos serão selecionados; a ação aplica algum método ou função do jQuery sobre os elementos selecionados; os parâmetros definem as propriedades que serão aplicadas na ação.

 

Ok! Voltando à manipulação de estilos com jQuery.

 

Função addClass()

A função addClass permite adicionar uma classe CSS a um determinado elemento. É importante destacar que essa classe deve existir no arquivo CSS ou na seção style, caso contrário a função não terá nenhum efeito. No exemplo abaixo, todos os parágrafos da página terão associado à classe "destaque":

<!DOCTYPE html>

<html lang="pt">

<head>

<meta charset="UTF-8"/>

<title></title>

<style>

.destaque{

color: red;

background-color: #F6D8CE;

}

</style>

<script src="jquery.js"></script>

<script>

$(document).ready(function(){

$("p").addClass("destaque");

});

</script>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod.</p>

</body>

</html>

Observe que a função addClass recebe o nome da classe, sem o sinal de ponto na frente.

A função addClass também permite que sejam adicionadas várias classes de uma só vez, por exemplo:

<script>

$(document).ready(function(){

$("p").addClass("destaque aviso");

});

</script>

Nesse caso, as classes destaque e aviso são adicionadas ao mesmo tempo no parágrafo.

 

Função hasClass()

Esta função permite verificar se determinado elemento possui uma classe CSS:

<script>

$(document).ready(function(){

var possuiDestaque = $("#pi").hasClass("destaque");

if(possuiDestaque)

alert("parágrafo possui destaque");

else

alert("classe destaque não detectada");

});

</script>

Nesse exemplo, a função hasClass retorna true caso a classe já esteja associada ao elemento #pi, caso contrário, retorna false.

 

Função removeClass()

A função removeClass faz exatamente o oposto da função addClass, ou seja, remove uma classe de determinado elemento:

<script>

$(document).ready(function(){

$("p").removeClass("destaque");

});

</script>

No exemplo, removemos a classe destaque do elemento <p>. Se a classe não estiver associada a <p> então o código acima não terá nenhum efeito.

 

Função toggleClass()

A operação de adicionar e remover classes CSS é algo bem comum no jQuery. Um exemplo típico é quando o usuário clica num elemento, e necessitamos dar um destaque para o mesmo, como mudar sua cor de fundo. Nesse caso, poderíamos adicionar uma classe CSS que realiza a formatação de destaque, e quando o usuário clica novamente no elemento temos que remover essa classe CSS. Só que isso pode ser redundante e trabalhoso, pois teríamos que fazer um if para testar se a classe existe ou não, para antes decidir se usaremos o método addClass() ou removeClass(). A função toggleClass() faz esse controle sem a necessidade de if, em uma só linha. Por exemplo:

<!DOCTYPE html>

<html lang="pt">

<head>

<meta charset="UTF-8"/>

<title></title>

<style>

.destaque{

color: red;

background-color: #F6D8CE;

}

</style>

<script src="jquery.js"></script>

<script>

$(document).ready(function(){

$("#manchete").click(function(){

$(this).toggleClass("destaque");

});

});

</script>

</head>

<body>

<p id="manchete">Lorem ipsum dolor sit amet, consectetur

adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad

minim veniam, quis nostrud exercitation ullamco laboris nisi ut

aliquip ex ea commodo.</p>

</body>

</html>

Nesse exemplo usamos a função click() para identificar o evento de clique do mouse (já falaremos mais sobre essa função), e em seguida chamamos toggleClass passando o nome da classe CSS. O que o toggleClass faz é verificar se o elemento já possui associado a classe "destaque". Caso ele já possua a classe, então toggleClass remove a classe. Se não possui ainda a classe, então toggleClass adiciona a classe. Portanto, o controle se a classe está associada ou não é feito inteiramente pelo método, deixando o programador livre dessa responsabilidade. Sempre que possível, opte por toggleClass ao invés de usar addClass e removeClass, pois você estará deixando seu código mais legível e conciso.

 

Pausa para alguns comentários!

Funções anônimas

Em vários exemplos acima usamos um recurso do JavaScript (JS) chamado função anônima. Observe quando usamos a função ready(). O que foi passado como parâmetro? Veja o código abaixo:

$(document).ready(function(){

alert('esta é uma função anônima');

});

A função ready() está recebendo uma função como parâmetro. O escopo dessa função existe apenas dentro da chamada da função ready(). Essa função não possui um nome ou identificador. Seu propósito é existir apenas quando a função ready() for chamada. Esse tipo de função é chamada de função anônima. O uso de função anônima é bem comum no jQuery, mas não necessariamente obrigatório. O mesmo código acima poderia ser escrito como:

<script>

$(document).ready(teste);

function teste(){

alert("esta é uma função normal do JS");

}

</script>

Veja que usamos aqui uma função identificada, cujo nome é teste. Ela possui uma declaração completa e pode ser chamada de outras partes do código, enquanto que uma função anônima não pode ser chamada. Por isso, na hora de criar suas funções, pense se você precisará usar essa função em outras partes do seu código, pois caso precise, então será melhor atribuir um nome à função para poder reaproveitá-la em outros trechos de código. Nesse caso evite funções anônimas.

 

Referência this

Se você prestou atenção ao exemplo do toggleClass, deve ter se perguntado: o que seria a palavra this? Vamos considerar outro exemplo que associa uma função que monitora eventos do tipo click em todos os parágrafos da página:

<script>

$(document).ready(function(){

$("p").click(function(){

$(this).toggleClass("destaque");

});

});

</script>

Nesse exemplo, toda vez que houver um clique num parágrafo, a classe destaque será adicionada ao parágrafo caso ainda não exista, ou removida caso já esteja presente. Mas e o this nessa história toda? Observe que no momento que escrevemos o código jQuery, não temos como saber quantos parágrafos existem na página. É provável que exista mais de um parágrafo, ou até dezenas ou centenas. Portanto, se rodarmos o código da seguinte maneira:

<script>

$(document).ready(function(){

$("p").click(function(){

$("p").toggleClass("destaque");

});

});

</script>

estaríamos fazendo um método que, quando recebesse um clique em p, aplicaria a classe destaque em todos os parágrafos! Mas não é isso que queremos. O objetivo é aplicar apenas no p que recebeu o clique. E é exatamente isso que o comando this faz: definir que o <p> que terá o toggleClass aplicado é apenas aquele que recebeu o clique. A referência this deixa o código mais genérico, pois podemos trabalhar com uma grande quantidade de elementos, sem sabermos, a princípio, determinar qual é o elemento. Guarde bem esse conceito, pois ele aparecerá muitas e muitas vezes daqui para frente, junto com as funções anônimas.

Ok! Voltando ao tópico de manipulação de estilos.

 

Função hide()

Esta função esconde/oculta um elemento. No exemplo abaixo quando o usuário clicar no parágrafo, o mesmo é ocultado. O usuário não enxergará mais esse parágrafo, entretanto ele continua presente na página e poderá tornar-se visível usando a função show().

$('p').click(function(){

$(this).hide();

});

Inspecionando o parágrafo depois de ocultado, vemos que na verdade a função hide() apenas define a propriedade display do CSS para none:

 

Função show()

A função show() faz o oposto de hide(). Se um elemento está escondido, podemos torná-lo visível chamando a função show().

$('#botao').click(function(){

$("p").show();

});

O que na prática consiste em modificar a propriedade display do CSS, de none para block.

 

Função attr()

A função attr() permite alterar um atributo de um elemento. No exemplo abaixo usamos a função attr para alterar a largura da imagem toda vez que o mouse passa sobre ela. Quando sai de cima da imagem, alteramos a largura para o tamanho original: