0Pricing
jQuery Academy · Aula

Seletores de Atributos Avançados

Explore seletores de atributos complexos para direcionar elementos com base na presença, no valor ou em correspondências parciais de seus atributos, aumentando a precisão das seleções.

Seletores de Atributos Avançados é 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.

Olá, seletores de atributos!

Bem-vindo a uma maneira poderosa de selecionar elementos no jQuery! Vamos explorar os seletores de atributos, que permitem escolher elementos com base em seus atributos HTML.

Pense nos atributos como dados extras associados a uma tag HTML, como id, class, href, data-* e outros.

Selecionando pela presença do atributo

O seletor de atributo mais simples encontra elementos que possuem um atributo específico, independentemente do valor. Ele é escrito como [attributeName].

Isso é muito útil quando você só precisa saber se um atributo existe em um elemento. Por exemplo, $('[title]') encontrará todos os elementos com um atributo title.

Experimente: presença do atributo

Vamos usar o seletor de presença para encontrar todos os elementos que possuem um atributo title e exibir seus nomes de tag.

<p title="Hello Tooltip">This paragraph has a title.</p>
<div>Another element</div>
<span title="Span Title">A span with a title.</span>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[title]').each(function(index, element) {
      $('#output').append('<p>Found: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; with title="' + $(element).attr('title') + '"</p>');
    });
  });
</script>

Correspondendo a valores exatos de atributos

Para selecionar elementos cujo atributo possui um valor exato, use [attributeName="value"].

Esse seletor é preciso! Ele só encontrará correspondências quando o valor do atributo for idêntico ao que você especificar, incluindo maiúsculas e minúsculas (a correspondência de valores de atributos do jQuery diferencia maiúsculas de minúsculas).

Correspondência exata na prática

Encontre elementos com um atributo data-type que seja exatamente "primary".

<button data-type="primary">Submit</button>
<button data-type="secondary">Cancel</button>
<a href="#" data-type="primary">Link</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[data-type="primary"]').each(function(index, element) {
      $('#output').append('<p>Exact match: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; (Type: ' + $(element).data('type') + ')</p>');
    });
  });
</script>

Valores de atributos que começam com...

O seletor [attributeName^="value"] encontra elementos cujo valor de um atributo começa com uma string específica.

  • Ele é útil para agrupar elementos com convenções de nomenclatura semelhantes.
  • É ótimo para filtrar links (por exemplo, todos os links que começam com /products).

Valores que terminam com e que contêm

Esses seletores oferecem mais flexibilidade para correspondências parciais:

  • [attributeName$="value"]: encontra correspondências quando o valor do atributo termina com a string especificada.
  • [attributeName*="value"]: encontra correspondências quando o valor do atributo contém a string especificada em qualquer posição.

Demonstração ao vivo: correspondências parciais

Observe como ^=, $= e *= identificam elementos diferentes com base em valores parciais dos atributos href.

<a href="/products/item-1">Item 1</a>
<a href="/about/contact">Contact</a>
<a href="/products/item-2">Item 2</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('#output').append('<h3>Starts with "/products":</h3>');
    $('[href^="/products"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Ends with "contact":</h3>');
    $('[href$="contact"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Contains "item":</h3>');
    $('[href*="item"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });
  });
</script>

Seletores de palavra e hífen

Mais dois seletores especializados:

  • [attributeName~="value"]: encontra correspondências quando o valor do atributo contém uma palavra específica, delimitada por espaços. É usado frequentemente com atributos class.
  • [attributeName|="value"]: encontra correspondências quando o valor do atributo é exatamente "value" ou começa com "value-" (seguido por um hífen). É usado com frequência para códigos de idioma, como lang="en-US".

Verificação rápida: seletores

Qual(is) seletor(es) do jQuery identificaria(m) corretamente o elemento <div> abaixo?

<div class="card active-item" data-role="admin-panel" lang="en-US">
  Admin Area
</div>

Recapitulação: seletores de atributos

Excelente trabalho! Você dominou os seletores de atributos avançados:

  • [attr]: verifica a presença do atributo.
  • [attr="val"]: encontra valores exatos.
  • [attr^="val"]: encontra valores que começam com.
  • [attr$="val"]: encontra valores que terminam com.
  • [attr*="val"]: encontra valores que contêm.
  • [attr~="val"]: encontra valores que contêm uma palavra separada por espaços.
  • [attr|="val"]: encontra valores exatos ou que começam com 'val-'.

Use esses seletores para escrever código jQuery altamente preciso e eficiente!

Perguntas Frequentes

A aula “Seletores de Atributos Avançados” é grátis?

Sim — o texto completo de “Seletores de Atributos Avançados” é 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 “Seletores de Atributos Avançados”?

Explore seletores de atributos complexos para direcionar elementos com base na presença, no valor ou em correspondências parciais de seus atributos, aumentando a precisão das seleções. 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 “Seletores de Atributos Avançados”?

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. Seletores de Atributos Avançados
  2. Pseudoclasses e Seletores Personalizados
  3. Técnicas Eficientes de Percurso pelo DOM
← Voltar para jQuery Academy