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

37

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

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

Lorem ipsum dolor sit amet.

Incidunt laudantium itaque, fuga sunt.

Вкладений параграф 1

Вкладений параграф 2

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




Go

Припустимо, ми хочемо вибрати всі параграфи, які знаходяться усередині блоку, який в свою чергу вкладений всередину блоку з класом content. Якщо ми спробуємо вибрати по тегу, тоді будуть обрані абсолютно всі параграфи:

var elem = $(‘p’);
console.log(elem);

Селекторы jQuery

Такий варіант нам не підходить. Згадуємо CSS і те, який селектор використовується для звернення до прямим нащадкам. Точно так само і в jQuery:

var elem = $(‘.content > div > p’); // так
var elem2 = $(‘.content div > p’); // або так

Тепер розглянемо приклади вибірки елементів по їх атрибутам. jQuery дозволяє гнучко вибирати елементи за значенням будь-якого атрибута або навіть за його наявності. Це може бути будь-атрибут width або height у картинки, name у елементів форми і т. д.

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

var elem = $(‘*[height]’);
var elem = $(‘img[height]’); // або ж явно зазначимо, що потрібні саме картинки

Селекторы jQuery

А що якщо нам потрібні картинки лише певної висоти? Легко. Ми просто додатково вкажемо значення атрибута:

var elem = $(‘img[height=100]’);

При бажанні ми можемо додатково вказати значення та інших атрибутів, наприклад ширини:

var elem = $(‘img[height=100][width=400]’);

Для прикладу виберемо поле форми з вказаним значенням атрибута name:

var elem = $(‘input[name=»email»]’);

Також ми можемо інвертувати результат. Візьмемо наведений вище приклад з картинками. Наприклад, ми хочемо взяти будь-які зображення, висота яких не дорівнює 100 пикселів. Це можна зробити так:

var elem = $(‘img[height!=100]’);

Селекторы jQuery

Також ми можемо використовувати навіть символи регулярних виразів для того, щоб вказати з чого починається (^) або чим закінчується значення атрибута ($). Приклади:

var elem = $(‘img[height^=1]’); // картинки з висотою, значення якої починається з 1
var elem = $(‘img[height$=00]’); // картинки з висотою, значення якої закінчується 00

Ще одним корисним при роботі зі значеннями атрибутів символом, є символ зірочки (*). Він дозволяє вказати частина значення, підрядок. Давайте до списку додамо довільний атрибут data-item:

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

А тепер спробуємо вибрати той елемент, в значенні атрибуту якого зустрічається літера «т»:

var elem = $(‘li[data-item*=»т»]’);

При наведенні на елемент в консолі він буде підсвічений на сторінці:

Селекторы jQuery

Дуже зручно, чи не так? Однак і це не все. Хоча, використовуючи вивчені можливості ми можемо вибрати практично будь-який елемент сторінки, але в доповнення до цих можливостей jQuery пропонує нам ще більш значний список для вибірки елементів. З іншими можливостями ми познайомимося вже в наступній статті.

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