Вибір елементів сторінки

кликни мене

Привіт всім!

Інший абзац. але вже з класом.

Цей контейнер SPAN.

Абзац з ідентифікатором
А цей контейнер SPAN усередині нього.

Форма для введення облікових даних

ім'я



пароль





Я використовую свій комп'ютер




Я використовую загальний комп'ютер








Зберегти мої облікові дані на цьому комп'ютері

Перед нами відкриється ось такий вигляд сторінки.

Виберемо в горизонтальному меню пункт "Console".

C допомогою команди $ ( "# bar"); знайдемо всі елементи з ідентифікатором #bar.

Після того, як введений код, натисніть клавішу Enter і побачите ось такий результат:

Отриманий результат говорить про те, що в нашому документі є тільки один елемент з ідентифікатором #bar. а саме p.

Вибір дескрипторів по імені класу

Стольже швидко, як і за типом ідентифікатора, ми можемо вибирати елементи по наданим дескрипторів класу або класів. Для цього треба вказати ім'я класу з точкою (.) Перед ним:

Вибір всіх елементів з класом .foo здійснюється за допомогою наступної команди:

В консолі відобразиться наступний результат:

Вибір елементів за типом дескриптора

Для вибору елементів на кшталт дескриптора досить вказати в якості селектора ім'я цього дескриптора, наприклад p, div, span:

Щоб вибрати всі абзаци

введемо наступну команду:

В консолі відобразиться наступний результат:

Уточнений вибір елементів за допомогою комбінованих селектор

Буваю ситуації, коли потрібно виділити лише дескриптори певного типу з заданим класом. Це можна зробити, використавши в селекторі поєднання типу дескриптора і класу.

Введемо в консоль наступну команду, відбирають зразки тільки з класом foo.

Між дескриптором і класом в коді не повинно бути пробілу.

Як бачимо з наведеного нижче результату елемент span ні відібраний, хоча і має клас foo.

групові селектори

У тих випадках, коли необхідно отримати доступ до кількох наборам елементів, використовуються групові селектори. Наприклад, щоб відібрати зразки класу foo і всі елементи, які мають ідентифікатор #bar, будемо використовувати наступну команду:

Ця команда поверне елементи, відповідні хоча б одній із зазначених у ній селектор.

ієрархічні селектори

Іноді можливостей вибору об'єктів DOM на підставі типу елемента, класу або ідентифікатора, є недостатнім. Зокрема нам може знадобитися доступ до елементів, які знаходяться всередині заданого елемента, є сусідами з ним або розташовуються після нього в іншому місці документа. Наприклад, таке завдання виникає, якщо необхідно видалити певний активний клас з усіх пунктів меню, крім одного, на якому був виконаний клацання, витягти все спискові елементи з обраного невпорядкованими списку або змінити атрибути елемента-оболонки при виборі елемента форми.

Вибір елементів-нащадків

Вибір нащадків, тобто елементів, які містяться всередині інших елементів, які називаються предками, здійснюється за допомогою конструкції, що включає в себе селектор предка (ancestor), пробіл і селектор нащадка (descendant):

Щоб вибрати всі елементи span. є нащадками елемента body. виконаємо в консолі наступну команду:

Ця команда поверне все елементи span. містяться в тілі документа, хоча при цьому вони знаходяться ще і всередині дескрипторів абзаців.

Вибір дочірніх елементів

Селектор дочірніх елементів здійснює більш специфічний відбір елементів в порівнянні з селектором нащадків. Він відбирає лише елементи, які є безпосередніми нащадками елементів-предків (родітетелей). Для вибору дочірнього елемента використовується конструкція, що включає в себе селектор батьківського елемента (parent), символ "більше" (>) і селектор дочірнього елемента (child):

Спробуємо вибрати в текстовому файлі всі елементи span, що є безпосередніми нащадками елемента body:

Оскільки не існує жодного елемента spsn? який містився б безпосередньо в елементі body, висновок виявиться порожнім.

Відберемо всі елементи span, що є безпосередніми нащадками елементів p:

Відповідний висновок буде наступний:

Вибір наступного елемента

Іноді в сценарії може знадобитися вибрати наступний елемент в DOM структурі. Конструкція такогоселектора включає в себе вказівку елемента, визначеного як початковий (тут можна використовувати будь-який селектор шаблонів), знак "плюс" (+) і селектор, що вибирає елемент, визначений як наступний:

Перевіримо, як це працює, ввівши таку команду:

Так як в нашому документі є тільки один елемент з класом foo, буде повернуто лише один елемент абзацу.

Далі створимо більш загальний запит І обираючи абзаци, кожен з яких слід безпосередньо за якихось абзацом:

Наша розмітка містить чотири абзаци, і для кожного з них, крім останнього, є наступний абзац, тому результуючий набір буде містити три елементи:

Вибір сестринських елементів

Всі елементи, які містяться всередині одного і того ж елемента (мають загального безпосереднього предка), є сестринськими по відношенню один до одного. Відбір сестринських елементів здійснюється точно також, як і відбір таких елементів, за винятком того, що даний селектор буде відшукувати все сестринські елементи, розташована після початкового, а не тільки наступний, тобто той, який розташовується безпосередньо слідом за початковим.

Для вибору сестренскіх елементів необхідно вказати селектор початкового елемента, символ "тильди" (

) І селектор сестринських елементів:

Щоб знайти всі елементи, які є сестринськими по відношенню до абзацу з класом foo, виконаємо наступну команду:

Результат буде таким.

селектори jQuery

Таблиця. Всі можливі варіанти використання селекторів перераховані в таблиці нижче:

Схожі статті

• Вибір елемента по класу

• Я не поїду в одному ліфті з собакою - (с) - сторінка 13 - littleone 2018-2018

• Зміна фону сторінок