Як працювати з селекторами jquery

У jquery селектори використовують для того щоб схопити елемент або декілька елементів DOM. Потім із захопленими елементами DOM щось роблять. Завдяки селекторам ви можете знаходити елементи за різними ознаками: значенням атрибутів, порядковими номерами, іменами класів, ідентифікаторів, вмісту елементів, батьківським елементам, дочірнім елементам.

Наведу вам найпростіший приклад. Для того щоб схопити все блоки div ви повинні використовувати селектор $ ( "div"). Зверніть увагу на те, що будуть виділені всі блоки div. Якщо хочете дізнатися скільки таких блоків на сторінці, то застосувати функцію length. Наприклад, $ ( "div"). Length. Селектор $ ( '. Class-name') знайде всі елементи з класом class-name. Точка перед початком селектора обов'язкове. Якщо ви забудете вказати точку, то повернеться порожній результат. $ () - це функція для пошуку елементів по заданому селектору jQuery.

Тепер приклад складніша. Допусти у вас кілька id і вони схожі один на одного. Як їх усіх схопити. Вся складність в тому, що id різні? Тут нам допоможе умова в атрибуті $ ( "div [id ^ = 'left-block']"). Є ще один спосіб перерахування атрибутів. Він полягає в перерахуванні атрибутів через кому. Наприклад, $ ( "# left-block1, # left-block2, # left-block3"). Зверніть увагу на те що рядок всередині селектора стає занадто великий. Це не зручно. Можна цю запис записати інакше: $ ( "div [id = 'left-block1'] [id = 'left-block2'] [id = 'left-block3']").

• "*" - всі елементи
• ".className" - елементи з класом className
• "#idName" - елемент (один!) З ідентифікатором idName
• "TagName" - елементи з заданим ім'ям тега

Фільтри у вмісті

• ": Contains (text)" - елементи, що містять заданий текст
• ": Empty" - елементи без вмісту (без тексту та інших елементів)
• ": Has (selector)" - елементи, які містять хоча б один елемент з selector
• ": Parent" - непусті елементи

Фільтри дочірніх елементів. Cелектор фільтрують елементи згідно їх розташуванню в батьківських елементах

• ": First-child" - елементи, розташовані першими в своїх батьківських елементах
• ": Last-child" - елементи, розташовані останніми в своїх батьківських елементах
• ": Nth-child ()" і ": nth-child-last ()" - елементи, розташовані певним чином в батьківських елементах (парні, непарні, що йдуть під заданим номером)
• ": Only-child" - елементи, які є єдиними нащадками в своїх батьківських елементах
• ": Only-of-type" - елементи, які є єдиними, що задовольняють селектору, нащадками в своїх батьківських елементах
• ": First-of-type" - ті з обраних елементів, які першими зустрічаються в своїх батьківських елементах
• ": Last-of-type" - ті з обраних елементів, які останніми зустрічаються в своїх батьківських елементах
• ": Nth-first-of-type ()" і ": nth-last-of-type ()" - ті з обраних елементів, які в певну чергу зустрічаються в своїх батьківських елементах

Фільтри елементів форм

• ": Button" - елементи з тегом button або типом button
• ": Radio" - елементи, які є перемикачами
• ": Checkbox" - елементи, які є прапорцями
• ": Text" - елементи, які є текстовими полями
• ": Password" - елементи, які є полями введення пароля
• ": File" - елементи, які є полями завантаження файлів
• ": Submit" - елементи, які є кнопками відправки форми
• ": Reset" - елементи, які є кнопками очищення форми
• ": Image" - елементи, які є зображеннями для відправки форми (input типу image)
• ": Input" - елементи, які є елементами форми (з тегами input, textarea або button)
• ": Selected" - вибрані елементи (зі статусом selected). Це можуть бути елементи типу