Составные селекторы

Unpoly предоставляет мощный механизм для выборки элементов на странице с помощью селекторов. Библиотека поддерживает не только стандартные CSS-селекторы, но и более сложные, составные, которые позволяют строить гибкие запросы к DOM-элементам. Составные селекторы в Unpoly дают возможность обращаться к элементам на основе их контекста, состояния или связи с другими элементами на странице. Этот механизм сильно расширяет возможности работы с элементами, особенно при динамическом обновлении содержимого без перезагрузки страницы.

Основы составных селекторов

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

Пример базового составного селектора

up.select('#container .item.active')

Этот селектор выберет все элементы с классом .item внутри контейнера с ID #container, при этом элемент должен быть активен (иметь класс active).

Составные селекторы с помощью «» и «>»

Unpoly поддерживает два ключевых символа для создания составных селекторов — пробел и знак «>». Они используются для указания отношений между элементами.

  • Пробел — указывает на любой уровень вложенности.
  • Знак «>» — указывает на прямое вложение, то есть элемент должен быть непосредственным потомком другого.

Пример с пробелом:

up.select('#container .item .price')

Этот селектор найдет все элементы с классом .price, которые находятся где-либо внутри элементов с классом .item, которые, в свою очередь, являются потомками контейнера с ID #container.

Пример с «>»:

up.select('#container > .item > .price')

Этот селектор выбирает элементы с классом .price, которые являются непосредственными потомками элементов с классом .item, которые, в свою очередь, являются непосредственными потомками элемента с ID #container.

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

Unpoly также поддерживает псевдоклассы и атрибуты, что позволяет создавать более сложные и точные селекторы.

Псевдоклассы

Псевдоклассы позволяют выбирать элементы в зависимости от их состояния, порядка или других характеристик. Например, можно выбрать первый или последний элемент из коллекции:

up.select('#container .item:first-child')

Этот селектор найдет первый элемент с классом .item, который является первым потомком внутри контейнера с ID #container.

up.select('#container .item:last-child')

Этот селектор выбирает последний элемент с классом .item внутри контейнера.

Атрибуты

Атрибуты позволяют выбирать элементы, исходя из наличия или значения определенного атрибута.

up.select('input[type="text"]')

Этот селектор найдет все элементы input с атрибутом type, равным text.

up.select('a[href^="https://"]')

Этот селектор выбирает все ссылки (a), у которых атрибут href начинается с https://.

Комбинированные селекторы

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

Пример комбинированного селектора:

up.select('#container .item.active[data-id="123"]')

Этот селектор выберет все элементы с классом .item внутри контейнера с ID #container, которые активны (имеют класс active) и имеют атрибут data-id, равный "123".

Псевдоклассы для работы с динамическими состояниями

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

Пример с псевдоклассом :up-done

up.select('.item:up-done')

Этот селектор выбирает все элементы с классом .item, которые завершили свой процесс (например, асинхронное обновление содержимого или запросы к серверу).

Пример с псевдоклассом :up-started

up.select('.item:up-started')

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

Использование с компонентами Unpoly

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

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

up.update('#container', '/path/to/partial').then(function() {
  up.select('#container .item.new')
})

Этот код сначала обновляет часть страницы, выбирая элемент с ID #container, а затем выполняет выборку элементов с классом .new внутри этого контейнера, как только обновление завершится.

Преимущества использования составных селекторов

  • Гибкость: Составные селекторы позволяют точно указывать, какие именно элементы необходимо выбрать, что уменьшает вероятность ошибок при манипуляции с DOM.
  • Повторное использование: Они могут быть использованы в различных контекстах, улучшая переиспользуемость кода.
  • Производительность: Составные селекторы позволяют избегать избыточных выборок и манипуляций с элементами, что способствует улучшению производительности, особенно на больших страницах.

Использование составных селекторов в Unpoly делает работу с динамическим контентом на странице значительно удобнее и эффективнее, предоставляя разработчикам гибкие инструменты для точного управления состоянием элементов.

Оглавление