Селектори фільтри jquery, підручник jquery
Фільтри, за допомогою яких можна уточнити результат інших селекторів.
За призначенням і синтаксису вони дуже схожі на псевдокласи в CSS
Відповідає тому з обраних за допомогою селектора елементів,
який знаходиться у фокусі. Не варто використовувати: focus без передує його селектора
тобто просто $ ( ": focus")
це рівносильно $ ( "*: focus"). а селектор "*" є найбільш "повільним" з селектор.
Відкрийте приклад в новому вікні і подивіться вихідний код
Відповідає першому елементу, з усіх обраних за допомогою селектора.
Еквівалентний селектору: eq (0).
Відповідає останньому елементу, з усіх обраних за допомогою селектора. Знайдемо першого хлопця на селі (перший елемент з класом man, що знаходиться всередині елемента village):
Відкрийте приклад в новому вікні і подивіться вихідний код
Знайдемо останнього парубка на селі (останній елемент з класом man, що знаходиться всередині елемента village):
Відкрийте приклад в новому вікні і подивіться вихідний код
: Eq (index)
Відповідає елементу, що займає позицію під номером index, серед вже обраних за допомогою селектора елементів.
Нумерація елементів починається з 0. Знайдемо і виділимо другий і п'ятий елемент span на сторінці:
Відкрийте приклад в новому вікні і подивіться вихідний код
: Not (selector)
Виключає елементи задовольняють селектору selector зі знайдених елементів. Метод .not () виконує те ж саме, що і розглянутий селектор, і частіше за все, при його використанні, код виходить більш Новомосковскемим, ніж при використанні селектора: not () виділимо всі елементи з класом rissole (котлета), крім тих, які містять елементи з класом fly (муха):
Відкрийте приклад в новому вікні і подивіться вихідний код
Відповідає елементам з парними номерами позицій.
Оскільки рахунок елементів починається з 0
: Even буде відповідати 1. 3 і т. Д. Елементів.
Відповідає елементам з непарними номерами позицій.
Оскільки рахунок елементів починається з 0
: Odd буде відповідати 2. 4 і т. Д. Елементів. Елементи списку розрахуються на "перший-другий", а так само візьмуть чергуються кольору:
Відкрийте приклад в новому вікні і подивіться вихідний код
Фільтрує набір обраних елементів, залишаючи тільки ті, індекс яких превишаетn.
Фільтрує набір обраних елементів, залишаючи тільки ті, індекс яких меньшеn. Виділимо планети, що йдуть після землі (що йде під індексом 2):
Встановимо зелений колір фону всіх елементів, з індексом, що перевищує 2
Відкрийте приклад в новому вікні і подивіться вихідний код
Відповідає елементам, які в даний момент беруть участь в анімації. При натисканні на кнопку, знайдемо і виділимо div-елемент, який в поточний момент бере участь в анімації:
Відкрийте приклад в новому вікні і подивіться вихідний код
Відповідає всім схованим елементів сторінки. Елемент вважається прихованим в наступних випадках:
- Його css-властивість display одно none
- Він є елементом форми з type = "hidden"
- Його висота або ширина дорівнює 0
- Він знаходиться всередині невидимого елемента і тому теж невидимий на сторінці.
Відповідає всім видимим елементам сторінки.
: Contains (text)
Відповідає елементам, які містять рядок text.
Чутливий до регістру. За допомогою селектора: contains (text).
Елемент буде обраний як в разі якщо рядок text присутній безпосередньо всередині нього,
Так і в разі, якщо вона знаходиться всередині одного з його нащадків.
Відкрийте приклад в новому вікні і подивіться вихідний код
Відповідає елементам, які не містять тексту та інших елементів.
Наявність одного тільки пробілу вже вважається текстом Селектор: empty є інверсією: parent.
Знайдемо всі порожні депозитні комірки (порожні клітинки в таблиці):
Відкрийте приклад в новому вікні і подивіться вихідний код
: Has (selector)
Відповідає елементам, які мають нащадками, що задовольняють селектору selector. Для оптимальної роботи підійде наступний варіант: Знайдемо div всередині яких є елементи з класом lited і забарвимо їх в золотий колір:
Відкрийте приклад в новому вікні і подивіться вихідний код
Відповідає всім непустою елементам.
Наявність одного тільки пробілу вже буде вважається наявністю вмісту. Для оптимальної роботи підійде наступний варіант: Не варто плутати селектор: parent з jQuery-методами .parent () і .parents () (які шукають батьківські елементи і всіх нащадків, відповідно). Незважаючи на загальну назву, призначення у селектора і методів різні.
Селектор: empty є інверсією: parent.
Знайдемо всі непусті осередки в таблиці:
Відкрийте приклад в новому вікні і подивіться вихідний код
: Nth-child (index / even / odd / equation)
Як аргумент приймає число або рядок.
Число може представляти індекс елемента.
Зверніть увагу, що тут відлік ведеться з 1
Вибираються всі елементи, які є n-тах нащадками свого батька або парними / непарними нащадками. У прикладі ми шукаємо кожен другий елемент li у всіх відібраних елементах ul. ну і відзначаємо їх.
Відкрийте приклад в новому вікні і подивіться вихідний код
: First-child
Вибираються всі елементи, які є першими нащадками своїх батьків.
: Last-child
Вибираються всі елементи, які є останніми нащадками своїх батьків.
У прикладі ми вибираємо перший елемент span в кожному знайденому елементі div і підкреслюємо їх текст.
Так, і ще при наведенні курсору миші додаємо клас, який зробить текст жирним і зеленого кольору.
Відкрийте приклад в новому вікні і подивіться вихідний код
У прикладі ми вибираємо останній елемент span в кожному знайденому елементі div і робимо їх текст червоного кольору. Зменшуємо розмір шрифту до 80%. При наведенні курсора миші додаємо клас, який закреслить текст.
Відкрийте приклад в новому вікні і подивіться вихідний код
: Only-child
Вибираються всі елементи, які є єдиними нащадками свого батька.
Якщо батько має інших нащадків - нічого не буде вибрано.
У цьому прикладі в кожному відібраному елементі div шукаємо кнопку не має сестринських елементів.
Ну і трохи її модифікуємо, встановлюючи для неї текст "Alone" і синю рамку шириною 2 пікселя.
Відкрийте приклад в новому вікні і подивіться вихідний код