jQuery підтримує тільки ті селектори CSS, які вибирають елементи DOM. Наприклад,: visited,: hover і: first-line не підтримуються.
Основні селектори
Основні селектори вам знайомі, якщо ви коли-небудь створювали хоча б один шаблон CSS. швидше за все, ви будете використовувати дані селектори протягом 90% всього часу роботи з jQuery:
Ви також можете комбінувати кілька селекторів в один за допомогою коми. jQuery вибере всі елементи, які відповідають будь-якому з селектор. наприклад:
// Вибирає всі div з классом.myClass, а також всі параграфи var selectedElements \u003d $ ( "div.myClass, p");
Вибір елементів по атрибуту
Основні селектори відмінно підходять у випадках, якщо потрібно вибрати всі параграфи на сторінці або елемент, який потрібно вибрати має клас CSS або ID.
Однак, іноді потрібно вибрати певний елемент, у якого немає класу або ID, і немає можливості просто додати клас або ID до даного елементу в розмітці. Така ситуація може скластися при використанні CMS з фіксованим шаблоном HTML або при роботі з контентом, створеним користувачем.
У даній ситуації можливо звузити область вибору за допомогою атрибута HTML елемента, який треба вибрати. Наприклад, можна вибрати:
- Зображення по атрибуту src
- Посилання по атрибуту href
- Всі поля input форми, які мають атрибут type \u003d "checkbox"
jQuery має багато селектор, які можна використовувати для вибору елементів по атрибуту:
| селектор | опис | приклад |
|---|---|---|
| Атрибут | Вибирає елемент (и), які містять певний атрибут незалежно від значення атрибута. | $ ( "Div") |
| Атрибут дорівнює | Вибирає елемент (и), які містять заданий атрибут із заданим значенням. | $ ( "Div") |
| Атрибута не дорівнює | Вибирає елемент (и), які не містять заданого атрибуту або сожержат заданий атрибут, але його значення не відповідає заданому. | $ ( "Div") |
| Атрибут починається з | Вибирає елемент (и), які містять заданий атрибут, у якого значення починається з заданого рядка. | $ ( "Div") |
| Атрибут закінчується |
Вибирає елемент (и), які містять атрибут, у якого значення закінчується заданим рядком. | $ ( "Div") |
| Атрибут містить | Вибирає елемент (и), який містить атрибут, у якого значення містить задану рядок. | $ ( "Div") |
| Атрибут містить слово | Вибирає елемент (и), який містить атрибут, у якого значення містить задане слово. "Слово" - це послідовність символів без пробілів. | $ ( "Div") |
| Атрибут містить префікс | Вибирає елемент (и), який містить атрибут, у якого значення або дорівнює заданому рядку, або починається з заданого рядка з подальшим дефісом. | $ ( "Div") |
Ви можете комбінувати селектори атрибутів для звуження області вибору. наприклад:
// Вибираємо тільки ті зображення, які мають ширину 300 px і висоту 200 px var selectedImages \u003d $ ( "img");
Селектор "Атрибут містить префікс" виглядає неефективно, але він зроблений для обробки атрибутів мови, таких як lang \u003d "en" і lang \u003d "en-US".
Вибір елементів за змістом
Якщо немає можливості звузити область вибору за основними селекторам і по атрибутам, то можна "покопатися" в змісті елементу для визначення, чи підходить він для вибору чи ні. jQuery має 4 селектора для даного призначення:
| селектор | опис | приклад |
|---|---|---|
| : Contains () | Вибирає елемент (и), які містять заданий текст. Текст може бути в самому елементі, так і в будь-якому елементі усередині в обраного елемента. Примітка:: contains () чутливе до регістру - "Hello" не відповідає "hello". | // Вибираємо все div, які містять "myText": $ ( "Div: contains (" myText ")") |
| : Has () | Вибирає елемент (и), які містять 1 або більше елементів, відповідних заданому рядку. Селектор переглядає на відповідність всі елементи всередині заданого елемента. | // Вибираємо все div, які містять параграфи: $ ( "Div: has (p)") |
| : parent | Вибирає елемент (и), які містять інші елементи або текстові вузли. | // Вибираємо все div, які містять будь-що: $ ( "Div: parent") |
| : empty | Вибирає елемент (и), які не містять інших елементів або текстових вузлів. | // Вибираємо все div, які не містять нічого: $ ( "Div: empty") |
Наступний приклад показує, як використовувати: contains (), поряд з селектором класу для вибору параграфів, які мають певний клас, додатковою умовою служить умова змісту певного рядка (або рядків):
// Вибираємо все параграфи, які мають клас "intro" // і також містять текст "MegaWidget" var selectedElements \u003d $ ( "p.intro: contains (" MegaWidget ")"); // Вибираємо все параграфи, які мають клас "intro" // і містять і "MegaWidget" і "WonderWidget" var selectedElements \u003d $ ( "p.intro: contains (" MegaWidget "): contains (" WonderWidget ")");
Вибір елементів по ієрархії
Інший спосіб переміщення об'єктів у jQuery - це розглянути, як вони співвідносяться один до одного на сторінці. Ймовірно, ви знаєте багато таких селектор по роботі з CSS:
| селектор | опис | приклад |
|---|---|---|
| дитина | Вибирає елемент (и), які є дитиною (прямим нащадком) заданого предка (ів). | // Вибираємо всі елементи списку з класом "highlight", які є дитиною для списку з ID "nav": $ ( "Ul # nav\u003e li.highlight") |
| нащадок | Вибирає елемент (и), які є нащадками (дітьми, внуками і так далі) заданого предка (ів). Це більш загальна форма селектора Дитина. | // Вибираємо все посилання всередині списку з ID "nav": $ ( "Ul # nav a") |
| Наступний сусідній елемент |
Вибирає елемент (и), який слід безпосередньо за заданим елементом, де обидва елементи мають одного і того ж батька. | // Вибираємо все параграфи, які йдуть безпосередньо за заголовком H1: $ ( "H1 + p") |
| Наступний сестринський елемент |
Вибирає елемент (и), який слідує за іншим елементом, де обидва елементи є нащадками одного з батьків. Це більш узагальнена версія селектора наступний сусідній елемент. | // Вибираємо всі елементи таблиці після осередки, яка містить слово "Hello": $ ( "Td: contains (" hello ") ~ td") |
| перша дитина | Вибирає елемент (и), який є першою дитиною його батька. | // Вибираємо перші пункти у всіх списках на сторінці: $ ( "Li: first-child") |
| остання дитина | Вибирає елемент (и), який є останньою дитиною його батька. | // Вибираємо останні пункти в усіх списках на сторінці: $ ( "Li: last-child") |
| N-й дитина | Вибирає елемент (и), який є n-м дитиною його батька (Дивись примітку нижче). | // Вибираємо треті пункти в усіх списках на сторінці: $ ( "Li: nth-child (3)") |
| тільки дитина | Вибирає елемент (и), які є дитиною батьків, у яких є тільки діти. | // Вибираємо тільки елементи в списках з одним пунктом: $ ( "Li: only-child") |
Крім завдання певного номера дитини за допомогою: nth-child (), можна вказувати even (для вибору всіх дітей з парними номерами), odd (для вибору всіх дітей з непарними номерами), або вираз (наприклад, "li: nth-child ( 3n + 2) "вибирає кожен третій елемент в списку, а відлік починається з другого елементу).
У наступному прикладі вибирається перша осередок всіх непарних рядків в таблиці, яка має id "myTable":
Var selectedElements \u003d $ ( "table # myTable tr: nth-child (odd)\u003e td: first-child");
Вибір полів форми
Елементи форми мають деякі специфічні властивості, які змушують використовувати деякі трюки для їх вибору. Наприклад, чекбокси, поряд з багатьма іншими типами полів, є елементами input. Таким чином, щоб вибрати чекбокси в формі потрібно використовувати $ ( "input").
Аналогічно, ідентифікація обраних елементів в списку select або позначених чекбоксів в формі може бути стомлюючим заняттям. /
На щастя, 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, textarea, і select. | $ ( ": Input") |
| : checked | Вибирає всі відмічені чекбокси радіо кнопки. | $ ( "Input: checked") |
| : selected | Вибирає всі елементи option. | $ ( "Option: selected") |
| : disabled | Вибирає всі недоступні поля форми. | $ ( "Input: disabled") |
| : enabled | Вибирає All Варіанти поля форми. | $ ( "Input: enabled") |
Крім того, що написано, можна використовувати, наприклад, $ ( "input: checkbox") для вибору всіх чекбоксів на сторінці. Однак, $ ( "input: checkbox") діє швидше, так як jQuery може використовувати функцію JavaScript getElementsByTagName () для швидкого обмеження обсягів пошуку тільки елементами input. Це дійсно для jQuery взагалі - для прискорення коду завжди обмежуйте обсяг для роботи селектор там, де можливо. Наприклад, $ ( "*") діє дуже повільно, так як jQuery повинен знайти кожен окремий елемент на сторінці.
Наступний приклад шукає форму, яка має атрибут action зі значенням "mailform.php", потім вибирає всі зазначені радіо кнопки в формі:
Var selectedElements \u003d $ ( "form input: radio: checked");
Вибір елементів по їх положенню
Іноді потрібно вибрати елемент, про який відомо, що він розташований в наборі раніше обраних елементів. Наприклад, потрібно виділити перший параграф, який має клас "myClass". Для ускладнення прикладу припустимо, що потрібно вибрати всі пункти в списку, який має клас "myClass", а потім вибрати 5-й пункт з отриманого набору.
jQuery має сім селектор, які можна використовувати для обмеження області пошуку на основі позиції елемента:
| селектор | опис | приклади |
|---|---|---|
| : first | Вибирає перший елемент в наборі відібраних елементів. | // Вибираємо перший параграф, який має клас "myClass": $ ( "P.myClass: first") |
| : last | Вибирає останній елемент в наборі відібраних елементів. | // Вибираємо останній параграф, який має клас "myClass": $ ( "P.myClass: last") |
| : Eq () | Вибирає єдиний елемент в наборі відібраних елементів. Вибір елемента здійснюється по послідовному номеру індексу (0 \u003d перший елемент, 1 \u003d другий і так далі). | // Вибираємо з-й параграф, який має клас "myClass": $ ( "P.myClass: eq (2)") |
| : Lt () | Вибирає елементи в наборі відібраних елементів, які розташовані перед елементом із заданим індексом. Наприклад, якщо заданий індекс 2 (тобто 3-й елемент), то будуть вибрані перші 2 елементи (з індексами 0 і 1). | // / Вибираємо перші 2 параграфа, які мають клас "myClass": $ ( "P.myClass: lt (2)") |
| : Gt () | Вибираємо елементи в наборі відібраних елементів, які розташовані після елемента із заданим індексом. Наприклад, якщо заданий індекс 2 (тобто 3-й елемент), то будуть вибрані всі елементи після третього. | // Вибираємо все параграфи, які мають клас "myClass", за винятком перших трьох: $ ( "P.myClass: gt (2)") |
| : even | Вибирає всі елементи з парними індексами в наборі відібраних елементів. Зауважте, що індекси починаються з 0, таким чином в дійсності відбираються 1-й, 3-й і так далі елементи. | // Вибираємо 1й, 3й, 5й, і так далі параграфи, які мають клас "myClass": $ ( "P.myClass: even") |
| : odd | Вибирає всі елементи з непарними індексами в наборі вже відібраних елементів. Зауважте, що індекси починаються з 0, таким чином в дійсності відбираються 2-й, 4-й і так далі елементи | // Вибираємо 2й, 4й, 6й, і так далі параграфи, які мають клас "myClass": $ ( "P.myClass: odd") |
Відзначимо, що дані селектори не працюють також як: first-child,: last-child, і так далі. Наприклад, li.myClass: first-child вибирає тільки пункт списку з класом "myClass", який є першим пунктом у відповідному списку. А li.myClass: first знаходить всі пункти списку на сторінці, які мають клас "myClass", а потім вибирає перший пункт списку в наборі результату пошуку.
У наступному прикладі вибираються всі осередки в перших двох рядках таблиці, яка має ID "myTable":
Var selectedElements \u003d $ ( "table # myTable tr: lt (2)\u003e td");
Інші корисні селектори jQuery
Якщо жоден з перерахованих селектор не допоміг вам виділити потрібні елементи, спробуйте використовувати такі селектори:
| селектор | опис | приклад |
|---|---|---|
| : Not () | Вибирає всі елементи, які не відповідають заданим слектору. | // Вибираємо все параграфи, які не мають класу "myClass": $ ( "P: not (.myClass)") |
| : animated | Вибирає всі елементи, які в поточний момент анімуються jQuery (наприклад, загасають). | // Вибираємо все div, які анімуються в поточний момент: $ ( "Div: animated") |
| : hidden | Вибирає всі приховані елементи. Елемент покладається "прихованим" якщо: його властивість display встановлено в значення "none"; поля форми - type "hidden"; якщо ширина і висота встановлені в 0; якщо один з елементів, які містять заданий елемент є прихованим. Однак, елемент нЕ вважається "прихованим" якщо тільки його властивість visibility встановлено в значення "hidden". | // Вибираємо всі приховані праграфи, які мають клас "myClass": $ ( "P.myClass: hidden") |
| : visible | Вибирає всі видимі елементи. Це протилежний селектор для: hidden. | // Вибираємо всі видимі параграфи, які мають клас "myClass": $ ( "P.myClass: visible") |
| : header | вибирає всі елементи заголовків (h1, h2 і так далі). | // Вибираємо все заголовки, які мають клас "myClass": $ ( ": Header.myClass") |
У наступному прикладі вибираються всі елементи на сторінці, крім заголовків h1:
Var selectedElements \u003d $ ( ": header: not (h1)");
висновок
У даній статті ми розглянули, як вибирати елементи за допомогою селекторів jQuery. Були розібрані такі типи селекторів:
- Основні селектори, Які будуть використовуватися більшу частину часу роботи над проектом
- селектори атрибутів для вибору елементів на основі імен атрибутів і їх значень
- селектори змісту, Які дозволяють вибирати елементи на основі їх змісту
- ієрархічні селектори, Які можна використовувати для вибору елементів на основі їхніх взаємин з іншими елементами на сторінці
- Селектори полів форми, Які забезпечують простий спосіб вибрати різні елементи полів форми
- селектори положення для вибору елементів відповідно до їх становищем в наборі елементів
- додаткові селектори, Такі як: not () для вибору елементів, які не відповідають селектору, і: animated для вибору анімованих елементів
Останнє оновлення: 1.11.2015
Одним з важливих функциональностей jQuery є вибірка елементів. Щоб щось робити з елементами, маніпулювати ними, застосовувати до них методи jQuery, нам треба спочатку їх отримати. Бібліотека надає нам зручний спосіб вибору елементів, заснований на селекторах. Нам досить передати в функцію jQuery селектор і ми можемо отримати потрібний нам елемент, який відповідає даному селектору. Наприклад, якщо необхідно отримати всі еелементи img, то ми можемо використовувати такий вираз: $ ( "img"). В даному випадку "img" буде виступати в якості селектора.
Розглянемо основні селектори jQuery, які використовуються для вибірки елементів.
Базові селектори jQuery
шаблон селектора | опис | |
Вибірка всіх елементів сторінки | Наприклад, вираз $ ( "*"). Css ( "background-color", "red") зафарбуєте всі елементи сторінки і саму сторінку в червоний колір |
|
Вибірка всіх елементів з такою назвою тега | $ ( "Img") вибирає всі елементи img |
|
Вибірка елементу з даними значенням атрибута id | $ ( "# Btn1") вибирає елемент, у якого значення id одно btn1 (наприклад, ) |
|
Вибірка всіх елементів з даними значенням атрибута class | $ ( ". RedStyle") вибирає елементи, у якого значення class одно redStyle (наприклад, ) |
|
$ ( "Selector1, selector2, selectorN") | Вибірка всіх елементів, які відповідають зазначеним селекторам | Наприклад, у нас є такий код: то селектор $ ( ". apple, .orange") вибере елементи, виділені жирним |
конкретизація вибору
Ми можемо використовувати відразу кілька селекторів, щоб більш детально налаштувати вибірку елементів. Наприклад, у нас є така веб-сторінка:
словник
Переклад | |
таблиця | |
яблуко |
В даному випадку ми використовуємо селектор #tab, тобто вибираємо нашу таблицю, яка має id \u003d tab. Вираз css ( "background-color", "silver") встановлює колір елемента - в даному випадку срібний.
Запустивши цю сторінку в веб-браузері ми отримаємо таку картину:
Але ми також можемо використовувати набір селекторів, щоб більш детально провести дію. Наприклад, нам треба, щоб була зафарбована тільки перший рядок, яка має атрибут class \u003d "tabhead". Тоді ми можемо використовувати наступний селектор: $ ( "# tab .tabhead"). В цьому випадку селектор вибере елемент з class \u003d "tabhead", який знаходиться в елементі з id \u003d "tab".
При цьому ми можемо для звуження вибірки використовувати безліч різних селекторів, наприклад: $ ( "div # menu a.redStyle"). Наприклад даний селектор може знайти наприклад такий елемент:
В даному випадку ми застосували ієрархічний селектор, який має на увазі, що елемент по другому селектору повинен знаходитися в елементі за першим селектору. Але крім того, ми можемо також застосувати ще ряд ієрархічних селекторів:
шаблон селектора | опис | |
родітельскій_селектор\u003e дочерній_селектор | Вибірка всіх елементів, які відпо другого селектору і є дочірніми для елементів першого селектора |
|
селектор1 + селектор2 | Вибірка елементів з селектором "селектор2", які розташовуються безпосередньо за елементами "селектор1". Причому обидва елементи повинні перебувати на одному рівні |
Тоді селектор $ ( ". Closed + .open") вибере ті посилання, які виділені жирним, так як ці елементи з атрибутом class \u003d "open" йдуть безпосередньо за елементами з атрибутом class \u003d "closed". |
селектор1 ~ селектор2 | Вибірка елементів з селектором "селектор2", які розташовуються на одному рівні з елементами з селектором "селектор1". |
Наприклад, у нас є наступний блок посилань:
Тоді селектор $ ( ". Closed ~ .open") вибере ті посилання, які виділені жирним, так як ці елементи з атрибутом class \u003d "open" знаходяться на одному рівні з елементами з атрибутом class \u003d "closed". |
селектори атрибутів
Щоб звузити пошук крім базових і ієрархічних селектор, розглянутих вище, ми можемо застосовувати селектори атрибутів. В даному випадку jQuery буде повертати елементи в залежності від значень і визначення зазначених атрибутів.
шаблон селектора | опис | |
Вибірка всіх елементів з атрибутом attr | Наприклад, вираз $ ( "a") вибере всі елементи посилань, які мають атрибут class |
|
Вибірка всіх елементів, у яких значення атрибута attr одно value | Наприклад, вираз $ ( "a") вибере всі елементи посилань, які мають атрибут class \u003d "redStyle" |
|
Вибірка всіх елементів, у яких значення атрибута attr починається з рядка value | Наприклад, вираз $ ( "a") вибрати елементи посилань, які мають атрибут class \u003d "redStyle", так як слово "redStyle" починається на "red". |
|
Вибірка всіх елементів, у яких значення атрибута attr закінчується на рядок value | Наприклад, вираз $ ( "a") вибрати елементи посилань, які мають атрибут class \u003d "redStyle", так як слово "redStyle" закінчується на "Style". |
|
Вибірка всіх елементів, у яких атрибут attr має список значень, розділених пропуском, і одне з цих значень дорівнює value | Наприклад, вираз $ ( "a") вибрати елементи посилань, які можуть мати таке значення атрибута class \u003d "redStyle closed". |
|
Вибірка всіх елементів, у яких значення атрибута attr має має подстроку value | Наприклад, вираз $ ( "a") вибрати елементи посилань, які можуть мати таке значення атрибута class \u003d "redStyle1". |
|
Вибірка всіх елементів, у яких значення атрибута attr представляє або значення value, або список значень, розділених дефісами, і перше значення в цьому списку одно value | Наприклад, вираз $ ( "a") вибрати елементи посилань, які можуть мати таке значення атрибута class \u003d "red-freeStyle-closed". |
контекст селектор
Вище ми використовували такий запис для вибірки елемента: $ (селектор). Цей вираз переглядало все дерево DOM на відповідність елемента селектору. Однак ми можемо обмежити пошук, застосувавши контекст пошуку. Контекст є селектор, в рамках якого нажд робити вибірку елементів. Наприклад, у нас є така веб-сторінка:
На сторінці у нас три посилання, у всіх у них визначено один і той же клас, але дві з них знаходяться в елементі div і саме їх ми хочемо отримати. Тоді ми використовуємо вираз $ ( ". Open", "div # menu") - тут другий параметр-селектор буде контекстом вибірки. А результатом в даному випадку буде наступна сторінка:
Важливо не плутати цей вислів з вибіркою по безлічі селектор, наприклад, $ ( ". Open, div # menu") - це різні вирази, які будуть давати різний результат.
На цьому уроці познайомимося з тим як знайти елементи на сторінці по атрибуту.
В jQuery вибірка елементів по атрибуту виконана відповідно до специфікації CSS.
Коли Ви використовуєте атрибути для вибору елементів, враховуйте те, що деякі атрибути можуть мати кілька значень, розділених між собою пропуском.
наприклад:
... ... ...
Значення атрибута в вираженні селектора має бути укладена в лапки. Здійснюється це одним із таких способів:
- подвійні лапки всередині одинарних лапок: $ ( "a").
- одинарні лапки всередині подвійних лапок: $ ( "").
- екрановані одинарні лапки всередині одинарних лапок: $ ( "a").
- екрановані подвійні лапки всередині подвійних лапок: $ ( "a").
В jQuery пошук елементів по атрибуту можна здійснити за допомогою різних селекторів. Крім цього Ви можете використовувати для вибору елементів комбінацію з декількох селекторів атрибутів. В цьому випадку будуть обрані тільки ті елементи, які відповідають кожному із зазначених селектор.
jQuery - селектори для пошуку елементів по атрибуту
Вибирає елементи, які мають зазначений атрибут (name) зі значенням, рівним заданої рядки (value) або починається з цього рядка (value), за якою слідує дефіс.
Наприклад, вибрати всі елементи div, які мають атрибут class зі значенням, рівним alert або починається з alert-.
...
