Від автора: селектори в JQuery грають чільну роль. Більшість методів в JQuery працюють тільки на якихось елементах, тому перед їх використанням необхідно вибрати який-небудь тег. Приміром, щоб прикріпити подія click кнопки, цю кнопку спочатку необхідно вибрати.
Вам можуть бути знайомі популярні селектори, так як вони засновані на CSS. Однак існують і менш використовувані селектори. У цьому уроці я розповім вам про ці менш відомі, але не менш важливі селектори.
Універсальний селектор (*)
Селектор по праву називається універсальним, з його допомогою можна вибрати всі елементи на сторінці, у тому числі head, body, script або link. Подивіться моє демо, щоб зрозуміти, про що я кажу.
$(“section *”) // Вибираються всі дочірні елементи
$(“section > *”) // Вибираються всі прямі дочірні елементи
$(“section > * > *”) // Вибираються всі дочірні елементи другого рівня
$(“section > * > * a”) // Вибираються посилання третього рівня
Цей селектор в парі з іншими елементами сильно уповільнює роботу. Проте швидкість роботи також залежить від того, як використовується селектор і в якому браузері відкрито сторінку. У Firefox наступна запис $(«#selector > *»).find(«li») працює повільніше, ніж $(«#selector > ul»).find(«li»). Цікавий і той факт, що Chrome трохи швидше Firefox виконує запис $(«#selector > *»).find(«li»). Запис $(«#selector *»).find(«li») у всіх браузерах виконується повільніше, ніж запис $(«#selector ul»).find(«li»). Раджу порівнювати продуктивність перед використанням селекторів.
У цьому демо порівнюється швидкість виконання всіх селекторів.
Селектор анімації:animated)
З допомогою даного селектора можна отримати доступ до всіх елементів, чия анімація ще не закінчився на момент запуску селектора :animated. Є одна проблема – будуть вибрані тільки елементи, анімовані за допомогою JQuery. Цей селектор є розширенням JQuery і не збільшує продуктивність коду на відміну від рідного методу querySelectorAll().
За допомогою JQuery також не можна засікти CSS анімацію, але можна засікти момент її завершення з допомогою події animationend. Погляньте на наступне демо.
У демо вище до виконання $(«:animated»).css(“background”,”#6F9″); анімуються тільки непарні теги DIV, тому вони зеленого кольору. Після цього функція анімації викликається для решти елементів DIV. Якщо клікнути на кнопку button, всі DIV и стануть зеленими.
Селектор нерівності атрибута ([attr!=”value”])
Звичайні селектори атрибутів визначають, чи існує атрибут з заданим ім’ям або значенням. А селектор [attr!=”value”] навпаки вибирає всі елементи з незаданным атрибутом або з атрибутом, чиє значення не збігається з заданим. Еквівалентна запис :not([attr=”value”]). На відміну від [attr=”value”] селектор [attr!=”value”] не входить в специфікацію CSS, а значить, запис у формі $(«css-selector»).not(«[attr=’value’]«) може підвищити продуктивність у сучасних браузерах.
У коді нижче ко всім тегам li з атрибутом data-category рівним css додається клас mismatch. Корисна штука для налагодження або встановлення потрібного значення атрибута через JS.
$(“li[data-category!=’css’]”).each(function() {
$(this).addClass(“mismatch”);
// Додаємо клас mismatch class до відфільтрованим селекторам.
$(“.mismatch”).attr(“data-category”, attributeValue);
// Встановлюємо потрібне значення атрибута
});
У демо нижче я пробігаю за двома списками і виправляю значення атрибута category.
Селектор :contains(text)
Селектор використовується для вибору всіх тегів, які містять вказаний рядок. Шукана рядок може перебувати, як безпосередньо всередині елемента, так і всередині його дочірніх елементів.
Приклад нижче допоможе вам зрозуміти принцип роботи даного селектора. Ми поставимо жовтий фон для всіх входжень фрази Lorem Ipsum в тексті. Спочатку розмітка:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset containing sheets Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum Wikipedia Link
This lorem ipsum should not be highlighted.
- A Lorem Ipsum List
- More Elements Here
З тексту видно, що фраза Lorem Ipsum зустрічається з текстом 7 разів у різних місцях. Я спеціально зробив одну фразу з маленької букви, щоб показати регистрозависимость. JS код нижче підсвічує всі входження:
$(“section:contains(‘Lorem Ipsum’)”).each(function() {
$(this).html
$(this).html).replace(/Lorem Ipsum/g, “Lorem Ipsum“)
);
});
Лапки навколо шуканого рядка можна не ставити. Тобто обидва варіанти запису $(“section:contains(‘Lorem Ipsum’)”) і $(“section:contains(Lorem Ipsum)”) будуть вірні в демо вище. Областю пошуку я вибрав теги section, а текст Lorem Ipsum шукається саме в такій формі. Більше того, так як селектор регистрозависимый, текст у другому тегу section не повинен подсветиться. У цьому демо наочно видно, що все працює.
Селектор :has(selector)
Цей селектор вибирає всі теги, в яких зазначений елемент зустрічається хоча б один раз. Для збігу у тега не обов’язково повинні бути прямі спадкоємці. :has() не входить в специфікацію CSS. Для підвищення продуктивності в сучасних браузерах можна використовувати запис $(«pure-css-selector»).has(selector) замість $(«pure-css-selector:has(selector)»).
Один з можливих способів застосування маніпуляція елементами з заданими дочірніми елементами. У прикладі нижче я буду змінювати кольори всіх елементів списку з посиланням всередині. Розмітка демо:
- Pellentesque habitant morbi tristique senectus.
- Pellentesque habitant morbi tristique senectus.
- Pellentesque habitant morbi tristique senectus.
- Pellentesque habitant morbi tristique senectus.
(… more list elements here …)
JS код для зміни кольору елементів списку:
$(“li:has(a)”).each(function(index) {
$(this).css(“color”, “crimson”);
});
Логіка коду досить проста. Я пробігає в циклі по всім елементам списку із посиланнями і ставлю їм малиновий колір. Можна також змінювати текст всередині елементів списку або викинути їх з DOM. Думаю, селектор буде корисний і в інших ситуаціях. На CodePen можете подивитися демо код вище.
Індексні селектори
Крім CSS селекторів типу :nth-child() в JQuery є і свої індексні селектори — :eq(index), :lt(index): gt(index). На відміну від CSS побратимів ці селектори вважають з нуля. Тобто селектор :nth-child(1) вибере перший дочірній елемент, а :eq(1) обере другий. Для вибору першого використовується :eq(0).
Індексні селектори приймають від’ємні значення. Якщо задати від’ємне значення, починається відлік у зворотному напрямку з останнього елемента.
Селектор :lt(index) вибирає всі елементи, які менше заданого значення. Щоб вибрати перші три елемента, необхідно записати :lt(3), так як індексами елементів будуть 0,1 і 2. Задавши від’ємний індекс, проводиться відлік у зворотному напрямку, і вибираються всі значення до отриманого елемента. Точно так само селектор :gt(index) вибирає всі елементи вище заданого індексу.
:lt(4) // Вибираються перші 4 елемента
:lt(-4) // Вибираються всі елементи, крім останніх 4
:gt(4) // Вибираються всі елементи, крім перших 5
:gt(-4) // Вибираються останні три елемента
:gt(-1) // Нічого не вибрано
:eq(4) // П’ятий елемент
:eq(-4) // Четвертий елемент з кінця
Щоб краще зрозуміти принцип роботи індексних селекторів, покликайте на різні кнопки в демо.
Селектори форм
В JQuery є безліч селекторів для легкого доступу до елементів форми. Приміром, селектор :button вибере всі теги button і всі елементи з типом button. Точно так само селектор :checkbox вибере всі input’и з типом checkbox. В JQuery є селектори майже для всіх инпутов.
Розглянемо форму нижче:
У формі я створив два текстових елемента і 4 чекбокса. Сама форма проста, але з її допомогою ви зрозумієте, як працюють селектори форм. З допомогою селектора :text ми підрахуємо кількість текстових елементів і оновимо текст в першому инпуте.
var textCount = $(“:text”).length;
$(“.text-elements”).text(‘Text Inputs :’ + textCount);
$(“:text”).eq(0).val(‘Added programatically!’);
Для вибору всіх текстових инпутов я використовував :text, потім я порахував їх кількість з допомогою методу length. У третьому вираженні я з допомогою :eq() отримую доступ до першого елементу і ставлю йому значення.
Зверніть увагу, що в jQuery 1.5.2 селектор :text повертає true для елементів, у яких не заданий атрибут type. Демо
Селектор заголовків:header)
Якщо у вас коли-небудь виникала завдання вибрати всі заголовки на сторінці, то зробити це можна за допомогою $(“:header”), а не розписувати $(“h1 h2 h3 h4 h5 h6”). Селектор не входить в специфікацію CSS, а значить, можна підвищити продуктивність, спочатку використовуючи селектор CSS, а потім .filter(«:header»).
Наприклад, на сторінці є тег article і три заголовка. В такому разі можна було б використовувати $(“article :header”), а не $(“article h1, article h2, article h3”). А зробити код ще швидше можна за допомогою $(«article»).filter(«:header») – беремо найкраще від обох світів. Для нумерації заголовків можна використовувати наступний код.
$(“article :header”).each(function(index) {
$(this).text((index + 1) + “: “+ $(this).text());
// Додаємо номер заголовка
});
І демо
Заключні думки
У цьому уроці я розповів вам про що використовуються рідко селектори, з якими ви можете зустрітися в JQuery. У більшої частини описаних селекторів є замінники, але все ж треба знати, що є й такі селектори. Сподіваюся, ви винесли з уроку щось нове для себе. Якщо у вас є питання чи пропозиції, пишіть про це в коментарях.
