✅ Manipulação CSS com jQuery

Índice

Com jQuery Podemos alcançar muitas coisas no nível de interação do usuário, incluindo a manipulação do Árvore DOMNo entanto, uma das coisas que podem não vir à mente é o Manipulação CSS.
Manipulando o CSS podemos conseguir mudanças nos elementos que vemos na tela de uma forma muito natural e fluida, sem recorrer a funções complexas em Javascript puro como tínhamos que fazer alguns anos atrás.
O SOL é a forma como nosso documento é organizado HTML, nos permite dar uma estrutura previsível e hierárquica ao que queremos mostrar na tela. Isso é muito importante, pois é a forma como o navegador interpreta os documentos, porém há outro aspecto que podemos usar a nosso favor; isso é para ser capaz de localizar os elementos para executar ações sobre eles.
Então, quando precisamos fazer uma mudança em um elemento específico, graças ao SOL Podemos utilizar diferentes formas de localizá-lo e assim manipular seu conteúdo, seu estilo ou até mesmo retirá-lo do documento em tempo real.
Isso é muito prático nos momentos em que precisamos destacar um elemento ao realizar uma ação no documento ou ao receber uma resposta e, portanto, não ter que mudar a página ou fazer uma atualização completa dela.
Uma das melhores práticas ao criar estilos CSS é usar classes, com isso podemos criar aspectos que podemos então aplicar independentemente a diferentes elementos, sem ter que recorrer a reescrever o código repetidamente.
Atributo de classePara um elemento assumir esses estilos, nós simplesmente temos que colocar em seu atributo classe = "" o nome da classe correspondente e se o estilo que escrevermos for adequado para o elemento, ele o refletirá.
LimitaçãoTudo parece ótimo, mas existe uma limitação, o estilo é carregado ao levantar a página e se precisarmos incluir um novo estilo, normalmente a página teria que ser recarregada, causando a interrupção da navegação do usuário.
jQuery permite-nos contornar estes limites, dando-nos a possibilidade de incorporar ditas classes em tempo real no documento sem ter que recarregar toda a página, para isso basta utilizar o método addClass () e passa o nome da turma CSS que queremos adicionar ao momento.
Vamos ver um pequeno exemplo prático passo a passo e depois veremos o código completo do que está descrito:
1- Primeiro criamos nosso arquivo chamado add-classes.html e vamos incluir a biblioteca de jQuery, para fins práticos, fazemos a ligação direta do CDN adequado, isso requer conexão com a internet, porém podemos salvar o arquivo e veiculá-lo localmente.
2- Então vamos criar nossas classes CSSPara que possamos ver melhor a mudança, criamos duas classes, cada uma muda a cor do fundo do elemento ao qual se aplica, e cada classe terá uma cor diferente.
3- No corpo do nosso documento, criamos dois e a cada um atribuímos um ID com o qual podemos identificá-los dentro do SOL facilmente com os seletores jQuery.
4- Em seguida, criamos um elemento para o qual no evento onclick dizemos a ele para chamar uma função Javascript.
5- Finalmente construímos nossa função Javascript, isso simplesmente chamará cada elemento por seu seletor e com o método addClass () Isso vai adicionar uma classe das que criamos inicialmente, quando fizermos isso, veremos imediatamente a mudança.
Uma vez que descrevemos o que devemos fazer, veremos o código como está:

Adicionar ClassesNosso primeiro bloco CSS jQuery
Nosso segundo bloco CSS jQuery

Clique para mudar de classe

Como vemos, é bastante simples e quando o executarmos em nosso navegador veremos como antes de clicar no botão os elementos são normais e depois de clicar mudam de cor e as classes correspondentes são adicionadas. Vamos ver na imagem a seguir a que nos referimos:

PROLONGAR

Após clicar no botão podemos visualizar a transição em nossa página:

Se podemos adicionar uma classe, também devemos ser capazes de fazer o oposto, que é removê-la, para este jQuery nos fornece o método removeClass (), e isso funciona com um princípio muito parecido com o exemplo anterior, simplesmente colocamos um elemento e informamos através do método que ele deve remover a classe indicada, se tiver, será removida, caso contrário nada acontece.
Para tornar as coisas um pouco mais interessantes, vamos adicionar o uso de outro método e é o método de verificação de classe, este é o hasClass () que nos permite verificar se um elemento possui uma determinada classe, com isso podemos usar condicionais e fazer diferentes experimentos que nossa lógica dita.
Para isso vamos fazer uma pequena página na qual teremos várias funções, uma função irá verificar se o elemento tem uma determinada classe, se assim for será removido, mas se a resposta for negativa então iremos adicioná-la .
Isso nos dá a possibilidade de brincar um pouco com os estilos de forma dinâmica, já que podemos ver em tempo real se adicionamos ou removemos certos valores.
1- Com base no exemplo anterior, vamos nos concentrar apenas na parte onde escrevemos a função Javascript.
2- Dentro da função vamos criar dois condicionais, no primeiro vamos trabalhar com o primeiro elemento, primeiro vamos perguntar com um bloco condicional E se () se você tem a classe chamada primeira classeSe a resposta for positiva, aplicaremos o método remove class, no entanto, se não tivermos a classe, iremos adicioná-la, isso nos dará um efeito de interruptor.
3- Repetimos o passo anterior para o segundo elemento e assim conseguimos que ele se comporte da mesma maneira.
Vamos ver o novo código que criamos abaixo:

Adicionar ClassesNosso primeiro bloco CSS jQuery
Nosso segundo bloco CSS jQuery

Clique para mudar de classe

Agora vamos ver como é a execução do nosso programa, nesta primeira imagem veremos como é o nosso documento HTML Em seu estado inicial, incluímos o console cromada para que possamos notar como os elementos mudam:

PROLONGAR

Agora vamos ver o que acontece quando clicamos no botão e a transição é feita:

PROLONGAR

À primeira vista pode parecer que este documento funciona exatamente da mesma forma que o primeiro que fizemos neste tutorial, porém se clicarmos novamente veremos como o método funcionará. removeClass ().
Também verificamos como o método hasClass () tem funcionado, talvez não faça nada que o usuário veja, mas nos dá a capacidade de executar condicionais em nosso HTML.
Há algo que nos permite jQuery e isso é para alternar entre as classes, para isso usamos o método toggleClass (), com ele podemos especificar ao nosso elemento que ao dispararmos um evento ele levará uma classe se tiver a outra da lista já aplicada.
UtilitárioIsso é realmente útil quando queremos trabalhar com mudanças de estado, é uma espécie de atalho para evitar ter que escrever uma estrutura condicional com o método hasClass (). Sua aplicação é muito semelhante aos métodos que vimos até agora, a única diferença é que em vez de uma classe passaremos duas separadas por um espaço.
Vamos ver como vamos mudar apenas a função Javascript do nosso documento de teste para incorporar este novo método:
1- Vamos adicionar uma classe inicial aos nossos elementos, desta forma teremos um ponto de partida para as mudanças.
2- Então dentro de nossa função Javascript vamos simplesmente aplicar o método toggleClass () a cada um dos elementos por meio de seu seletor.
Vamos ver como fica nosso código com as alterações aplicadas:

Adicionar ClassesNosso primeiro bloco CSS jQuery
Nosso segundo bloco CSS jQuery

Clique para mudar de classe

Agora vamos ver o que acontece quando carregamos o documento pela primeira vez:

Agora vamos ver o que acontece quando clicamos no botão novamente:

PROLONGAR

Se continuarmos clicando no botão, as aulas continuarão se alternando sem limite.
Com isso terminamos este tutorial, aprendemos como podemos manipular o CSS diretamente com jQueryCom isso, podemos começar a ter ideias melhores para tornar nossas interfaces de usuário mais ricas em funcionalidades.