Jquery селектори

бібліотека Jquery прекрасна, вона дає практично повний контроль над вмістом сторінки. Проте, щоб докластись до будь-якого елемента, потрібно вміти вибрати його с-поміж інших.

Ми вже розглядали CSS-селектори, тепер черга Jquery. Вашій увазі передрук корисних прйомів з маніпуляції DOM.

$('div span'); // вибираємо усі span , кожного блоку div

Аналогічний результат отримуємо при наступній конструкції.

$('div').find('span'); // вибираємо усі span , кожного блоку div

Така постановка питання з використанням > допомагає вибрати лише безпосередніх нащадків.

$('div > span'); // вибирає всі спани, де вони є прямими нащадками дівів

Що працює швидше і менше грузить пам’ять поки не тестував 🙂

$('div, span'); // вибір всіх div та span об'єктів

Працюємо з сусідніми елементами 🙂

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

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

$('*'); // вибираємо геть усе
 $('p > *'); // вибір усіх нащадків "p"
 $('p').children(); // тут також вибір усіх нащадків "p"
 $('p').parent(); // вибір прямих батьків усіх "p"
 $('p').parents(); // вибір усіх предків "p"
 $('p').parents('div'); // вибір усіх предків "p", які мають тип "div"

Фільтри. Це чи не найпрекрасніше, що є в 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
 $('div:lt(N)'); // вибираємо div-и з номером меншим за N
 $(':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-и

Фільтри по атрибутах

$("div[id]"); // вибираємо усі div-и з атрибутом id
 $("div[title='my']"); // вибираємо усі div-и з атрибутом  title=my
 $("div[title!='my']"); // тут навпаки — вибираємо усі div-и окрім як з атрибутом title=my

 $("div[title^='my']"); // вибираємо усі div-и з атрибутом title, що починається на my
 // наприклад: <div title="myCat">,<div title="myCoffee">, <div title="my...">

 $("div[title$='my']"); // вибираємо усі div-и з атрибутом title, що закінчується на my
 // наприклад: <div title="itsmy">,<div title="somy">, <div title="...my">

 $("div[title*='my']"); // вибираємо усі div-и з атрибутом title, що містить на my
 // наприклад: <div title="itsmy">,<div title="myCat">, <div title="its my cat">,<div title="...my...">

Цей фільтр варто виділити окремо

$("a[rel~='external']"); // вибір усіх A з атрибутом rel, що містить external в переліку, що розділений пробілами
Приклад:
 
 <a href="" rel="external">link</a> — виділить
 <a href="" rel="nofollow external">link</a> — виділить
 <a href="" rel="external nofollow">link</a> — виділить
 <a href="" rel="friend external follow">link</a> — виділить
 <a href="" rel="external-link">link</a> — не виділить

Фільтри для форм

для роботи з формами є кілька конструкцій, які дозволяють вибирати по типу та стану: enabled/disabled/selected/checked

$(":text"); // вибір усіх input з типом =text
 $(":radio"); // вибір усіх  input з типом =radio
 $("input:enabled"); // вибір усіх  включених элементів input
 $("input:checked"); // вибір усіх відмічених чекбоксів
$("form select[name=city] option:selected").val(); // отримання обраних елементів в селекті city
 $("form :radio[name=some]:checked").val(); // отримання обраного значення radio-кнопки some
 $("form :checkbox:checked"); // вибір усіх обраних чекбоксів

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

$("div[name=city]:visible:has(p)"); // вибір видимого div-у з іменем city, який при цьому містить p

Кілька додаткових прийомів для роботи з фільтрами Jquery

 $('select[@name=mySelect] option').remove(); // видаляємо усі елементи зі списку mySelect


 $('select[@name=mySelect]').append('<option>Щось нове :)</option>'); //  додаємо в список новий елементлемент


 $('select[@name=loadFileName] option:first').attr('selected', 'yes'); // робимо виділеним перший елемент списку


 $('select[@name=loadFileName] option:first').removeAttr('selected'); // примусово знімаємо виділення з елементу списку


 var file = $('select[@name=loadFileName] option:selected').val(); // отримуємо значення виділеного елементу списку <option value="some value">


 var file = $('select[@name=loadFileName] option:selected').text(); // дістаємо те, що знаходиться між <option>...</option>


if( typeof $('select[@name=loadFileName] option:selected').text() === 'undefined' ){
 alert('Ніц не вибрано...');
 } // перевіряємо, чи вибраний бодай якийсь елемент в списку



 $('select[@name=loadFileName]').attr('size', $('select[@name=loadFileName] option').size()); // перетворюємо список в автомасштабний



 $('select[@name=loadFileName] option:contains('текст нужного элемента')').attr('disabled', 'disabled'); // робимо недоступним для виділення наступний елемент


 $('select[@name=loadFileName] option:disabled').removeAttr('disabled'); // дозволяємо вибір елементів списку, що раніше були заблоковані

 

Залишити відповідь