•  
     

Adicionando e Removendo Classes - jQuery

Não precisamos nos limitar a adicionar e remover elementos inteiros — podemos ajustar nossos superpoderes jQuery para alterar classes, CSS, e mesmo o conteúdo dos nossos elementos HTML.

Vamos começar com as classes. A jQuery inclui duas classes, .addClass() e .removeClass(), que podem ser usadas para adicionar ou remover uma classe de um elemento. Isso é maravilhoso se, por exemplo, você tem uma classe destacada highlighted que você quer aplicar a um elemento quando ele for clicado.

A sintaxe é algo como:

Código: Selecionar todos


$('selector').addClass('className');
$('selector').removeClass('className');

onde 'selector' é o elemento HTML que você quer e 'className' é o nome da classe que você quer adicionar ou remover.

Lembre-se: Você não está selecionando coisa alguma, você está modificando seu elemento. Isso significa que você não precisa de # ou . antes da classe.


HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="title" class="highlighted">I'm highlighted!</div>
<div id="text">Highlight me, too!</div>  
</body>
</html>



CSS

Código: Selecionar todos

#title {
    background-color: #C02942;
    border-radius: 5px;
    text-align: center;
    font-family: Verdana, Arial, Sans-Serif;
    color: #FFFFFF;
    width: 200px;
    height: 25px;
}

#text {
    background-color: #0B486B;
    border-radius: 5px;
    text-align: center;
    font-family: Vivaldi, Cursive;
    color: #FFFFFF;
    width: 200px;
    height: 25px;
}

.highlighted {
    -webkit-box-shadow: 0 0 8px #FFD700;
    -moz-box-shadow: 0 0 8px #FFD700;
    box-shadow: 0 0 8px #FFD700;
    cursor:pointer;
}


JavaScript

Código: Selecionar todos

$(document).ready(function(){ 
$('#text').click(function(){
$(this).addClass('highlighted');
});
});


Demo: http://jsfiddle.net/0ma7nkkL/4/