Что такое фильтры в jQuery 4

Что такое фильтры в jQuery 4 и зачем они нужны? В этом уроке вы узнаете:

• Что такое фильтры в jQuery 4;
• Как работают фильтры;
• Категории фильтров.

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

$('li') // Выбрать все элементы списка.

Часто нужно работать не со всеми элементами, а только с некоторыми из них. Для этого используют фильтры. Фильтры в jQuery — это способ сузить выборку элементов.

Селекторы выбирают элементы, фильтры сужают выборку.

Как работают фильтры

Фильтры добавляются к селектору через двоеточие ::

$('li:first') // Выбрать первый элемент из выборки.
$('li:last')  // Выбрать последний элемент из выборки.

Напоминаю, в jQuery 4 есть два вида фильтров:

• Фильтры-селекторы — являются частью селектора $('sel:filter').
• Методы фильтрации — работают с уже выбранным набором элементов $('sel').filter() (изучим их позже, не в этом модуле).

Еще стоит отметить, что некоторые фильтры-селекторы :filter являются устаревшими и их не рекомендуется использовать при создании новых скриптов. Но их надо знать, поскольку вы часто будете работать со старым кодом на различных сайтах.

Все устаревшие фильтры-селекторы будут отдельно указаны в следующих уроках.

Категории фильтров-селекторов в jQuery 4

Фильтры-селекторы в jQuery 4 разделены на несколько категорий, рассмотрим их.

Basic Filter (базовые фильтры)

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

Часто используемые:

• :first — выбрать первый элемент;
• :last — выбрать последний элемент;
• :eq(index) — выбрать элемент по индексу (отсчёт с нуля);
• :even — выбрать чётные элементы (отсчёт с нуля: 0,2,4…);
• :odd — выбрать нечётные элементы (отсчёт с нуля: 1,3,5…);
• и т. д.

Child Filter (фильтры потомков)

Работают с позицией элемента относительно его родителя.

Часто используемые:

• :first-child — выбрать первого потомка;
• :last-child — выбрать последнего потомка;
• :nth-child(n) — выбрать n-го потомка;
• :only-child — выбрать единственного потомка;
• и т. д.

Content Filter (контентные фильтры)

Фильтрация по содержимому элементов.

Часто используемые:

• :contains("text") — выбрать элементы, содержащие указанный текст;
• :empty — выбрать пустой элемент;
• :parent — выбрать непустые элементы (имеющие дочерние узлы);
• :has(selector) — выбрать элементы, которые содержат указанный вложенный элемент.

Visibility Filter (фильтры видимости)

Фильтрация по видимости элементов.

Часто используемые:

• :visible — выбрать видимые элементы;
• :hidden — выбрать скрытые элементы.

Form Filter (фильтры форм)

Работа с элементами форм (формы будем рассматривать в следующих модулях).

Часто используемые:

• :input — выбрать элементы формы, такие как input, textarea, select, button;
• :text — выбрать текстовые поля;
• :checked — выбрать отмеченные элементы;
• :selected — выбрать выбранные элементы;
• и т. д.

Примеры с фильтрами в jQuery 4

Полный код рассмотрим в следующих уроках.

Примеры фильтров:

$('li:first')             // Выбрать первый элемент списка.
$('li:even')              // Выбрать чётные элементы списка.
$('p:contains("jQuery")') // Выбрать абзац, содержащий слово "jQuery".
$('div:has(span)')        // Найти элементы div, внутри которых находится <span>.
$('input:checked')        // Выбрать отмеченные чекбоксы формы.

Итог урока

• Фильтры позволяют работать не со всеми элементами, а только с нужными;
• Фильтры-селекторы добавляются к селектору через знак :;
• Фильтры-селекторы делятся на категории: Basic, Child, Content, Visibility, Form.

Главное, что вы должны понять в этом модуле:

• Селектор → выбирает элементы.
• Фильтр → сужает выборку.

$('selector:filter')