0Pricing
jQuery Academy · Урок

Исключение элементов с помощью .not()

Освойте метод .not(), чтобы точно исключать определённые элементы из найденного набора, уточнять выбор и предотвращать нежелательные операции с отдельными элементами.

«Исключение элементов с помощью .not()» — бесплатный урок jQuery Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 3 уроков всего.

Введение в .not()

Добро пожаловать! В этом уроке вы освоите мощный метод .not() в jQuery. Он необходим для уточнения выборки элементов.

Метод .not() позволяет исключать определённые элементы из набора найденных элементов и точно управлять тем, на какие элементы будут влиять ваши операции.

Исключение по строке селектора

Чаще всего .not() используют, передавая ему строку селектора CSS. После этого jQuery удаляет из текущей выборки все элементы, соответствующие новому селектору.

  • Сначала выполните общий выбор.
  • Затем используйте .not(), чтобы отфильтровать ненужные элементы.

Это удобно, когда проще выбрать «всё», а затем указать, что нужно «удалить».

.not() с селектором класса

Рассмотрим этот пример. Мы выберем все элементы div, а затем с помощью .not() исключим элементы с классом .special. Стили будут применены только к обычным элементам div.

<!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>

Исключение определённых элементов

Помимо строки селектора, в .not() можно напрямую передать элемент DOM или объект jQuery.

Это удобно, если у вас уже есть ссылка на конкретный элемент или элементы, которые нужно исключить из текущей выборки.

.not() со ссылкой на элемент

В этом примере мы выбираем все элементы списка (<li>). Затем находим конкретный элемент по его ID (#item2) и используем .not(), чтобы исключить его из операции стилизации.

<!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>

Пользовательское исключение с помощью функции

Для динамичной или сложной логики исключения в .not() можно передать функцию.

  • Функция выполняется для каждого элемента текущего набора.
  • Если функция возвращает true, этот элемент исключается.
  • this обозначает текущий обрабатываемый элемент DOM.

.not() с функцией: пример

В этом примере мы хотим стилизовать все абзацы, кроме тех, которые содержат слово «exclude». Функция проверяет текстовое содержимое каждого абзаца.

<!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>

Цепочка вызовов .not() для точности

Можно вызывать несколько методов .not() по цепочке или сочетать .not() с другими методами фильтрации, создавая очень точные выборки.

Каждый вызов .not() дополнительно уточняет текущий набор элементов, постепенно удаляя ненужные. Представьте это как послойное удаление элементов, которые вам не нужны.

Когда использовать .not()

.not() особенно полезен в следующих случаях:

  • У вас есть широкая первоначальная выборка, из которой нужно удалить несколько определённых типов элементов.
  • Нужно исключить элемент, на который у вас уже есть прямая ссылка.
  • Формулировка «все, кроме этих» делает код более понятным и удобным для чтения.

Это элегантный способ сузить выборку, не записывая заранее сложные отрицательные селекторы.

Быстрая проверка: использование .not()

Рассмотрим следующий HTML. Какой фрагмент кода jQuery правильно выберет все элементы <p>, кроме элемента с ID "intro"?

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

Итоги: освоение .not()

Вы успешно освоили метод .not() в jQuery!

Мы узнали, что .not() необходим для уточнения выборки путём исключения элементов на основе:

  • строки селектора CSS (например, .not('.hide'));
  • конкретного элемента DOM или объекта jQuery (например, .not(myElement));
  • функции для пользовательской динамической логики исключения.

Продолжайте практиковаться, чтобы делать выборки jQuery более точными и эффективными!

Часто задаваемые вопросы

Урок «Исключение элементов с помощью .not()» бесплатный?

Да — полный текст урока «Исключение элементов с помощью .not()» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 3 уроков всего.

Чему я научусь в уроке «Исключение элементов с помощью .not()»?

Освойте метод .not(), чтобы точно исключать определённые элементы из найденного набора, уточнять выбор и предотвращать нежелательные операции с отдельными элементами. Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать jQuery Academy?

Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.

Сколько времени занимает урок «Исключение элементов с помощью .not()»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке jQuery Academy?

Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Создание пользовательских псевдоселекторов
  2. Расширенная фильтрация с помощью .filter()
  3. Исключение элементов с помощью .not()
← Назад к jQuery Academy