Рідко використовувані селектори jquery
Вам можуть бути знайомі популярні селектори, так як вони засновані на CSS. Однак існують і менш використовувані селектори. У цьому уроці я розповім вам про ці менш відомі, але не менш важливі селектори.
Універсальний селектор (*)
Селектор по праву називається універсальним, з його допомогою можна вибрати всі елементи на сторінці, в тому числі head, body, script або link. Подивіться моє демо. щоб зрозуміти, про що я говорю.
Даний селектор в парі з іншими елементами сильно уповільнює роботу. Однак швидкість роботи також залежить від того, як використовується селектор і в якому браузері відкрита сторінка. У 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.
У демо нижче я пробігаю по двом списками і виправляю значення атрибута category.
Селектор: contains (text)
Селектор використовується для вибору всіх тегів, що містять задану рядок. Шуканий рядок може знаходитися, як безпосередньо всередині елемента, так і всередині його дочірніх елементів.
Приклад нижче допоможе вам зрозуміти принцип роботи даного селектора. Ми поставимо жовтий фон для всіх входжень фрази Lorem Ipsum в тексті. Спочатку розмітка:
З тексту видно, що фраза Lorem Ipsum зустрічається по тексту 7 раз в різних місцях. Я спеціально зробив одну фразу з маленької літери, щоб показати чутливі до регістру. JS код нижче підсвічує всі входження:
Лапки навколо шуканого рядка можна не ставити. Тобто обидва варіанти запису $ ( «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)»).
Один з можливих способів застосування - маніпуляція елементами із заданими дочірніми елементами. У прикладі нижче я буду міняти колір всіх елементів списку з посиланням всередині. Розмітка демо:
JS код для зміни кольору елементів списку:
індексні селектори
Крім 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) вибирає всі елементи вище заданого індексу.
Щоб краще зрозуміти принцип роботи індексних селектор, покликавши на різні кнопки в демо.
селектори форм
В JQuery є безліч селекторів для легкого отримання доступу до елементів форми. Наприклад, селектор: button вибере все теги button і всі елементи з типом button. Точно так же селектор: checkbox вибере все input'и з типом checkbox. В JQuery є селектори майже для всіх інпут.
Розглянемо форму нижче:
У формі я створив два текстових елемента і 4 чекбокса. Сама форма проста, але з її допомогою ви зрозумієте, як працюють селектори форм. За допомогою селектора: text ми підрахуємо кількість текстових елементів і оновимо текст в першому інпут.
Для вибору всіх текстових інпут я використовував: 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») - беремо краще від обох світів. Для нумерації заголовків можна використовувати наступний код.
заключні думки
Редакція: Команда webformyself.
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі