jQuery Academy · Aula

Exclusão de Elementos com .not()

Domine o método .not() para excluir precisamente elementos específicos de um conjunto correspondente, refinando suas seleções e evitando operações indesejadas em determinados elementos.

Aula 3 de 311 etapas

Exclusão de Elementos com .not() é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 3 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.

Introdução a .not()

Boas-vindas! Nesta lição, você dominará o poderoso método .not() do jQuery. Ele é essencial para refinar suas seleções de elementos.

O método .not() permite excluir elementos específicos de um conjunto de elementos correspondentes, proporcionando controle preciso sobre quais elementos serão afetados pelas suas operações.

Exclusão por cadeia de seletor

A forma mais comum de usar .not() é passar uma cadeia de seletor CSS. O jQuery removerá da seleção atual todos os elementos que corresponderem a esse novo seletor.

Primeiro, faça uma seleção ampla.
Em seguida, use .not() para filtrar os elementos indesejados.

Isso é útil quando é mais fácil selecionar 'tudo' e depois especificar o que deve ser 'removido'.

.not() com um seletor de classe

Experimente este exemplo. Vamos selecionar todos os elementos div e usar .not() para excluir aqueles que têm a classe .special. Apenas as divs que não são especiais receberão estilo.

<!DOCTYPE html>
<html>
<head>
<style>
  .red { color: red; }
</style>
</head>
<body>
  <div class="box">Item 1</div>
  <div class="box special">Item 2</div>
  <div class="box">Item 3</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // Select all .box divs, then exclude the one with .special
      $('.box').not('.special').addClass('red');
    });
  </script>
</body>
</html>

Exclusão de elementos específicos

Além de uma cadeia de seletor, você também pode passar diretamente um elemento DOM ou um objeto jQuery para .not().

Isso é útil quando você já tem uma referência ao elemento exato (ou aos elementos exatos) que deseja excluir da seleção atual.

.not() com uma referência de elemento

Neste exemplo, selecionamos todos os itens de lista (<li>). Em seguida, identificamos um item específico pelo seu ID (#item2) e usamos .not() para excluí-lo da operação de estilização.

<!DOCTYPE html>
<html>
<head>
<style>
  .bold { font-weight: bold; }
</style>
</head>
<body>
  <ul>
    <li>List Item 1</li>
    <li id="item2">List Item 2</li>
    <li>List Item 3</li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // Select all <li>, then exclude the specific #item2
      $('li').not($('#item2')).addClass('bold');
    });
  </script>
</body>
</html>

Exclusão personalizada com uma função

Para uma lógica de exclusão altamente dinâmica ou complexa, você pode passar uma função para .not().

A função é executada para cada elemento do conjunto atual.
Se a função retornar true, esse elemento será excluído.
this faz referência ao elemento DOM atual que está sendo processado.

.not() com um exemplo de função

Aqui, queremos estilizar todos os parágrafos, exceto aqueles que contêm a palavra 'exclude'. A função verifica o conteúdo de texto de cada parágrafo.

<!DOCTYPE html>
<html>
<head>
<style>
  .italic { font-style: italic; }
</style>
</head>
<body>
  <p>This is a normal paragraph.</p>
  <p>This paragraph contains 'exclude'.</p>
  <p>Another normal paragraph here.</p>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $('p').not(function() {
        // Exclude paragraphs containing 'exclude'
        return $(this).text().includes('exclude');
      }).addClass('italic');
    });
  </script>
</body>
</html>

Encadeando .not() para obter precisão

Você pode encadear várias chamadas de .not() ou combinar .not() com outros métodos de filtragem para criar seleções extremamente precisas.

Cada chamada de .not() refina ainda mais o conjunto atual de elementos, removendo mais elementos ao longo do processo. Pense nisso como retirar camadas de elementos de que você não precisa.

Quando usar .not()

.not() é extremamente útil em situações nas quais:

Você tem uma seleção inicial ampla e quer remover alguns tipos específicos.
Precisa excluir um elemento para o qual já tem uma referência direta.
Expressar 'todos, *exceto* estes' torna seu código mais claro e legível.

É uma forma elegante de restringir seu foco sem escrever antecipadamente seletores negativos complexos.

Verificação rápida: usando .not()

Considere o HTML a seguir. Qual trecho de código jQuery selecionaria corretamente todos os elementos <p>, exceto aquele com o ID "intro"?

<div>
  <p>Paragraph 1</p>
  <p id="intro">Introduction</p>
  <p>Paragraph 3</p>
</div>

Responda na aula interativa

Recapitulação: dominando .not()

Você dominou com sucesso o método .not() do jQuery!

Aprendemos que .not() é fundamental para refinar seleções, excluindo elementos com base em:

Uma cadeia de seletor CSS (por exemplo, .not('.hide'))
Um elemento DOM específico ou um objeto jQuery (por exemplo, .not(myElement))
Uma função para uma lógica de exclusão personalizada e dinâmica.

Continue praticando para tornar suas seleções jQuery mais precisas e eficientes!

Grátis para começar

Aprenda JavaScript com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 22
Aulas: 48

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Exclusão de Elementos com .not()” é grátis?

Sim — o texto completo de “Exclusão de Elementos com .not()” é 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 “Exclusão de Elementos com .not()”?

Domine o método .not() para excluir precisamente elementos específicos de um conjunto correspondente, refinando suas seleções e evitando operações indesejadas em determinados elementos. 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 3 de 3.

Quanto tempo leva a aula “Exclusão de Elementos com .not()”?

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

Criação de Pseudosselet ores Personalizados
Filtragem Avançada com .filter()
Exclusão de Elementos com .not()

← Voltar para jQuery Academy