jQuery Academy · Урок

Псевдоклассы и пользовательские селекторы

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

Раскройте возможности псевдоклассов

Добро пожаловать в раздел расширенных селекторов! Сегодня мы изучим псевдоклассы — специальные ключевые слова, добавляемые к селекторам для описания особого состояния выбранного элемента.

Они позволяют выбирать элементы, которые трудно выбрать с помощью стандартных HTML-атрибутов или имён.
Представляйте их как динамические фильтры для выбора элементов.

Они начинаются с двоеточия (:), например :hover или :first-child.

Выбор по позиции: :nth-child()

Псевдокласс :nth-child() выбирает элементы на основе их позиции среди группы соседних элементов. Он особенно полезен для оформления списков или строк таблиц.

:nth-child(n): выбирает n-й дочерний элемент.
:nth-child(odd): выбирает дочерние элементы с нечётными номерами.
:nth-child(even): выбирает дочерние элементы с чётными номерами.

Отсчёт начинается с 1 для первого дочернего элемента.

Оформление с помощью :nth-child(odd/even)

Посмотрим, как :nth-child(odd) и :nth-child(even) позволяют быстро применять чередующиеся стили, например создавать полосатое оформление списка.

Запустите этот пример, чтобы увидеть результат:

$(document).ready(function() {
  // Selects odd list items and makes their text blue
  $('li:nth-child(odd)').css('color', 'blue');
  // Selects even list items and makes their text green
  $('li:nth-child(even)').css('color', 'green');
});

// HTML Structure (imagine this is in your page):
// <ul>
//   <li>Item 1</li>
//   <li>Item 2</li>
//   <li>Item 3</li>
//   <li>Item 4</li>
// </ul>

Расширенные формулы :nth-child()

Внутри :nth-child() можно использовать более сложные формулы, например An+B. Здесь A обозначает размер цикла, а B — смещение.

:nth-child(3n): выбирает каждый третий дочерний элемент (3-й, 6-й, 9-й и т. д.).
:nth-child(3n+1): выбирает 1-й, 4-й, 7-й и следующие дочерние элементы.

Это позволяет очень точно выбирать элементы через заданные интервалы.

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

Псевдокласс :not() позволяет исключить определённые элементы из выборки. Это похоже на фразу: «выбрать все абзацы, кроме тех, у которых есть класс „intro“».

Он принимает другой селектор в качестве аргумента: :not(selector).
Это удобный способ уточнять существующие выборки без написания сложных новых селекторов.

Применение :not() на практике

Представьте, что нужно добавить рамку всем элементам списка, кроме самого первого. :not(:first-child) идеально подходит для этого.

Посмотрите, как :not() помогает исключить первый элемент:

$(document).ready(function() {
  // Selects all list items that are NOT the first child
  $('li:not(:first-child)').css('border-top', '1px solid gray');
});

// HTML Structure:
// <ul>
//   <li>First Item</li>
//   <li>Second Item</li>
//   <li>Third Item</li>
// </ul>

Выбор родительских элементов с помощью :has()

Псевдокласс :has() уникален: он выбирает элемент, если тот содержит хотя бы один элемент, соответствующий селектору, переданному в качестве аргумента.

Это похоже на запрос: «покажите все <div>, внутри которых есть тег <p>».
Так можно выбирать родительские элементы на основе характеристик их дочерних элементов.

Выделение с помощью :has()

Предположим, нужно выделить только те контейнеры <div>, которые содержат изображение. :has('img') эффективно справится с этой задачей.

Запустите этот код, чтобы увидеть, какой div получит рамку:

$(document).ready(function() {
  // Selects divs that contain an image and adds a border
  $('div:has(img)').css('border', '2px solid red');
});

// HTML Structure:
// <div id="container1">
//   <p>Text only</p>
// </div>
// <div id="container2">
//   <img src="example.png" alt="An image">
//   <p>Text and image</p>
// </div>

Пользовательские селекторы: расширение jQuery

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

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

Это расширенная возможность для действительно уникальных задач фильтрации.

Создание пользовательского :contains-word()

Создадим пользовательский селектор :contains-word(), который находит элементы, содержащие определённое слово целиком, а не только его часть.

В этом примере определяется :contains-word(), а затем используется:

$(document).ready(function() {
  // Define a custom pseudo-selector ':contains-word'
  $.expr[':']['contains-word'] = $.expr.createPseudo(function(word) {
    var pattern = new RegExp('\b' + word + '\b', 'i');
    return function(elem) {
      return pattern.test($(elem).text());
    };
  });

  // Use the custom selector to find paragraphs containing 'hello'
  $('p:contains-word("hello")').css('background-color', 'yellow');
});

// HTML Structure:
// <p>Say hello world!</p>
// <p>Another paragraph.</p>
// <p>Hello there!</p>

Задание на псевдоклассы

Рассмотрим следующий HTML:

<ul>
  <li class="special">One</li>
  <li>Two</li>
  <li class="special">Three</li>
  <li>Four</li>
  <li class="special">Five</li>
</ul>

Какой селектор jQuery выберет только элементы „Two“ и „Four“?

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

Вы освоили мощные приёмы выборки в jQuery!

Псевдоклассы (например, :nth-child(), :not(), :has()) позволяют выбирать элементы на основе их состояния или связи с другими элементами.
:nth-child() выбирает элементы по позиции, в том числе с помощью формул.
:not() исключает элементы из выборки.
:has() выбирает родительские элементы на основе их дочерних элементов.
Вы даже можете создавать собственные пользовательские псевдоселекторы с помощью jQuery.expr[':'] для очень специфичной фильтрации.

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

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

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

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

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

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

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

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

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

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

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

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

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

Расширенные селекторы атрибутов
Псевдоклассы и пользовательские селекторы
Эффективные методы обхода DOM

← Назад к jQuery Academy