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

22

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

Отже, для початку нам необхідна простенька сторінка HTML з кількома елементами, на яких ми і будемо тренуватися у вибірці. Візьмемо приблизно таку сторінку:

jQuery

Заголовок H1

Перший заголовок H2

Другий заголовок H2

Lorem ipsum dolor sit amet.

Voluptatem incidunt labore fugiat quibusdam.

Lorem ipsum dolor sit amet.

Incidunt laudantium itaque, fuga sunt.

Go
$(function(){
});

Спробуємо вибрати заголовки. Для цього достатньо передати у функцію jQuery — $() –найменування потрібного тега:

$(function(){
console.log($(‘h1’));
console.log($(‘h2’));
});

Селекторы jQuery

Як результат, в консолі ми бачимо єдиний заголовок H1 і всі заголовки H2 на сторінці. Все це ми можемо скоротити при бажанні і до одного рядка коду. Згадуємо, як це робиться в CSS, коли ми хочемо однаково оформити відразу кілька елементів – для цього елементи перераховуються через кому:

console.log($(‘h1, h2’));

Тепер в колекцію потрапляють всі перераховані елементи:

Селекторы jQuery

Також можна вибирати за їх класу або ідентифікатором, точно також, як і в CSS. Виберемо всі блоки з класом і ідентифікатором content:

console.log($(‘.content, #content’));

Селекторы jQuery

Ще один цікавий селектор, який може знадобитися в деяких випадках, — зірочка. З допомогою даного селектора ми можемо вибрати всі елементи документа:

console.log($(‘*’));

Селекторы jQuery

Абсолютно всі елементи документа нам, звичайно ж, навряд чи знадобляться, тому ми можемо вказати, що хочемо вибрати всі елементи якогось конкретного елемента документа. Наприклад, виберемо всі елементи body і окремо форми:

console.log($(‘body *’));
console.log($(‘form *’));

Селекторы jQuery

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

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