Останнім часом мені все частіше задають питання, як вибрати той чи інший елемент у DOM’е, і даний пост буде суцільно присвячений селекторам в jQuery, можливо більшість з них Ви бачили в різних джерелах, але зібрати їх воєдино все ж варто…

Матеріали даної статті включені в підручник «jQuery для початківців». Підручник розповсюджується безкоштовно, і супроводжується інтерактивними прикладами.

У всіх прикладах використовується скорочений варіант виклику jQuery методів, використовуючи функцію $ (знак долара)

Селектори в jQuery базуються на CSS селекторах, а так само підтримують XPath. Щоб не закопуватися в документацію буду наводити приклади, багато прикладів. Але почнемо з самих азів…

Для початку нам знадобиться макет HTML сторінки (цілком типовий макет):

Title

Sub-title small description

Post Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor.

Image Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor.

Banner Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor.

Post Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor.

Image Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor.

Banner Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor.

  • Menu Item 0
  • Menu Item 1
  • Menu Item 2
  • Menu Item 3

Copyright © 2008

А тепер приступимо до вибірках:

Вибір елементів на Id або ClassName аналогічно використовується в CSS

$(‘#sidebar’); // вибір елемента з id = sidebar
$(‘.post’); // вибір елементів із class = post
$(‘div#sidebar’); // вибір елемента div id = sidebar
$(‘div.post’); // вибір елементів div з class = post

Примітка: використовуйте валідні імена класів і id

Блукаємо по ієрархії об’єктів в DOM’е

Простий вибір нащадків:

$(‘div span’); // вибір всіх span елементів в елементах div

Аналогічний результат можна отримати, використовуючи наступну конструкцію:

$(‘div’).find(‘span’); // вибір всіх span елементів в елементах div

Вибір тільки безпосередніх нащадків

$(‘div > span’); // вибір всіх span елементів в елементах div, де span є прямим нащадком div a

Як краще вчинити, що працює швидше? Треба б протестувати…

Так само селектори можна групувати:

$(‘div, span’); // вибір всіх div і span елементів

Пошук по сусідах:

$(‘span + img’); // вибір всіх img елементів перед якими йдуть span елементи
$(‘span ~ img’); // вибір всіх img елементів після першого елемента span
$(‘#banner’).prev(); // вибір попереднього елемента від знайденого
$(‘#banner’).next(); // вибір наступного елемента від знайденого

Вибір усіх елементів, всіх предків, всіх нащадків

$(‘*’); // вибір усіх елементів
$(‘p > *’); // вибір всіх нащадків елементів p
$(‘p’).children(); // —
$(‘p’).parent(); // вибір всіх прямих предків елементів p
$(‘* > p’); // вибір всіх предків елементів p (скоріше за все Вам не знадобиться)
$(‘p’).parents(); // —
$(‘p’).parents(‘div’); // вибір всіх предків елемента p які є div (parents приймає як параметр селектор)

Фільтри

Фільтрів в jQuery реалізовано досить багато, і користуватися ними одне задоволення:

$(‘div:first’); // вибираємо перший div у будинку
$(‘div:last’); // вибираємо останній div у будинку
$(‘div:not(.red)’); // вибираємо div и у яких немає класу red
$(‘div:even’); // вибираємо парні div и
$(‘div:odd’); // вибираємо непарні div и
$(‘div:eq(N)’); // вибираємо div йдуть під номером N в DOMe
$(‘div:gt(N)’); // вибираємо div и, індекс яких більше ніж N DOMe
$(‘div:lt(N)’); // вибираємо div и, індекс яких менше N в DOMe
$(‘:header’); // вибір заголовоков h1, h2, h3 і т. д.
$(‘div:animated’); // вибір елементів з активною анімацією

Фільтри по контенту і видимості:

$(‘div:contains(text)’); // вибираємо div и містять текст
$(‘div:empty’); // вибираємо порожні div и
$(‘div:has(p)’); // вибираємо div и які містять p
$(‘div.red’).filter(‘.bold’) // вибираємо div и які містять клас red і клас bold
$(‘div:hidden’); // вибираємо приховані div и
$(‘div:visible’); // вибираємо видимі div и
[/code]
Так само є фільтри по атрибутах:
$(“div[id]”); // вибір всіх div з атрибутом id
$(“div[title=’my’]”); // вибір всіх div з атрибутом title=my
$(“div[title!=’my’]”); // вибір всіх div з атрибутом title не рівного my
$(“div[title^=’my’]”); // вибір всіх div з атрибутом title починаються з my
//
,
,
$(“div[title$=’my’]”); // вибір всіх div з атрибутом title закінчуються на my
//
,
,
$(“div[title*=’my’]”); // вибір всіх div з атрибутом title містить my
//
,
,
,

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

$(“a[rel~=’external’]”); // вибір всіх A з атрибутом rel містить external у списку значень розділених пропуском

В результаті його роботи будуть обрані наступні теги:

link — так
link — так
link — так
link — так
link — немає

Для роботи з елементами форм є ряд селекторів дозволяє вибирати за типом елемента і фільтрів – enabled/disabled/selected/checked :

$(“:text”); // вибір всіх елементів input з типом =text
$(“:radio”); // вибір всіх елементів input з типом =radio
// і так далі
$(“input:enabled”); // вибір всіх включених елементів input
$(“input:checked”); // вибір всіх зазначених чекбоксов

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

$(“div[name=city]:visible:has(p)”); // вибір видимого div a з ім’ям city, який містить тег p

Наведу так само ряд корисних селекторів для роботи з елементами форм:

$(“form-select[name=city] option:selected”).val(); // отримання обраного(-их) елементів в селекте city
$(“form :radio[name=some]:checked”).val(); // отримання вибраного значення радиобатона з ім’ям some
$(“form :checkbox:checked”); // вибір всіх вибраних чекбоксов

Приклади з нині недоступною статті “jQuery: 8 корисних порад при роботі з елементом SELECT”:

// 1. видалити всі елементи списку mySelect
$(‘select[@name=mySelect] option’).remove();
// 2. додати новий елемент до списку
$(‘select[@name=mySelect]’).append(‘Новий елемент списку’);
// 3. зробити виділеним перший пунки списку
$(‘select[@name=loadFileName] option:first’).attr(‘selected’, ‘yes’);
// 4. примусово зняти виділення з елемента списку
$(‘select[@name=loadFileName] option:first’).removeAttr(‘selected’);
// 5. отримати значення виділеного пункту зі списку
// якщо ви використовуєте атрибут :
var file = $(‘select[@name=loadFileName] option:selected’).val();
// якщо вас цікавить те, що укладено між …:
var file = $(‘select[@name=loadFileName] option:selected’).text();
// 6. перевірити, обраний чи який-небудь елемент списку
if( typeof $(‘select[@name=loadFileName] option:selected’).text() === ‘undefined’ ){
alert(‘Ні один елемент списку не вибрано’);
}
// 7. перетворити в список “автомасштабируемый”
$(‘select[@name=loadFileName]’).attr(‘size’, $(‘select[@name=loadFileName] option’).size());
// 8. зробити недоступні для вибору окремий елемент
$(‘select[@name=loadFileName] option:contains(‘текст потрібного елемента’)’).attr(‘disabled’, ‘disabled’);
// дозволити виділення всіх раніше недоступних елементів можна так:
$(‘select[@name=loadFileName] option:disabled’).removeAttr(‘disabled’);

Якщо Вам хочеться випробувати як це все працює – то для цього можете скористатися тестовій сторінкою

Слайди

Як-то занадто багато тексту вийшло, мабуть пора показувати слайди 😉














Дана стаття написана з використанням наступних ресурсів:

  • Офіційна документація
  • jQuery – Javascript нового покоління
  • jQuery, JavaScript-програмістів

Цикл статей

  • jQuery для початківців
  • jQuery для початківців. Частина 2. JavaScript Меню
  • jQuery для початківців. Частина 3. AJAX
  • jQuery для початківців. Частина 4. Селектори
  • jQuery для початківців. Частина 5. Ефекти
  • jQuery для початківців. Частина 6. Події
  • jQuery для початківців. Частина 7. Пишемо плагіни
  • jQuery для початківців. Частина 8. Розширюємо фільтри
  • jQuery для початківців. Частина 9. Пишемо плагіни анімації