Селектори і фільтри jquery
У минулих уроках ми розбирали питання загальних понять jQuery і способів його підключення.
У цій статті мова піде про застосування селекторів в jQuery (CSS і XPath), які дозволяють з легкістю і точністю вибрати один або кілька елементів DOM. До кожного селектору буде приведений код, приклад застосування. Використання jQuery селекторів не викликає проблем з роботою в старий браузерах, наприклад IE 6, так як містить в собі механізми роботи CSS 1-3.
Структура коду jQuery
Знак долара $ - позначає використання jQuery. selector - елемент DOM з яким працюємо і спеціальна функція jQuery з її параметрами (наприклад, анімація, розгортання, переміщення і тд).
Приклад jQuery коду
Селектори в jQuery
В даному уроці ми зупинимося докладно на питанні селектор. Що ж це таке?
Якщо Ви хочете попрацювати з конкретним елементом, і тільки один раз (в теорії, так як на практиці деякі браузери не погребують повторним використанням ідентифікатора), то присвоюємо йому унікальний id.
#id - вибирає єдиний елемент з переданим ідентифікатором (id). В даному випадку special
.class - вибираємо все елементи із зазначеним класом. Все правильно, їх може бути кілька. Головне, щоб назва класу було однаковим.
Як бачите, елемента (div) два і класи у них однакові.
У всіх елементів, де значення класу spec_class також створюються такі ж межі, як і в попередньому випадку, однак вже червоні.
Вибираються всі елементи певного типу. Це або body. або все div. або все table і так далі.
У всіх div з'явиться зелена рамка.
* (Всі елементи) - вибираємо абсолютно всі елементи. Навіть head і body.
У всіх елементів Вашого документа з'явиться синя рамка.
Вибираємо всі елементи в body і робимо їм чорну кордон в 2 пікселя.
За типом: selector1, selector2. selectorN - перераховуємо всі елементи. Нижче цікавий приклад спільного використання селекторів.
Вибирає всі елементи div, span і p, у яких вказаний клас spec_class. Всі селектори просто вказується через кому.
Ієрархічні селектори в jQuery
Вибирається головний елемент (батьківський елемент) і елементи включені в нього (нащадки). Розглянемо на прикладі нижче батька form і нащадків select.
У всіх елементів select, нащадків form буде встановлена чорна пунктирна межа.
Тепер виберемо всіх нащадків родітелького елемента.
На початку вибираємо всіх спадкоємців елемента з ідентифікатором id. а потім створюємо їм подвійну кордон чорного кольору.
prev і next (попередній і наступний)
Вказуємо елементи, що йдуть наступними (next) за елементом, позначених як попереднього (prev).
Вибираємо елементи input, що йдуть за label. Встановлюємо їм властивості CSS - колір в формі чорного кольору, а значення (.val) встановлено Готово!
Тепер працюємо з сестринськими елементами. Виюіраем всіх сестер, наступних за попереднім елементом (prev).
Шукаємо усі елементи div, які є сестринськими по відношенню один до одного і йдуть відразу за елементом з ідентифікатором #prev. Зверніть увагу, що в прикладі не будуть відібрані елементи span, оскільки відбір йде тільки для елементів div.
базові фільтри
Буде обраний перший елемент із зазначеним селектором.
У першому рядку (tr) в таблиці текст буде виділений напівжирним (bold).
Тепер будемо вибирати останній елемент із зазначеним селектором.
Знаходимо останній рядок (tr) в таблиці і фарбуємо фон в жовтий колір і також встановлюємо жирний шрифт (bolder).
Використовуючи заперечення відфільтровує елементи. Вибираємо все input, в яких не варто прапорця (checkbox), а також span, наступні за ними
Значення чекбоксів при цьому не змінюється.
Увага! Цікавий приклад. який застосовує кожен другий у своїй практиці. Як вибрати парний або непарний елементи? Потрібно для того, щоб рядки в тексті або навіть коді робити Новомосковскемимі. Стартове значення 0.
Відбираємо парні рядки в таблиці. Виділена буде перша, третя і тд рядки. Увага! Відлік йде за індексами, а в них перший рядок має значення 0. Далі відбираються рядки з індексами 0, 2, 4 і т.д.).
Тепер вибираємо непарні елементи. Вважається значення індексу, починаючи з 0. Відповідно будуть обрані значення 1,3,5,7 і тд. Це відповідає 2,4,6 і тд рядках, так як їх відлік йде по факту, з першої.
Фон непарних рядків офарблюємо в сірий.
Вибираємо конкретний індекс елемента. У прикладі пофарбуємо тільки один рядок таблиці.
Вибираємо за індексом елемент 2. Нагадую, це буде 3-й рядок, так як тео буде третій за рахунок індекс (0,1,2).
Тепер вибираємо значення індексу, які більше зазначеного в селекторі.
Вибираємо рядки в таблиці, індекс елемента яких більше 4, тобто їх індекс дорівнює 5,6 і тд. Це відповідає 6, 7 і тд зустрічається елементів, в нашому випадку рядках таблиці.
Тепер вибираємо значення індексу, які менше зазначеного в селекторі.
Вибираються всі елементи td з індексом мНапрімер шукаємо всі елементи TD, з індексом менше 3. Оскільки відлік, ще раз нагадую, ведеться з нуля, то це рядки таблиці (td) 1,2,3.
Будуть обрані всі елементи, які є заголовками (h1, h2, h3 і тд)
Для всіх заголовків (елементів h) ми встановимо синій шрифт і світло-Серв фон.
Будуть відібрані всі елементи, які є в той момент анімованими.
Тут приклад трохи складніше. Після кліка по кнопці міняємо колір анімованого елементу (div). С не анімованими елементами змін не відбувається.