Manipulação do estilo visual da página

Esta é uma das melhores inovações do JQuery - Poder manipular o estilo de elementos da página depois dela montada e exibida.

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.
Ex: Podemos remover o estilo de : <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.

---

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.

---

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;     }

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

---

---

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