Селектори jQuery: як використовувати?

JQuery – бібліотека методів, написаних на мові JavaScript, які призначені для спрощеної роботи з елементами HTML сторінки. Дана бібліотека також значно спрощує вибірку цих елементів, адже підтримує набір селекторів, велика частина яких запозичена з CSS. У даній статті ми докладно розповімо про всіх селекторах jQuery і наведемо приклади їх використання.

CSS і jQuery

Як говорилося вище, селектори в jQuery запозичені з CSS, проте, тут є кілька «АЛЕ».

• По-перше, jQuery підтримує тільки селектори, вибирають елементи DOM, тобто ви не зможете працювати з подієвими селекторами, наприклад, hover, і псевдо-елементами first-line.
• По-друге, у jQuery є безліч інших селекторів, які ви не зустрічали у правилах CSS, саме тому, якщо ви вже знаєте всі елементи CSS, ця стаття все одно буде актуальна для вас.

Базові елементи

Дані селектори використовуються найчастіше, адже це найпростіший і надійний спосіб вибірки елементів. Ця група повністю відповідає селекторам CSS:

Селектор	Опис селектора
$(“*”)	У вибірку попадають всі елементи на сторінці
$(“b”)	У вибірку попадають елементи з обраним тегом з розмітки HTML, в даному прикладі – елементи …
$(“.classA”)	У вибірку попадають елементи з зазначеним класом ( )
$(“#IDone”)	У вибірку попадають елементи з зазначеним id ( )

Як і в CSS, ви можете вибрати кілька селекторів jQuery одночасно. Їх можна прописати через кому. Наприклад, використовувати селектор jquery по імені тега і по ID – $(“#IDone, b”). Допускається і вибірка через тег+клас, або тег+ID, наприклад, $(“b.classA”).

Селектори атрибутів

Використовуючи різні CMS, ви можете зіткнутися з ситуацією, коли елемента HTML-розмітки неможливо задати Id або клас. Та ж проблема виникає при обробці вмісту, що генерується користувачем. Звідси виникає проблема вибірки конкретних елементів, однак її легко вирішити, використовуючи селектор по атрибуту з jquery.

Селектор	Опис селектора
$(“div[attribute]”)	Обробляє всі елементи з зазначеним атрибутом, при цьому його значення не враховується
$(“div[attribute=’value’]”)	Вибираючи елемент, враховує його атрибут і значення
$(“div[attribute!=’value’]”)	Вибирає той елемент, у якого зазначений атрибут має відмінне від зазначеного значення. У вибірку також потрапляють елементи, що не мають даного атрибута
$(“div[attribute^=’value’]”)	Вибирає елемент, у якого заданий атрибут починається з рядка, зазначеної в value
$(“div[attribute$=’value’]”)	Вибирає елемент, у якого заданий атрибут закінчується рядком, зазначеної в value
$(“div[attribute*=’value’]”)	Вибирає елемент, у якого заданий атрибут містить в будь-якій частині зазначену в value рядок
$(“div[attribute~=’value’]”)	Вибирає елемент, у якого заданий атрибут має зазначене в value слово (послідовність знаків без пробілів)
$(“div[attribute|=’value’]”)	Вибирає елемент, у якого заданий атрибут відповідає вказаному в value значенням, або починається з нього з подальшим використанням дефісу

Ви можете комбінувати атрибути, щоб звузити пошук відповідників, наприклад, $(“img[width=500][height=260]”).

Вибірка елементів з утримання

Покопатися у вмісті елементів HTML-сторінки і вибрати за результатами потрібний з них – унікальна можливість jQuery. Використовуючи такий метод, ви можете, наприклад, зробити селектор jquery за текстом, що міститься в параграфі (

текст

).

Селектор	Приклад селектора	Опис селектора
:contains()	$(“p:contains(‘value’)”) – усі параграфи , містять рядок ‘value’.	Вибирає елемент, в якому міститься зазначена рядок. Елемент буде задовільний навіть у тому випадку, якщо зазначена рядок буде знаходитися всередині його дочірнього елемента. Запам’ятайте, що даний селектор чутливий до регістру, тому рядок “text” не буде задовольняти вказаним значенням “TEXT”
:has()	$(“p:has(b)”) – вибирає всі елементи , що містять .	Вибирає елемент, в якому міститься інший елемент, зазначений у дужках. Цей селектор також враховує дочірні елементи
:parent	$(“p:parent”) – усі , містять що-небудь.	Вибирає елемент, в якому міститься що-небудь
:empty	$(“p:empty”) – усі порожні .	Вибирає елемент, в якому нічого не міститься.

Кожен з представлених селекторів буде вибирати певний елемент код на картинці нижче.

Такий jquery селектор також можна поєднувати з іншими, наприклад, $(“p.mail:contains(‘e-mail’)”) буде вибирати всі параграфи з класом “mail”, які містять в собі рядок “e-mail”.

Вибір елементів по ієрархії

Даний метод абсолютно ідентичний селекторам з CSS. Він дозволяє вибрати елементи, в залежності від їх положення відносно споріднених елементів у структурі DOM. Тут краще відразу розбирати селектори jquery на прикладах.

Приклад селектора	Опис селектора
$(“ul > li”)	Вибирає всі елементи з тегом , які є прямими нащадками (дітьми)
$(“ul a”)	Вибирає всі елементи з тегом , які є нащадками будь-якого рівня для
$(“h1 + p”)	Вибирає братський елемент з тегом , що йде відразу за
$(“li ~ a”)	Вибирає елемент з тегом , який слід відразу за , однак тут вони можуть не бути братськими, але повинні мати спільного предка
$(“li:first-child”)	Вибирає елемент з тегом , який є першим дитиною свого батька, наприклад,
$(“li:last-child”)	Вибирає елемент з тегом , який є останньою дитиною свого батька, наприклад,
$(“li:nth-child(3)”)	Вибирає елемент з тегом , який є третьою дитиною свого батька. Замість трійки, звичайно ж, можна використовувати будь-яке інше число
$(“li:only child”)	Вибирає ті елементи з тегом батько яких має тільки прямих нащадків (дітей)

Окремо варто поговорити про jquery селекторі li:nth-child(n), адже він дозволяє задавати не тільки конкретні числа. Так він може вибирати усі парні елементи, якщо замість n задати константу even, або непарні, задавши odd. Замість n також можна використовувати вираз, наприклад, $(“li:nth-child(2n+3)”) буде вибирати кожен другий елемент, починаючи свій відлік з третього прямого нащадка.

Робота з полями форми

Тег input має безліч різних варіацій, робота яких залежить від атрибута type. Для вибору різних типів полів введення в jQuery передбачені спеціальні селектори.

Селектор	Приклад селектора	Опис селектора
:button	$(“input:button”)	Вибирає всі кнопки
:checkbox	$(“input:checkbox”)	Чекбокси
:file	$(“input:file”)	Поля завантаження файлів
:image	$(“input:image”)	Поля вводу зображень
:password	$(“input:password”)	Поля для паролів
:radio	$(“input:radio”)	Радіо-кнопки
:reset	$(“input:reset”)	Кнопки скидання форми
:submit	$(“input:submit”)	Кнопки відправки форми
:text	$(“input:text”)	Поля для тексту
:input	$(“:input”)	Всі поля форми
:checked	$(“input:checked”)	Відмічені поля в чекбоксах або радіо-кнопках
:selected	$(“option:selected”)	Елементи меню option
:disabled	$(“input:disabled”)	Відключені поля форми
:enabled	$(“input:enabled”)	Включені поля форми

Вибір за положенням

JQuery селектор положення дуже схожий на селектор ієрархії. Він вибирає елемент за його положенням шукали під попередня умова елементів.

Селектор	Опис
:first	Працює з першим елементом з відповідного списку
:last	З останнім елементом списку
:eq(n)	Вибирає елемент зі списку за його індексом (n). Увага! Нумерація елементів, що підходять під умову jQuery select ведеться з 0!
:lt()	Вибираються всі елементи зі списку, знаходять до елемента з індексом n
:gt()	Вибираються всі елементи зі списку, що знаходять після елемента з індексом n
:even	Вибираються елементи з парним номером індексу
:odd	Вибираються елементи з непарним номером індексу

Інші селектори

Дані селектори неможливо приєднати до якої-небудь групи, проте вони не менш важливі. Наприклад, селектор: not(), який можна назвати логічним, дозволяє “перевернути” умова або його частину, зробивши вибірку з невідповідних умов.

Також не менш корисним виявиться селектор: hidden, який дозволить розгорнути елемент-картинку з розмірами 0х0 рх на весь екран, наприклад, по натисненню кнопки.

Селектор	Опис
:not()	Вибирає елементи, що не відповідають заданому в дужках умові
:animated	Вибирає елементи, анимируемые jQuery в даний момент
:hidden	Вибирає елементи властивість display: none, type=”hidden”, і з висотою і шириною в 0px. Також поширюється на елементи, що містять в собі приховані елементи одним з вищеперелічених способів. Увага! Елемент із властивістю visibility, встановленим у “hidden”, не потрапить у вибірку jquery select
:visible	Назад: hidden
:header	Вибирає елементи h1, h2, h3, h4, h5 і h6

Як краще використовувати селектори?

Оптимізація сайту – важливе завдання, адже від якості її виконання залежить навантаження на сервер, зручність роботи користувача, а також час відгуку інтерфейсу. Про оптимізації скриптів на jQuery і на JavaScript в цілому написано безліч книг, однак вони виходять за рамки даної статті. Ми лише дамо кілька простих порад, які значно збільшать продуктивність скриптів при вибірці елементів.

Намагайтеся обходитися базовими селекторами jQuery.

При виборі декількох елементів для обробки намагайтеся об’єднати їх у певну групу, а не вибирати кожен окремо. Зробити це можна через клас, або використовуючи більш специфічні селектори.

Використовуючи вибір за положенням, намагайтеся максимально мінімізувати список, з якого буде відбуватися вибірка – це значно знизить швидкість пошуку потрібного елемента.

Приклад скрипта з jQuery і його селекторами:

Висновок

Тепер ви знаєте абсолютно всі селектори з jQuery, крім того, сподіваємося, що приклади допомогли вам зрозуміти, як будувати потрібну умову з декількох різних селекторів.