Podemos utilizar jQuery para manipular um documento HTML de diversas formas. Por exemplo, podemos modificar atributos, classes CSS, valores de campos de formulários e mesmo o conteúdo em HTML do documento em si.

Se você já viu os artigos anteriores de jQuery básico e do uso de seletores jQuery estará apto a ver como realizar estas operações. Vamos a elas.

Manipulação de Atributos

• attr(nome):Objeto. O método attr traz o conteúdo do atributo solicitado do primeiro dos elementos selecionados. Exemplo:
  alert( $("img").attr("alt") );
• attr(propriedades):jQuery. Outra assinatura do método attr permite definir diversos atributos de todos elementos selecionados. Exemplo:
  $("img").attr({title:"Uninove",alt:"Logotipo da Uninove"});
• attr(chave,valor):jQuery. Desta forma podemos definir um determinado atributo em todos elementos selecionados. Exemplo:
  $("button:last").attr("disabled","disabled");
• attr(chave,função):jQuery. Não será abordada neste artigo.
• removeAttr(nome):jQuery. Remove um atributo de todos elementos selecionados. Exemplo:
  $("form :checkbox").removeAttr("checked");

Manipulação de Classes CSS

• addClass(classe):jQuery. Adiciona classe aos elementos selecionados. Exemplo:
  $("p:first").addClass("intro");
• hasClass(classe):boolean. Retorna true se a classe especificada está presente em ao menos um dos elementos selecionados. Exemplo:
  if ($("p").hasClass("azul")) alert ("Texto da classe 'azul' encontrado");
• removeClass(classe):jQuery. Remove todas (ou as classes especificadas) dos elementos selecionados. Exemplo:
  if ($("p").hasClass("azul")) $("p").removeClass("azul");
• toggleClass(classe):jQuery. Adiciona a classe se ela não estiver presente e remove-a se ela estiver. Exemplo:
  $("p").click(function(){ $(this).toggleClass("azul"); });
• toggleClass(classe,chave):jQuery. Não será abordada neste artigo.

HTML

• html():String. Obtém o conteúdo HTML do primeiro dos elementos selecionados. Exemplo:
  $("p").click(function(){ alert($(this).html()); });
• html(valor):jQuery. Define o conteúdo HTML dos elementos selecionados. Exemplo:
  $("div").html("<p><em>Sim</em> - Não - <em>Sim</em></p>");

Texto

• text():String. Obtém o texto combinado de todos elementos selecionados. Semelhante ao html(), mas opera sobre todos elementos selecionados e obtém não o código HTML, mas somente o texto contido nestes elementos. Exemplo:
  $("p:first").click(function(){ alert($(this).html()); });
• text(valor):jQuery. Define o conteúdo de texto dos elementos selecionados. Para comparar com o método html(valor) veja o resultado deste exemplo:
  $("p:last").text("Um <em>texto</em> adicional");

Valores de campos de formulário

• val():String, Array. Obtém o valor de entrada do primeiro dos elementos selecionados. Este valor pode ser obtido de campos de formulário, incluindo caixas de combinação e áreas de texto. Caixas de combinação multiseleção e grupos de caixas de checagem retornam um vetor de valores. Neste caso eu prefiro sugerir que você veja o exemplo fornecido na documentação do JQuery.
• val(valor):jQuery. Define valor atribuído aos elementos selecionados. Também é aplicado a campos de formulários. Exemplo:
  $("input[type='text']").val("Preencha este campo");
• val(valor):jQuery. Verifica ou seleciona todos elementos radio e checkboxes e seleciona opções que combinem com um conjunto de valores. Este é outro caso onde sugiro o exemplo da documentação do jQuery.