jQuery Academy · Урок

Создание пользовательских псевдоселекторов

Научитесь регистрировать собственные псевдоселекторы с помощью jQuery.expr[':'], чтобы упростить сложную логику выбора элементов и повысить читаемость кода.

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

Зачем нужны пользовательские селекторы

Встроенные селекторы jQuery невероятно мощны, но иногда возникают особые потребности в фильтрации, которые оказываются сложными или повторяются слишком часто.

В таких случаях полезны пользовательские псевдоселекторы! Они позволяют определять собственные специализированные фильтры, упрощая сложную логику выбора и делая код более чистым и понятным.

Когда стандартных селекторов недостаточно

Представьте, что Вам часто требуется выбрать все элементы <div>, у которых есть не только определённый класс, но и атрибут data-status со значением 'active'.

Стандартные селекторы можно объединить, но при более сложной логике или частом применении в приложении такая конструкция может стать длинной и менее понятной.

Знакомство с jQuery.expr[':']

jQuery.expr[':'] — это объект, в котором регистрируются пользовательские псевдоселекторы. Представляйте его как расширение основного механизма выбора jQuery.

Когда jQuery встречает селектор вроде :myCustomSelector, он ищет myCustomSelector в этом объекте. Вы присваиваете функции ключ (имя своего селектора), после чего jQuery выполняет эту функцию для каждого проверяемого элемента.

Определение `:has-tooltip`

Определим простой пользовательский селектор :has-tooltip, который находит элементы с атрибутом title. Вот как добавить его в jQuery.expr[':'].

Переданная Вами функция получает текущий элемент DOM elem, который проверяется. Она должна возвращать true, если элемент соответствует критериям, и false в противном случае.

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

Использование пользовательского селектора

Теперь, когда селектор :has-tooltip определён, его можно использовать так же, как любой другой псевдоселектор jQuery! Попробуйте выполнить пример ниже.

Он выделит все элементы с атрибутом title, демонстрируя возможности нового пользовательского фильтра.

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

Аргументы `elem`, `i` и `match`

При выполнении функции пользовательского селектора она получает три важных аргумента:

elem: текущий проверяемый элемент DOM.
i: индекс elem в наборе элементов, по которому в данный момент выполняет итерацию jQuery.
match: массив, содержащий результаты регулярного выражения, использованного для разбора селектора. Он необходим селекторам, принимающим аргументы.

В простых селекторах в основном используется аргумент elem.

Селектор на основе атрибутов данных

Создадим селектор :data-status(active), чтобы находить элементы, у которых атрибут data-status равен 'active'. Это показывает, как использовать аргумент match.

Значение 'active' (аргумент в скобках) будет находиться в match[3]. Благодаря этому селектор становится динамическим!

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

Понимание `match[3]`

Массив match содержит результат разбора строки селектора с помощью внутреннего регулярного выражения jQuery. Для селектора вида :yourSelector(argument) часть argument обычно сохраняется в match[3].

Этот механизм крайне важен для создания динамических и гибких пользовательских селекторов, которые принимают параметры, благодаря чему их можно повторно использовать в различных сценариях фильтрации и делать более мощными.

Расширенная логика: `:containsExact`

Создадим более продвинутый селектор: :containsExact(text). В отличие от стандартного :contains() в jQuery, он выбирает только те элементы, всё текстовое содержимое которых (без учёта дочерних элементов) в точности совпадает с указанным текстом.

Для этого часто требуется тщательно сравнить $(elem).text().trim(), чтобы убедиться в точном совпадении.

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

Советы по созданию пользовательских селекторов

При создании пользовательских селекторов учитывайте следующие рекомендации:

Производительность: сложная логика может снижать производительность, особенно при работе с большими DOM-деревьями. Оптимизируйте функции селекторов.
Понятность: давайте селекторам понятные имена, чтобы их назначение сразу было очевидно каждому, кто читает ваш код.
Повторное использование: проектируйте их достаточно универсальными, чтобы применять в разных контекстах, а не только в одном конкретном сценарии.
Избегайте конфликтов: выбирайте уникальные имена, чтобы предотвратить конфликты с будущими селекторами jQuery или другими подключаемыми модулями.

Задание на пользовательский селектор

Вы хотите создать пользовательский селектор :is-empty, который выбирает элементы без текстового содержимого и дочерних элементов. Он похож на встроенный селектор jQuery :empty.

Какой из следующих фрагментов кода правильно определяет этот пользовательский псевдоселектор?

Итоги: пользовательские селекторы

В этом уроке вы узнали, как расширять мощные возможности jQuery по выбору элементов, создавая собственные пользовательские псевдоселекторы с помощью jQuery.expr[':'].

Вы изучили определение простых селекторов, передачу им аргументов через массив match и их применение для упрощения сложной логики фильтрации. В результате код jQuery становится более понятным, удобным для сопровождения и эффективным.

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

Урок «Создание пользовательских псевдоселекторов» бесплатный?

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

Чему я научусь в уроке «Создание пользовательских псевдоселекторов»?

Научитесь регистрировать собственные псевдоселекторы с помощью jQuery.expr[':'], чтобы упростить сложную логику выбора элементов и повысить читаемость кода. Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «Создание пользовательских псевдоселекторов»?

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

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

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

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

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

← Назад к jQuery Academy