0Pricing
jQuery Academy · Aula

Uso dos Atributos de Dados do HTML5

Aprenda a armazenar e recuperar dados específicos da aplicação diretamente nos elementos HTML usando atributos de dados, permitindo interfaces de usuário altamente dinâmicas e orientadas por dados.

Uso dos Atributos de Dados do HTML5 é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 1 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de jQuery Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de jQuery Academy inclui 3 aulas no total.

Conheça os atributos de dados do HTML5

O HTML5 introduziu os atributos de dados para permitir que você armazene dados personalizados diretamente em elementos HTML padrão.

Pense neles como compartimentos secretos nas suas tags HTML, contendo informações extras que não devem ser exibidas. Isso torna seu HTML mais semântico e seu JavaScript mais poderoso, pois permite associar dados diretamente aos elementos.

Por que os atributos de dados são úteis

Antes dos atributos de dados, os desenvolvedores costumavam usar classes, IDs ou até campos de entrada ocultos para armazenar dados específicos dos elementos. Porém, esses métodos têm desvantagens:

  • Classes/IDs: frequentemente usados de forma inadequada para estilização ou seleção, e não para dados.
  • Campos ocultos: poluem o DOM e destinam-se ao envio de formulários.

Os atributos de dados oferecem uma forma limpa e padronizada de incorporar dados personalizados diretamente no local adequado.

A regra de nomenclatura `data-`

Todos os atributos de dados devem começar com o prefixo data-. Depois do prefixo, você pode dar ao atributo o nome que quiser, usando letras minúsculas, números, hífens e sublinhados.

  • data-id="123"
  • data-status="active"
  • data-item-price="9.99"

Esse prefixo padrão garante que seus atributos personalizados não entrem em conflito com atributos HTML existentes ou futuros.

Incorporação de dados no HTML

Você pode adicionar facilmente atributos de dados diretamente na marcação HTML. Assim como qualquer outro atributo, eles têm um nome e um valor.

Veja um exemplo: adicionaremos data-product-id e data-category a um botão.

<button id="buyButton" data-product-id="456" data-category="electronics">
  Buy Now
</button>

<script>
  // JavaScript goes here later
</script>

Obtenção de dados com jQuery

O jQuery oferece um método extremamente conveniente, .data(), para recuperar valores dos atributos de dados. Ele interpreta automaticamente o prefixo data- para você.

Para obter um atributo específico, passe seu nome (sem data-) para .data().

<button id="myButton" data-user-id="101" data-role="admin">
  User Profile
</button>

<script>
  $(document).ready(function() {
    const userId = $('#myButton').data('user-id');
    const userRole = $('#myButton').data('role');
    
    console.log("User ID:", userId);
    console.log("User Role:", userRole);
  });
</script>

Alteração dinâmica de dados

O método .data() não serve apenas para leitura; você também pode usá-lo para atualizar ou adicionar novos atributos de dados dinamicamente.

Passe dois argumentos: o nome do atributo (sem data-) e o novo valor. Isso atualiza o cache interno de dados do jQuery e, no caso de atributos de dados do HTML5, também atualiza o próprio atributo no DOM.

<div id="statusBox" data-status="pending">
  Current Status
</div>

<script>
  $(document).ready(function() {
    console.log("Initial status:", $('#statusBox').data('status'));
    
    // Update the status
    $('#statusBox').data('status', 'complete');
    
    console.log("Updated status:", $('#statusBox').data('status'));
  });
</script>

Tratamento inteligente de tipos de dados

Um dos recursos interessantes de .data() do jQuery é a conversão automática de tipos. Ao recuperar atributos de dados, o jQuery tenta converter valores de texto em tipos JavaScript mais apropriados.

  • "true" e "false" tornam-se valores booleanos.
  • "123" torna-se um número.
  • "[1,2]" e "{name:'X'}" tornam-se matrizes/objetos (se forem JSON válido).

Isso evita que você precise fazer a análise manualmente!

Uso prático: alternância de estado

Os atributos de dados são perfeitos para gerenciar o estado de elementos da interface do usuário. Vamos criar um botão de alternância simples que altera seu texto e estado com base em um atributo data-active.

Clique no botão para ver o estado mudar!

<button id="toggleBtn" data-active="false">
  Activate Feature
</button>

<script>
  $(document).ready(function() {
    $('#toggleBtn').on('click', function() {
      let isActive = $(this).data('active');
      
      if (isActive) {
        $(this).data('active', false);
        $(this).text('Activate Feature');
        $(this).css('background-color', '#f0f0f0');
      } else {
        $(this).data('active', true);
        $(this).text('Deactivate Feature');
        $(this).css('background-color', '#d4edda');
      }
      console.log("Active state:", $(this).data('active'));
    });
  });
</script>

Dicas para usar atributos de dados

Tenha estas práticas recomendadas em mente para usar os atributos de dados de forma limpa e eficaz:

  • Use-os para o estado da interface: são ideais para armazenar estados temporários da interface, configurações ou referências.
  • Evite dados grandes: eles não servem para armazenar grandes conjuntos de dados; mantenha os valores concisos.
  • Nomenclatura semântica: escolha nomes claros e descritivos (por exemplo, data-user-id, e não data-u).
  • Não substitua os dados da retaguarda: continue buscando dados complexos no servidor; não incorpore tudo nele.

Questionário sobre atributos de dados

Considere o seguinte HTML e JavaScript:

<div id="item" data-price="25.50" data-available="true">
  Product Info
</div>

<script>
  $(document).ready(function() {
    const itemDiv = $('#item');
    const price = itemDiv.data('price');
    const available = itemDiv.data('available');
    
    itemDiv.data('stock', 100);
    const stock = itemDiv.data('stock');
    
    console.log(typeof price);
    console.log(typeof available);
    console.log(stock);
  });
</script>

O que será registrado no console?

Recapitulação: atributos de dados liberados

Parabéns! Você aprendeu a aproveitar o poder dos atributos de dados do HTML5 com jQuery.

  • Eles oferecem uma maneira organizada de incorporar dados personalizados diretamente no HTML.
  • O método .data() do jQuery facilita muito a recuperação e a atualização desses dados.
  • A conversão automática de tipos simplifica o tratamento dos dados.
  • Eles são excelentes para gerenciar o estado da interface e criar interfaces dinâmicas.

Continue praticando, e você encontrará inúmeras maneiras de tornar suas aplicações web mais inteligentes e interativas!

Perguntas Frequentes

A aula “Uso dos Atributos de Dados do HTML5” é grátis?

Sim — o texto completo de “Uso dos Atributos de Dados do HTML5” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de jQuery Academy, atualize para CoddyKit PRO. O curso de jQuery Academy inclui 3 aulas no total.

O que vou aprender em “Uso dos Atributos de Dados do HTML5”?

Aprenda a armazenar e recuperar dados específicos da aplicação diretamente nos elementos HTML usando atributos de dados, permitindo interfaces de usuário altamente dinâmicas e orientadas por dados. Você pratica jQuery Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar jQuery Academy?

Nenhuma experiência prévia é necessária. jQuery Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 3.

Quanto tempo leva a aula “Uso dos Atributos de Dados do HTML5”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de jQuery Academy?

Sim. Cada aula de jQuery Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Uso dos Atributos de Dados do HTML5
  2. Geração Dinâmica de Conteúdo com Dados
  3. Integração Básica de Modelos no Cliente
← Voltar para jQuery Academy