JavaScript 4 хв
Оновлено:
Теги:

Фільтри в jQuery та для чого вони використовуються

Таблиця на 200 рядків. Треба підсвітити кожен парний рядок — але тільки серед видимих, і тільки тих, де в data-status є слово active. Без фільтрів — цикл з трьома умовами. З фільтрами — один рядок:

$('tr:visible:even[data-status*="active"]').addClass('highlight');

Це і є сенс фільтрів. Не синтаксична краса — зекономлений цикл.

Що таке фільтр у jQuery

Фільтр — псевдоклас, який jQuery додає поверх стандартного CSS-селектора. Частина з них збігається з CSS3 (:first-child, :checked), частина — суто jQuery-специфіка (:contains, :has, :eq). Браузер про останні нічого не знає — їх обробляє Sizzle, внутрішній селекторний рушій jQuery.

Офіційна документація ділить фільтри на чотири категорії: базові, контенту, атрибутів і форм. Пройдемо кожну.

Базові фільтри

Найчастіше вживана категорія. Працюють з позицією елемента в отриманій колекції.

$('tr:even')            // парні рядки (0, 2, 4...)
$('tr:odd')             // непарні (1, 3, 5...)
$('li:first')           // перший елемент
$('li:last')            // останній
$('div:eq(8)')          // 9-й (індекс з нуля!)
$('div:lt(3)')          // перші 3 (індекси менше 3)
$('div:gt(5)')          // все, крім перших 6
$(':header')            // всі h1-h6
$('div:not(.active)')   // все, крім .active
$('div:animated')       // у процесі анімації

Підвох з :even — вона бере парні за індексом (0, 2, 4), тобто візуально це 1-й, 3-й, 5-й рядки. Новачки часто думають навпаки і отримують смугасту таблицю зі зсувом на рядок.

:not() — найпотужніший з базових. Всередину можна вкласти будь-який інший селектор чи фільтр: $('li:not(:first):not(.hidden)'). Коли селектор стає нечитабельним — це сигнал виносити логіку в .filter() з колбеком.

Фільтри контенту

Працюють з тим, що всередині елемента, — текстом і дочірніми вузлами.

$('p:contains("ціна")')     // абзаци зі словом "ціна"
$('div:has(img)')           // div, у якому є img
$('td:empty')               // порожні комірки
$('td:parent')              // комірки з ВМІСТОМ (not empty)

:contains() враховує регістр і шукає точне входження — "Ціна" і "ціна" для нього різне. Якщо треба без регістру — тільки через .filter() з .toLowerCase().

:parent — контрінтуїтивна назва. Це не “батьківський елемент”, а “елемент, який є батьком чогось”, тобто не порожній. Пряма протилежність :empty. Назва вибрана невдало, але ми з нею живемо з 2006 року.

Фільтри атрибутів

Переважно перетнулися з CSS3, але синтаксис знати треба — він той самий і в нативному querySelectorAll.

$('a[href]')                // всі посилання з href
$('input[type="email"]')    // email-інпути
$('a[href!="#"]')           // все, крім якоря
$('a[href^="https"]')       // починається з https
$('img[src$=".webp"]')      // закінчується на .webp
$('div[class*="card"]')     // містить "card" у класі

Унікальний тут — [attr!=val]. У CSS його немає: доводиться писати :not([attr="val"]). Все інше — включно з ^=, $=, *= — давно в стандарті і працює без jQuery.

Комбінації з іншими jQuery-фільтрами досі лаконічніші: $('input[type="text"]:visible:not(:disabled)'). Спробуй написати те саме нативно — буде довше і читається гірше.

Фільтри форм

Найкорисніша категорія у 2026-му. Форми обробляти через jQuery досі швидше, ніж писати ручний switch по type.

$(':input')                  // input, select, textarea, button
$(':text')                   // тільки <input type="text">
$(':checkbox:checked')       // відмічені чекбокси
$('select option:selected')  // вибрані опції
$(':disabled')               // заблоковані поля
$(':focus')                  // елемент у фокусі

Розрізняй :input (всі елементи форми) і input (тільки тег <input>). Різниця — двокрапка. Перший включає <select>, <textarea>, <button>, другий — ні.

:checked і :selected працюють з актуальним станом, не з HTML-атрибутом. Для динамічних форм це критично: після кліку [checked] залишиться таким, яким був у HTML, а :checked покаже реальність у DOM.

:first проти .first() — нюанс продуктивності

Псевдокласи :first, :last, :eq() не є частиною CSS-специфікації. Тому jQuery не може делегувати їх нативному querySelectorAll — обробляє вручну, перебираючи результат.

Методи .first(), .last(), .eq() роблять те саме, але працюють на вже отриманій колекції, без повторного парсингу селектора:

$('div:first')    // повільніше: парсинг Sizzle + фільтр
$('div').first()  // швидше: querySelectorAll + зрізання

На колекції з десяти елементів різниці не побачиш. На тисячах — побачиш. Правило: якщо є нативний метод з тим самим результатом — використовуй метод.

Коли jQuery у 2026 ще доречна

Чесно: рідко. Але “рідко” — не “ніколи”.

Є де:

  • Legacy-кодбази, які вже на jQuery. Переписувати заради переписування — гірше, ніж лишити.
  • WordPress з темами і плагінами, які й так тягнуть jQuery. Ти вже заплатив за завантаження — користуйся.
  • Bootstrap 4 (не 5 — там без jQuery).
  • Швидкий прототип без білд-тулів, коли хочеться $('...') без npm install.

Немає де:

  • Новий проєкт з нуля. document.querySelectorAll + forEach + classList — це 90% того, що колись давав jQuery.
  • Будь-який SPA (React, Vue, Svelte) — jQuery там ламає віртуальний DOM.
  • Performance-critical код — нативний API швидший у рази.

Після всієї критики визнаю: jQuery 2006-го врятувала веб від кросбраузерного пекла. Але станом на 2026-й більшість її переваг або увійшли в стандарт, або стали зайвим шаром абстракції.

Підсумок

Фільтри — синтаксичний цукор поверх циклу. Знати треба всі чотири категорії, вживати — з розумом. Якщо є CSS-еквівалент — краще CSS. Якщо є нативний метод — краще метод. Якщо проєкт уже на jQuery — не соромся.

Поділитися:

Залишити коментар ·

Схожі матеріали