Як використовувати селектори jquery для виділення елементів сторінки
Зазвичай селектори jQuery використовуються для вибору елементів на сторінці, щоб потім викликати методи jQuery для маніпулювання ними.
Селектори jQuery засновані на селекторах CSS, і якщо ви знаєте CSS, то вже має базове уявлення про ідею вибору елементів на сторінці.
В даному уроці ми розглянемо селектори, які підтримуються jQuery. Багато з них такі ж як і селектори CSS, але є і специфічні для jQuery. Для кожного селектора наведено приклад використання для вибору елемента сторінки.
У урок включені наступні розділи:
jQuery підтримує тільки ті селектори CSS, які вибирають елементи DOM. Наприклад. visited. hover і: first-line не підтримуються.
Основні селектори
Основні селектори вам знайомі, якщо ви коли-небудь створювали хоча б один шаблон CSS. швидше за все, ви будете використовувати дані селектори протягом 90% всього часу роботи з jQuery:
Ви також можете комбінувати кілька селекторів в один за допомогою коми. jQuery вибере всі елементи, які відповідають будь-якому з селектор. наприклад:
Вибір елементів по атрибуту
Основні селектори відмінно підходять у випадках, якщо потрібно вибрати всі параграфи на сторінці або елемент, який потрібно вибрати має клас CSS або ID.
Однак, іноді потрібно вибрати певний елемент, у якого немає класу або ID, і немає можливості просто додати клас або ID до даного елементу в розмітці. Така ситуація може скластися при використанні CMS з фіксованим шаблоном HTML або при роботі з контентом, створеним користувачем.
У даній ситуації можливо звузити область вибору за допомогою атрибута HTML елемента, який треба вибрати. Наприклад, можна вибрати:
- Зображення по атрибуту src
- Посилання по атрибуту href
- Всі поля input форми, які мають атрибут type = "checkbox"
jQuery має багато селектор, які можна використовувати для вибору елементів по атрибуту:
Вибирає елемент (и), які містять певний атрибут незалежно від значення атрибута.
Вибирає елемент (и), які містять заданий атрибут із заданим значенням.
Атрибута не дорівнює
Вибирає елемент (и), які не містять заданого атрибуту або сожержат заданий атрибут, але його значення не відповідає заданому.
Атрибут починається з
Вибирає елемент (и), які містять заданий атрибут, у якого значення починається з заданого рядка.
Вибирає елемент (и), які містять атрибут, у якого значення закінчується заданим рядком.
Вибирає елемент (и), який містить атрибут, у якого значення містить задану рядок.
Атрибут містить слово
Вибирає елемент (и), який містить атрибут, у якого значення містить задане слово. "Слово" - це послідовність символів без пробілів.
Атрибут містить префікс
Вибирає елемент (и), який містить атрибут, у якого значення або дорівнює заданому рядку, або починається з заданого рядка з подальшим дефісом.
Ви можете комбінувати селектори атрибутів для звуження області вибору. наприклад:
Селектор "Атрибут містить префікс" виглядає неефективно, але він зроблений для обробки атрибутів мови, таких як lang = "en" і lang = "en-US".
Вибір елементів за змістом
Якщо немає можливості звузити область вибору за основними селекторам і по атрибутам, то можна "покопатися" в змісті елементу для визначення, чи підходить він для вибору чи ні. jQuery має 4 селектора для даного призначення:
Вибирає елемент (и), які містять заданий текст. Текст може бути в самому елементі, так і в будь-якому елементі усередині в обраного елемента. Примітка. contains () чутливе до регістру - "Hello" не відповідає "hello".
// Вибираємо все div, які містять "myText":
$ ( "Div: contains ( 'myText')")
Вибирає елемент (и), які містять 1 або більше елементів, відповідних заданому рядку. Селектор переглядає на відповідність всі елементи всередині заданого елемента.
// Вибираємо все div, які містять параграфи:
$ ( "Div: has (p)")
Вибирає елемент (и), які містять інші елементи або текстові вузли.
// Вибираємо все div, які містять будь-що:
$ ( "Div: parent")
Вибирає елемент (и), які не містять інших елементів або текстових вузлів.
// Вибираємо все div, які не містять нічого:
$ ( "Div: empty")
Наступний приклад показує, як використовувати: contains (). поряд з селектором класу для вибору параграфів, які мають певний клас, додатковою умовою служить умова змісту певного рядка (або рядків):
Вибір елементів по ієрархії
Інший спосіб переміщення об'єктів у jQuery - це розглянути, як вони співвідносяться один до одного на сторінці. Ймовірно, ви знаєте багато таких селектор по роботі з CSS:
Вибирає елемент (и), які є дитиною (прямим нащадком) заданого предка (ів).
// Вибираємо всі елементи списку з класом "highlight", які є дитиною для списку з ID "nav":
$ ( "Ul # nav> li.highlight")
Вибирає елемент (и), які є нащадками (дітьми, внуками і так далі) заданого предка (ів). Це більш загальна форма селектора Дитина.
// Вибираємо все посилання всередині списку з ID "nav":
$ ( "Ul # nav a")
Наступний сусідній елемент
Вибирає елемент (и), який слід безпосередньо за заданим елементом, де обидва елементи мають одного і того ж батька.
// Вибираємо все параграфи, які йдуть безпосередньо за заголовком H1:
$ ( "H1 + p")
Наступний сестринський елемент
Вибирає елемент (и), який слідує за іншим елементом, де обидва елементи є нащадками одного з батьків. Це більш узагальнена версія селектора наступний сусідній елемент.
// Вибираємо всі елементи таблиці після осередки, яка містить слово "Hello":
$ ( "Td: contains ( 'hello')
Вибирає елемент (и), який є першою дитиною його батька.
// Вибираємо перші пункти у всіх списках на сторінці:
$ ( "Li: first-child")
Вибирає елемент (и), який є останньою дитиною його батька.
// Вибираємо останні пункти в усіх списках на сторінці:
$ ( "Li: last-child")
Вибирає елемент (и), який є n-ою дитиною його батька (дивись примітку нижче).
// Вибираємо треті пункти в усіх списках на сторінці:
$ ( "Li: nth-child (3)")
Вибирає елемент (и), які є дитиною батьків, у яких є тільки діти.
// Вибираємо тільки елементи в списках з одним пунктом:
$ ( "Li: only-child")
Крім завдання певного номера дитини за допомогою: nth-child (). можна вказувати even (для вибору всіх дітей з парними номерами), odd (для вибору всіх дітей з непарними номерами), або вираз (наприклад, "li: nth-child (3n + 2)" вибирає кожен третій елемент в списку, а відлік починається з другого елементу).
У наступному прикладі вибирається перша осередок всіх непарних рядків в таблиці, яка має id "myTable".
Вибір полів форми
Елементи форми мають деякі специфічні властивості, які змушують використовувати деякі трюки для їх вибору. Наприклад, чекбокси, поряд з багатьма іншими типами полів, є елементами input. Таким чином. щоб вибрати чекбокси в формі потрібно використовувати $ ( "input [type = 'checkbox']").
Аналогічно, ідентифікація обраних елементів в списку select або позначених чекбоксів в формі може бути стомлюючим заняттям. /
На щастя, jQuery забезпечує кілька специфічних для форм селектор, які полегшують життя:
Вибирає All Варіанти поля форми.
Наступний приклад шукає форму, яка має атрибут action зі значенням "mailform.php". потім вибирає всі зазначені радіо кнопки в формі:
Вибір елементів по їх положенню
Іноді потрібно вибрати елемент, про який відомо, що він розташований в наборі раніше обраних елементів. Наприклад, потрібно виділити перший параграф, який має клас "myClass". Для ускладнення прикладу припустимо, що потрібно вибрати всі пункти в списку, який має клас "myClass". а потім вибрати 5-й пункт з отриманого набору.
jQuery має сім селектор, які можна використовувати для обмеження області пошуку на основі позиції елемента:
Вибирає перший елемент в наборі відібраних елементів.
// Вибираємо перший параграф, який має клас "myClass":
$ ( "P.myClass: first")
Вибирає останній елемент в наборі відібраних елементів.
// Вибираємо останній параграф, який має клас "myClass":
$ ( "P.myClass: last")
Вибирає єдиний елемент в наборі відібраних елементів. Вибір елемента здійснюється по послідовному номеру індексу (0 = перший елемент, 1 = другий і так далі).
// Вибираємо з-й параграф, який має клас "myClass":
$ ( "P.myClass: eq (2)")
Вибирає елементи в наборі відібраних елементів, які розташовані перед елементом із заданим індексом. Наприклад, якщо заданий індекс 2 (тобто 3-й елемент), то будуть вибрані перші 2 елементи (з індексами 0 і 1).
// / Вибираємо перші 2 параграфа, які мають клас "myClass":
$ ( "P.myClass: lt (2)")
Вибираємо елементи в наборі відібраних елементів, які розташовані після елемента із заданим індексом. Наприклад, якщо заданий індекс 2 (тобто 3-й елемент), то будуть вибрані всі елементи після третього.
// Вибираємо все параграфи, які мають клас "myClass", за винятком перших трьох:
$ ( "P.myClass: gt (2)")
Вибирає всі елементи з парними індексами в наборі відібраних елементів. Зауважте, що індекси починаються з 0, таким чином в дійсності відбираються 1-й, 3-й і так далі елементи.
// Вибираємо 1й, 3й, 5й, і так далі параграфи, які мають клас "myClass":
$ ( "P.myClass: even")
Вибирає всі елементи з непарними індексами в наборі вже відібраних елементів. Зауважте, що індекси починаються з 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".
Інші корисні селектори jQuery
Якщо жоден з перерахованих селектор не допоміг вам виділити потрібні елементи, спробуйте використовувати такі селектори:
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!