Селектори jQuery. Частина 3

31

Від автора: вітаю вас, друзі. У цій статті ми продовжимо вивчення бібліотеки jQuery. Основа основ роботи з jQuery полягає в умінні вибрати потрібні елементи зі сторінки, щоб потім зробити з ними необхідні маніпуляції. У статті ми розглянемо основні селектори jQuery, що дозволяють гнучко вибирати елементи сторінки.

Отже, продовжимо вивчати способи вибірки елементів за допомогою jQuery. Як бачите, способів дуже багато, що, безумовно, говорить на користь даної бібліотеки і вказує на зручність її використання.

Ми навчилися з вами діставати дочірні елементи будь-якого елемента, а також всіх його нащадків. А як щодо того, щоб вибрати сусідній елемент, який йде після вказаного? Без проблем. В цьому нам допоможе селектор плюс (+).

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

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

І спробуємо вибрати немає наступний елемент після елемента з кириличним значенням атрибута data-item:

var elem = $(‘li[data-item*=т] + li’);
console.log(elem);

Результат можна спостерігати в консолі:

Селекторы jQuery

Відмінно! А що якщо ми захочемо вибрати, скажімо, перший та останній елементи списку? Немає нічого простіше. Знову-таки, звернемося до специфікації CSS3 і згадаємо про псевдоклассах :first-child :last-child. Спробуємо:

var liFirst = $(‘li:first-child’),
liLast = $(‘li:last-child’);
console.log(liFirst);
console.log(liLast);

Код вище отримає перший та останній елементи списку. Також ми можемо інвертувати результат, вибравши всі елементи, крім першого і останнього в наборі. Для цього використовуємо псевдоклас :not:

var li = $(‘li:not(:first-child :last-child)’);

Такий записом ми вказали взяти всі елементи списку, крім першого і останнього. Але і цього може бути замало, можливо ми захочемо отримати абсолютно будь-який елемент списку. Для цього можна скористатися лічильником елементів. Кожен елемент колекції має свій номер, індекс. Можете вважати його індексом масиву. Відповідно, ми можемо взяти конкретний елемент з конкретним значенням. Зробити це допоможе селектор :eq. В якості прикладу візьмемо третій елемент списку. Нумерація елементів починається з нуля, відповідно, третій елемент буде мати індекс 2:

var li = $(‘li:eq(2)’);

Селекторы jQuery

Супер, все вийшло! Але якщо ви думаєте, що на цьому способи вибірки елементів закінчилися, тоді ви помиляєтеся :) насправді ми не розглянули і половини доступних селекторів jQuery для вибірки елементів. Проте вже розглянутих вистачить вам в більшості випадків. У наступній статті ми познайомимося з деякими з селекторів для роботи з формами.

На цьому сьогодні все. Більше про jQuerу ви можете дізнатися з наших уроків або курсу. Удачі!