O método addClass() em jQuery adiciona classes a elementos de um site, de um jeito fácil e preciso, mo­di­fi­cando a aparência e o com­por­ta­mento destes mesmos elementos de forma dinâmica. Conheça a estrutura e entenda o fun­ci­o­na­mento do addClass() em jQuery.

O que é o método addClass() em jQuery?

O método addClass() em jQuery permite que você altere di­na­mi­ca­mente a aparência do seu site. Ao aplicá-lo, você pode per­so­na­li­zar estilos, criar animações e reagir a in­te­ra­ções de usuários, por exemplo, bastando adicionar as classes desejadas aos res­pec­ti­vos elementos HTML. Esse método, contudo, não é capaz de remover classes já exis­ten­tes. Para fazer isso, você precisará utilizar a função re­mo­ve­Class() em jQuery. Assim que adi­ci­o­na­das, as regras de estilo CSS es­pe­ci­fi­ca­das para a classe são aplicadas aos elementos desejados, para a obtenção do com­por­ta­mento visual almejado. Você também pode trabalhar com jQuery no WordPress para criar seus próprios layouts e efeitos para esse sistema de ge­ren­ci­a­mento de conteúdo (CMS).

Dica

Alugue um espaço web pessoal com a IONOS e obtenha 10 GB ou mais de espaço de ar­ma­ze­na­mento para os seus projetos. Beneficie-se, ainda, de domínio e cer­ti­fi­cado SSL Wildcard grátis. Escolha o plano ideal para você, com todas as funções de que precisa!

Sintaxe e pa­râ­me­tros do método addClass() em jQuery

O método addClass() em jQuery, que nada mais é que uma função, aceita dois pa­râ­me­tros. Sua sintaxe geral é assim:

$(selector).addClass(classname,function(index,currentclass))
jQuery
  • classname: Cor­res­ponde ao nome da(s) classe(s) a ser(em) adi­ci­o­nada(s); devem ser separadas por vírgulas.
  • function(index,cur­rent­class): Função* callback* opcional, chamada para cada elemento se­le­ci­o­nado.
  • index: Índice do elemento atual na lista de elementos se­le­ci­o­na­dos.
  • cur­rent­class: Classe atual do elemento.

A função callback permite a re­a­li­za­ção de outras mo­di­fi­ca­ções ou operações lógicas no nível de cada elemento, durante a adição de uma ou mais classes. Por exemplo, você pode verificar o valor atual de uma classe e, com base nele, acres­cen­tar outras classes.

Se você ainda é iniciante em jQuery, acesse o tutorial de jQuery do nosso Digital Guide. Ele apresenta a você todos os prin­cí­pios básicos da bi­bli­o­teca jQuery que precisa conhecer.

Dica

Com a API da IONOS, você poderá con­fi­gu­rar seus produtos de hos­pe­da­gem IONOS com fa­ci­li­dade e rapidez. A chave de acesso à API lhe permitirá gerenciar seus domínios, as con­fi­gu­ra­ções de DNS e os cer­ti­fi­ca­dos SSL. Para mais in­for­ma­ções, acesse a página de do­cu­men­ta­ção da IONOS Developer API.

Exemplos de uso do método addClass() em jQuery

Para de­mons­tra­mos como o método addClass() funciona em jQuery, ela­bo­ra­mos este exemplo: desejamos adicionar a classe green ao elemento p, alterando, assim, tanto a cor quanto o tamanho da fonte da amostra de texto. Essas al­te­ra­ções serão acionadas por um evento de clique de botão. Outros métodos, como o jQuery.find() e o jQuery.ajax(), também podem ser com­bi­na­dos ao addClass().

<!DOCTYPE html>
<html>
    
<head>
        <style>
                .blue {
                        color: blue;
                        font-weight: bold;
                }
    
                .green {
                        font-size: 24px;
                        color: green;
                }
        </style>
    
        <!-- Import jQuery CDN library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
                $(document).ready(function () {
                        $("button").click(function () {
                                $("p").addClass("green");
                        });
                });
        </script>
</head>
    
<body style="text-align: center;">
        <h1>
                This is a jQuery.addClass() example.
        </h1>
    
        <p class="blue">
                jQuery add class to element demo
        </p>
    
        <button>Click!</button>
</body>
    
</html>
html

Ao re­pro­du­zir­mos esse código, per­ce­be­mos que a janela do navegador alterou a cor e o tamanho do elemento p logo que o botão foi acionado.

Antes, a exibição estava assim:

Imagem: Captura de tela do navegador antes da utilização do método addClass() em jQyery
Estado do navegador antes de uma nova classe ser adi­ci­o­nada

Depois de clicarmos no botão, obtivemos essa mo­di­fi­ca­ção:

Imagem: Captura de tela do navegador depois da implementação do método addClass() em jQyery
Estado do navegador depois de uma nova classe ter sido adi­ci­o­nada
Dica

Coloque o seu projeto no ar com o Deploy Now da IONOS, que tem foco 100% no cliente! Graças aos recursos de con­fi­gu­ra­ção rápida e de detecção au­to­má­tica de fra­meworks, você poderá colocar seu site no ar em instantes. Fun­ci­o­na­li­da­des adi­ci­o­nais, que podem ser con­tra­ta­das e can­ce­la­das men­sal­mente, oferecem ainda mais vantagens.

Ir para o menu principal