0Pricing
jQuery Academy · Aula

Criação de Pseudosselet ores Personalizados

Aprenda a registrar seus próprios pseudoseletores personalizados com jQuery.expr[':'] para simplificar a lógica complexa de seleção de elementos e melhorar a legibilidade do código.

Criação de Pseudosselet ores Personalizados é 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.

Por que usar seletores personalizados?

Os seletores integrados do jQuery são incrivelmente poderosos, mas às vezes você encontra necessidades específicas de filtragem que são complexas ou repetitivas.

É nesse contexto que os pseud seletores personalizados são úteis! Eles permitem definir seus próprios filtros especializados, simplificando a lógica de seleção complexa e tornando seu código mais limpo e fácil de ler.

Quando os seletores padrão não são suficientes

Imagine que você frequentemente precise selecionar todos os elementos <div> que não apenas tenham uma classe específica, mas também um atributo data-status definido como 'active'.

Embora seja possível combinar seletores padrão, isso pode ficar longo e menos intuitivo se a lógica for mais complexa ou se você precisar aplicá-la frequentemente em toda a aplicação.

Conheça jQuery.expr[':']

jQuery.expr[':'] é o objeto no qual você registra seus pseud seletores personalizados. Pense nele como uma extensão do mecanismo central de seleção do jQuery.

Quando o jQuery encontra um seletor como :myCustomSelector, ele procura myCustomSelector nesse objeto. Você atribui uma função a uma chave (o nome do seu seletor), que o jQuery então executa para cada elemento testado.

Definindo `:has-tooltip`

Vamos definir um seletor personalizado simples, :has-tooltip, que identifica elementos com um atributo title. Veja como adicioná-lo a jQuery.expr[':'].

A função fornecida recebe o elemento DOM elem que está sendo testado. Ela deve retornar true se o elemento atender aos seus critérios e false caso contrário.

jQuery.expr[':'].hasTooltip = function(elem) {
  // Check if the element has a 'title' attribute
  return !!$(elem).attr('title');
};

Usando seu seletor personalizado

Agora que nosso seletor :has-tooltip está definido, podemos usá-lo como qualquer outro pseud seletor do jQuery! Experimente executar o exemplo abaixo.

Ele destacará todos os elementos que têm um atributo title, demonstrando o poder do seu novo filtro personalizado.

<!DOCTYPE html>
<html>
<head>
<title>Custom Selector Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .highlight {
    border: 2px solid green;
    background-color: #e0ffe0;
  }
</style>
</head>
<body>
  <p title="This is a tooltip">Paragraph with tooltip</p>
  <div id="no-tooltip">Just a div</div>
  <span title="Another tooltip here">Span with tooltip</span>

  <script>
    jQuery.expr[':'].hasTooltip = function(elem) {
      return !!$(elem).attr('title');
    };

    $(document).ready(function() {
      $('p:has-tooltip, span:has-tooltip').addClass('highlight');
    });
  </script>
</body>
</html>

Os argumentos `elem`, `i` e `match`

Quando a função do seu seletor personalizado é executada, ela recebe três argumentos importantes:

  • elem: o elemento DOM atual que está sendo testado.
  • i: o índice de elem no conjunto de elementos que o jQuery está percorrendo no momento.
  • match: um vetor que contém os resultados da expressão regular usada para analisar o seletor. Isso é essencial para seletores que aceitam argumentos.

Para seletores simples, você usará principalmente o argumento elem.

Seletor baseado em atributos de dados

Vamos criar um seletor :data-status(active) para encontrar elementos cujo atributo data-status seja igual a 'active'. Isso mostra como usar o argumento match.

O valor 'active' (o argumento dentro dos parênteses) será encontrado em match[3]. Isso permite que seu seletor seja dinâmico!

<!DOCTYPE html>
<html>
<head>
<title>Data Status Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .active-item {
    background-color: lightgreen;
    padding: 5px;
    margin: 3px;
  }
</style>
</head>
<body>
  <div data-status="active">Item 1 (Active)</div>
  <div data-status="inactive">Item 2 (Inactive)</div>
  <p data-status="active">Item 3 (Active)</p>
  <span>Item 4 (No Status)</span>

  <script>
    jQuery.expr[':'].dataStatus = function(elem, i, match) {
      const expectedStatus = match[3]; // e.g., 'active' from :data-status(active)
      const actualStatus = $(elem).data('status');
      return actualStatus === expectedStatus;
    };

    $(document).ready(function() {
      $(':data-status(active)').addClass('active-item');
    });
  </script>
</body>
</html>

Entendendo `match[3]`

A matriz match é o resultado da análise da expressão regular interna do jQuery aplicada à sua cadeia de seletor. Para um seletor como :yourSelector(argument), a parte argument normalmente é capturada em match[3].

Esse mecanismo é fundamental para criar seletores personalizados dinâmicos e flexíveis que aceitam parâmetros, tornando-os mais reutilizáveis e poderosos em diversos cenários de filtragem.

Lógica avançada: `:containsExact`

Vamos criar um seletor mais avançado: :containsExact(text). Diferentemente do :contains() padrão do jQuery, ele corresponderá apenas aos elementos cujo conteúdo de texto *inteiro* (excluindo elementos filhos) seja exatamente o texto fornecido.

Isso geralmente envolve comparar cuidadosamente $(elem).text().trim() para garantir uma correspondência exata.

<!DOCTYPE html>
<html>
<head>
<title>Contains Exact Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .exact-match {
    font-weight: bold;
    color: blue;
    background-color: #e0f0ff;
    padding: 5px;
    margin: 3px;
  }
</style>
</head>
<body>
  <div>Hello World</div>
  <div>Hello there!</div>
  <p>Hello</p>
  <span>World</span>

  <script>
    jQuery.expr[':'].containsExact = function(elem, i, match) {
      const searchText = match[3]; // The text inside the parentheses
      const elementText = $(elem).text().trim();
      return elementText === searchText;
    };

    $(document).ready(function() {
      $(':containsExact(Hello World)').addClass('exact-match');
    });
  </script>
</body>
</html>

Dicas para seletores personalizados

Tenha estas práticas recomendadas em mente ao criar seus seletores personalizados:

  • Desempenho: Uma lógica complexa pode afetar o desempenho, especialmente em DOMs grandes. Otimize suas funções de seletor.
  • Clareza: Dê nomes claros aos seus seletores para que sua finalidade seja imediatamente evidente para qualquer pessoa que leia seu código.
  • Reutilização: Projete-os de forma genérica o suficiente para serem úteis em vários contextos, não apenas em um cenário específico.
  • Evite conflitos: Escolha nomes exclusivos para evitar conflitos com futuros seletores do jQuery ou com outros plug-ins que você possa usar.

Desafio: seletor personalizado

Você quer criar um seletor personalizado :is-empty que selecione elementos sem conteúdo de texto e sem elementos filhos. Isso é semelhante ao seletor integrado :empty do jQuery.

Qual dos seguintes trechos de código define corretamente esse pseudo-seletor personalizado?

Recapitulação: seletores personalizados

Nesta lição, você aprendeu a ampliar os recursos avançados de seleção do jQuery criando seus próprios pseudo-seletores personalizados com jQuery.expr[':'].

Você explorou como definir seletores simples, passar argumentos para eles por meio da matriz match e aplicá-los para simplificar uma lógica complexa de filtragem, tornando, em última análise, seu código jQuery mais legível, fácil de manter e eficiente.

Perguntas Frequentes

A aula “Criação de Pseudosselet ores Personalizados” é grátis?

Sim — o texto completo de “Criação de Pseudosselet ores Personalizados” é 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 “Criação de Pseudosselet ores Personalizados”?

Aprenda a registrar seus próprios pseudoseletores personalizados com jQuery.expr[':'] para simplificar a lógica complexa de seleção de elementos e melhorar a legibilidade do código. 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 “Criação de Pseudosselet ores Personalizados”?

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. Criação de Pseudosselet ores Personalizados
  2. Filtragem Avançada com .filter()
  3. Exclusão de Elementos com .not()
← Voltar para jQuery Academy