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.

Enviar artigo pelo Twitter