Вибірка елементів в jquery

Відео: jQuery. Урок 6. Вибір елементів на сторінці за допомогою селекторів jQuery

Відео: Уроки jQuery # 2 | Вибір селектор. оптимізація вибірки

є 2 основні завдання jQuery: вибірка елементів і управління елементами. Наприклад, може бути така задача: вибрати все div з певним класом і збільшити в них шрифт. Збільшення шрифту - це вже управління вибіркою. А в цій статті Ви навчитеся робити вибірку елементів на jQuery.

Чи не знайшла б популярності бібліотека jQuery, якби не приголомшливий механізм вибірки елементів. В основі лежать селектори CSS. Загальний вигляд вибірки елементів наступний:

var elements = $("Селектори") -

Якщо Ви раптом ще не знаєте CSS, то спочатку вивчіть його, а вже потім повертайтеся до jаvascript. Для тих же, хто вже знає CSS, розберемо простий приклад вибірки елементів за класом:

class="Red"gt;червоний блок 
class="Blue"gt;синій блок 
class="Red"gt;червоний блок

В даному прикладі ми робимо вибірку всіх елементів з class = "red", далі їх через цикл перебираємо і виводимо ім`я класу. Очевидно, що там скрізь буде "red".

Абсолютно будь-які селектори, які Ви використовували в CSS так само можна використовувати в jQuery для вибірки: Контекстні селектори, селектор ID, селектор класу, селектор параметрів, а також всілякі їх комбінації.

Замість псевдоелементів з CSS в jQuery є фільтри (іноді їх так само називають псевдоелементи). Їх мета та ж, що і у псевдоелементів: уточнити вибірку. Розберемо приклад:

class="Red"gt;червоний блок 
class="Blue"gt;синій блок 
class="Green"gt;зелений блок

В даному прикладі ми робимо вибірку всіх span між першими div, в яких class НЕ дорівнює "green"(Це робить фільтр not).

Є й маса інших фільтрів, найбільш популярні з них:

focus - елемент, який знаходиться у фокусі.
even - елементи з парними номерами позиції.
odd - елементи з непарними номерами позиції.
hidden - невидимі елементи.
visible - видимі елементи.
checked - відмічені елементи (checkbox і radio).

Безумовно, в даній статті розібрані далеко не всі можливі селектори. Їх навіть більше, ніж в CSS. Однак, на практиці застосовується тільки невелика частина з них, а повний список, якщо буде потрібно, завжди можна буде подивитися в довіднику.

А більш детально вибірка елементів за допомогою jQuery розібрана в цьому курсі.

Поділися в соціальних мережах:

Схожі