Jquery - Manipulando a CSS dos elementos do documento

Manipulação do estilo visual da página.
Podemos manipular algumas características do objeto diretamente pela seu estilo ou aplicando e removendo classes a ele.

Métodos disponíveis:

1 - css - Adiciona ou altera a css atual de um elemento.
Atua diretamente no parâmetro style do objeto.
<tag style="color:blue; font-size:30px"></tag>

Importante : O método css devolve a tag modificada como resposta e com isto podemos encadear o método css : $(seletor).css(mod1).css(mod2).css(mod3).

O método CSS acima atua no style do objeto mas os métodos abaixo atuam na classe do objeto, inserindo ou removendo a classe.
<tag class="classe1 classe2"></tag>

2-AddClass : Adiciona uma classe ao elemento.

3-hasClass() : Verifica a existência de uma classe no elemento

4-removeClass() : Remove a classe do elemento.

Abaixo estão 2 divs com h2 e h3 dentro delas que podem ser alteradas.

Barra de navegação da aplicação-H2

Contato-H3

Mudar a Cor de Fundo do H2 (barra de navegação) através da css para amarelo:
$('#barranav').css('background-color','yellow');

Método CSS

Mudando multiplos atributos de H2 pelo método css (Método 1):
1-Cor de fundo para azul claro.:
2-Margem para zero.
3-Padding de 20 pixels.

$('#barranav').css('background-color','lightblue').css('margin','0px').css('padding','20px');

Mudando multiplos atributos de H2 pelo método css (Método 2):
1-Cor de fundo para verde claro.:
2-Margem para zero.
3-Padding de 10 pixels.

$('#barranav').css({'background':'lightgreen','margin':'0px','padding':'10px'});

Abaixo estão 3 input type text, 1 TextArea e 1 botão que podem ser alteradas.

Nome(P):

Email(P):

Método addClass

Vamos mudar o estilo das tags input type text aplicando um estilo a elas :
Note que muda o estilo dos botões acima do exemplo citado.
A classe aplicada foi:
    .clsExemplo1{
        border: 0px;
        padding: 10px;
    }

Vamos atribuir dois estilos de uma vez as tags input type text :
A classe aplicada foi:
    .clsExemplo1{
        border: 0px;
        padding: 10px;
    }
    .clsPadrao{         background-color: lightgray;     }

Mensagem(P):

Vamos atribuir uma classe a tag textarea :
A classe aplicada foi:
$('textarea').addClass('clsErro clsExemplo1');

Vamos perguntar ao elemento se ele tem a classe padrão :
A pergunta foi feita se o campo textarea tem a classe clsExemplo1 da seguinte maneira:
if($('textarea').hasClass('clsExemplo1')){
Clique no botão mudar do exemplo anterior para adicionar a classe e repetir o teste.
Clique no botão mudar do exemplo abaixo para remover a classe e repetir o teste.

Vamos remover a classe da tag textarea :
A classe aplicada foi:
$('textarea').addClass('clsErro clsExemplo1');